AJAX基础_AJAX获取PHP数据
前言
本篇AJAX基础教程，只讲干货，拒绝废话。
全文通过两个实例来讲解AJAX的基本用法，第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据，
第2个实例是获取从服务器PHP文件的数据。
注意：必须在服务器环境下在才能运行AJAX程序，本文使用的WAMP
准备知识可不看，有一点基础直接跳到实例部分也能理解，代码中都有详细注释。
准备知识
掌握AJAX技术的核心是理解XMLHttpRequest这个对象，它是一个JavaScript对象。下面简单介绍下它
的属性和方法。
属性
readyState
表示请求当前的状态，共有5个值，含义分别如下：
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = completed
这里我们只关注第4个状态，代表向服务器发送的请求已经完成（不代表成功）。
onreadystatechange
这是一个事件属性，就像onclick单击事件一样，readyState的值一旦变化，就会触发这个事件。
status
表示HTTP请求的状态码，值为200时表示请求成功。
responseText
以字符串的形式返回从服务器请求的数据。
方法
open('GET/POST', 'URL')
GET与POST 2选1，URL表示要从服务器请求文件的地址。
send(content)
向服务器发送数据，请求方法为POST时会用。
实例1 从服务获取HTML文件的数据
需要2个文件放在WAMP的WWW目录下通过，浏览器localhost运行即可。
文件1： apples.html
文件2： k1.html
<!-- filename: apples.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color: red">hello world</p>
<p>你看到的信息来自外部文件apples.html</p>
</body>
</html>
<!-- filename: k1.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ajax示例</title>
</head>
<body>
<div>
<button>Apples</button>
</div>
<div id="target">
Press a button
</div>
<script>
(function() {
var buttons = document.getElementsByTagName("button")[0];
buttons.addEventListener("click", handleButtonPress);
function handleButtonPress() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleResponse; // onreadystatechange有5种状态
xhr.open("GET", "apples.html"); // 从服务器获取信息
xhr.send(); // 没有向服务器发送信息，所以这里为空
}
function handleResponse(e) {
// console.log(e.target);
// console.log("he_" + Math.random());
/*
xhr刚创建的时候，onreadystatechange=1
使用open方法后1，请求结束返回4
这里一共打印4次信息
*/
// if (xhr.readyState == XMLHttpRequest.DONE &&
// xhr.status == 200) {
// document.getElementById("target").innerHTML
// = xhr.responseText;
// }
if (e.target.readyState == XMLHttpRequest.DONE &&
e.target.status == 200) {
document.getElementById("target").innerHTML
= e.target.responseText;
}
/*
XMLHttpRequest.DONE 相当于 xhr.readyState == 4
由于xhr变量是一个局部变量，所以只能使用e.target才能访问到xhr对象。
若果直接使用xht对象，就会出现未找到xhr对象的错误。
如果不想这么麻烦，直接把xhr对象定义到函数外边也是可以的。
*/
}
})()
</script>
</body>
</html>
效果
实例2 从服务器获取PHP文件的数据
使用Ajax技术获取PHP文件的数据，与获取HTML等纯文本格式的文件不同。
服务器上PHP格式的文件不能当成纯文本文件来获取，当我们使用
open(method, php_filename)时，服务器会先执行这个PHP文件，只有echo
出来的数据，才能被JavaScirpt获取到，并返回给xhr.responseText
实例2 ajax+php 获取服务器时间小程序，需要两个文件k1.php和tell_time.php
需要在配置好的PHP环境下运行。代码如下：
<!-- filename: k1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Demonstration</title>
<style>
body {
background-color:#ccc;
text-align:center;
}
.displaybox {
width:150px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font-size: 24px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h1>Ajax Demonstration</h1>
<h2>无刷新获取服务器时间</h2>
<form>
<input type="button" value="Get Server Time" id="btn">
</form>
<div id="showtime" class="displaybox"></div>
<script>
(function(){
var btn = document.getElementById('btn');
btn.addEventListener('click', getServerTime);
var xhr = new XMLHttpRequest();
function getServerTime() {
var myurl = 'tell_time.php';
myRand = parseInt(Math.random() * 99999999);
// 构造随机数，防止缓存问题
var modurl = myurl + "?rand=" + myRand;
xhr.open("GET", myurl);
xhr.onreadystatechange = xhrResponse;
xhr.send();
}
function xhrResponse() {
if (xhr.readyState == 4 && xhr.status == 200) {
var timeValue = xhr.responseText;
document.getElementById('showtime').innerHTML = timeValue;;
}
}
})()
</script>
</body>
</html>
<?php
// filename: tell_time.php
date_default_timezone_set('Asia/shanghai');
// 把默认时区设置成中国/上海，也就是设置成北京时间。
echo date('H:i:s');
// 直接打印当前时间。
?>
效果
AJAX基础_AJAX获取PHP数据的更多相关文章
- 使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
- Ajax从服务器端获取数据
写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...
- Ajax从服务器端获取数据---原生态Ajax
写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
- Ajax读取XML和JSON数据
Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或者JSON. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用JSON语句话,服务端 ...
- 使用Typescript重构axios(六)——实现基础功能：获取响应数据
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- ajax请求获取的数据无法赋值给全局变量问题总结
一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...
- 用ajax获取后台数据，返回json数据，怎么在前台使用？
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
随机推荐
- 使用jQuery修改动态修改超链接
以下是修改a元素标签的href链接和文字的代码: <script type="text/javascript" src="jquery-1.9.1.min.js&q ...
- chrome 浏览器最小字体为12px 的解决办法
http://banri.me/web/webkit-text-size-adjust.html 对div进行缩放 12*0,75 = 9 px -webkit-transform: scale(0. ...
- CSS(3)实现水平垂直居中效果
CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...
- jquery判断按钮是否被选中了
<script type="text/javascript"> function genjin_view2(elm){ if($(elm).attr("che ...
- 每篇半小时1天入门MongoDB——4.MongoDB索引介绍及数据库命令操作
准备工作 继续连接到mongo C:\Users\zouqi>mongo MongoDB shell version: 3.0.7 connecting to: test 查看数据库和集合 &g ...
- 不借助第三方网站四步实现手机网站转安卓APP
今天本来是帮朋友查看是否在APP里可以点外链的一个测试,做着做来感觉了,就把这个测试优化了一下.好了我们来进入正题. 工具:Android Studio 第一步:新建项目 第二步:拖入控件(WebVi ...
- 定制Android开发者专属T恤
之前在T社上买了一件定制的T恤,感觉质量挺不错的,那是段子张发起的众筹.正面有hello google这几个字母. 我自己本身是一个Android粉,从nexus手机到pixel手机,坚持买原生的操作 ...
- MySQL(四)--练习题
 2.1 编写一条 SQL 语句,从 Product(商品)表中选取出“登记日期(regist_date)在 2009 年 4 月 28 日之后”的商品.查询结果要包含 product_name 和 ...
- java生成首字母拼音简码的总结
百度找到了某论坛高人写的java(具体论坛记不清了),直接用来调用,再次非常感谢,基本上实现了我的需求 package MD5;import java.util.Scanner;public clas ...
- Echarts展示百分比的问题
22.echarts 想要自定义tooltip 的百分比的时候,可以在formatter中console.log(params); 当鼠标移动到y轴的时候会触发输出;