正文
Ajax - 手册
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、Ajax概述：
1、Ajax（Asynchronous JavaScript and XML）：异步的JavaScript和XML
2、Ajax不是某种语言，而是在现实网页的时候一种局部刷新的整合技术。
3、Ajax可以在后台进行局部数据的交换，进行局部的数据更新。
4、关键：XMLHttpReuqest 对象的使用。
二、使用Ajax技术的总体步骤：
1、运用HTML和CSS来实现页面，表达信息。
2、使用XMLHttpRequest和Web服务器进行数据的一步交换。
3、运用JavaScript操作DOM，实现局部的刷新。
三、XMLHttpRequest对象(XHR)：
1、实例化一个XHR对象：
· 一般写法
var = request = new XMLHttpRequest();
· 兼容性的写法（兼容 IE6和更早的版本）
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//IE7+,FireFox,Chrome,Opera,Safari.....
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
四、HTTP请求：
1、http是计算机通过网络进行通讯的规则。
2、http是一种无状态的协议。（不建立持久的连接，服务端不保留连接的信息。）
3、完整的HTTP请求过程，通常有一下7个步骤：
a、建立TCP连接。
b、Web浏览器向Web服务器发送请求命令。
c、Web浏览器发送请求头信息。
d、Web服务器做出应答。
e、Web服务器返回应答头信息。
f、Web服务器向请求的浏览器发送数据。
g、Web服务器关闭TCP连接。
4、一个http请求一般是由四个部分组成
a、HTTP请求的方法和动作，比如是GET还是POST请求。
b、正在请求的URL，总得知道请求的地址是什么吧？
c、请求头，包含一些客户端的环境信息，身份验证信息等。
d、请求体，也就是请求的正文，请求正文中更可以包含客户提交的查询字符串信息，表单信息等等。
例如:
<--GET：方法和动作。login.php：请求的URL地址-->
GET/login.php/1.1
<!--请求头-->
Host:localhost
Connection:keep-alive
...........
...........
...........
...........
<!--请求体-->
username=admin&password=123456
5、GET请求和POST请求
GET请求：
1、使用URL传递参数。
2、一般是用来查询，并不去用GET进行修改。
3、对发送的信息的数量也有限制，一般在2000个字符。
POST请求：
1、一般用于修改服务器上的资源。
3、对发送信息的数量无限制。
6、一个HTTP响应一般是由三部分组成：
1、一个数字和文字组成的状态码，用来显示请求是成功还是失败。
2、响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等。
3、响应体，也就是响应正文。
例如：
HTTP/1.1 200 OK (200是状态码，表示成功)
Date:sun,23 Nov......
Server:Apache
Content_Encoding:gzip
..........
..........
..........
7、状态码：一般状态码是有3位数字构成，其中首位数字定义了状态码的类型。
1、1XX：信息类，表示收到Web浏览器的请求，正在进行进一步的处理。
2、2XX：成功，表示用户请求被正确接收，理解和处理如：200 OK
3、3XX：重定向，表示请求没有成功，客户必须采取进一步动作。
4、4XX：客户端错误，表示客户端的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在。
5、5XX，服务器错误，表示服务器不能完成请求处理：如 500
五、XMLHttpRequest发送请求：
1、XHR对象的方法：
a、open(method,url,async)
· method：请求的方式
· url：请求的url。
· async：是同步的还是异步的请求。
b、send(string)
·使用get可以填写NULL。
· 使用post要填写（填写的是要传递的数据）。
：比如：
1、send("name=jack&sex=manle");
2、data = "name=jack&sex=manle";
send(data);
c、例如：
request.open("GET", "get.php", true);
request.send();
request.open("POST", "post.php", true);
request.send();
request.open("POST", "creat.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=张三&sex=男");
六、XMLHttpRequest取回请求：
1、
a、responseText：获取字符串形式的响应数据。
b、responseXML:获取XML形式的响应数据。
c、status和statusText：以数字和文本的形式返回HTTP状态码。
d、getAllResponseHeader():获取所有的响应报头。
e、getResponseHeader()：查询响应中的某个字段的值。
f、readyState属性（代表服务器响应变化）：
· 0：请求未初始化，open还没有调用。
· 1：服务器已经建立，open已经调用。
· 2：请求处理中，也就是接收到响应主题了。
· 3：请求处理中，也就是接收到响应追主体了。
· 4：请求已完成，且响应已经就绪，也就是响应完成了。
· 怎么使用：
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadychange = function(){
if(request.readyState === 4 && request.status === 200){
//做一些事情 requeast.responseText
//..........
//..........
//..........
}
}
七、例子使用：
1、
a、查询员工信息，可以输入员工编号来查询基本信息。
b、新建员工信息，包含员工姓名，编号，性别，职位。（服务器端）
2、
a、使用纯html页面，用来实现员工查询和新建页面。
b、PHP页面，用来实现查询员工和新建员工的后台接口。
3、PHP
a、php是一种创建动态交互性站点的服务器端脚本语言。
b、php能生成动态内容。
c、php能够创建，打开，读取，写入，删除，以及关闭服务器上的文件。
d、php能够接受表单数据
e、php能够发送并取回cookies。
f、php能够添加，删除，修改数据库中的数据。
g、php能够限制用户访问网站中的某些页面。
h、...............
4、php端代码：
<?php
//设置页面内容是html编码格式是utf-8 header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
(
array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
); //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
} //通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo "参数错误";
return;
}
//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"];
$result = "没有找到员工。"; //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
break;
}
}
echo $result;
} //创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo "参数错误，员工信息填写不全";
return;
}
//TODO: 获取POST表单数据并保存到数据库 //提示保存成功
echo "员工：" . $_POST["name"] . " 信息保存成功！";
}
?>
5、html端代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p> <h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p> <script>
document.getElementById("search").onclick = function() {
var request;
if(window.XMLHttpRequwst){
request = new XMLHttpRequest();
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
} document.getElementById("save").onclick = function() {
var request;
if(window.XMLHttpRequwst){
request = new XMLHttpRequest();
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", "server.php");
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("createResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script>
</body>
</html>
八、JOSN
1、JOSN概念：
a、JOSN：JavaScript对象表示法（JavaScript Object Notation）。
b、JSON是组织存储和交换文本信息的语法，类似于XM。采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
c、JSON是独立于语言的，也就是说不管什么语言，都可以解析JOSN，只需要按照JSON的规则来就行。
2、JSON与XML比较：
a、JSON的长度和XML比较起来很短小
b、Json读写的速度更快
c、json可以使用JavaScript内建的方法进行解析，转换成JavaScript对象，非常方便。
3、JSON语法规则：
a、json数据的书写个是：名称/值对
b、名称/值对组合中的名称卸载前面（在引号中），值对写在后面（同样是在双引号中），中间用冒号隔开：比如：【 "name":"张三" 】
c、Josn值可以是下面类型：
· 数字
· 字符串
· 逻辑值
· 数组
· 对象
· null
d、例子：
{
"staff":[
{"name":"张三","sex":"男"},
{"sex":"男"},
{"number":123456},
]
}
4、JSON解析：
1、eval和Json.parse.
2、在代码中使用Eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能的使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
5、例子（修改原有例子）：
a、首先是php服务器端代码（只列举出部分修改过的代码）
<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); //=====================================
header("Content-Type: application/json;charset=utf-8");
//===================================== //header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
(
array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
); //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
} //通过员工编号搜索员工
function search(){
$jsonp = $_GET["callback"];
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) { //=====================================
echo $jsonp . '({"success":false,"msg":"参数错误"})';
//===================================== return;
}
//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
//global 关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number = $_GET["number"]; //=====================================
$result = $jsonp . '({"success":false,"msg":"没有找到员工。"})';
//===================================== //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach ($staff as $value) {
if ($value["number"] == $number) { //=====================================
$result = $jsonp . '({"success":true,"msg":"找到员工：员工编号：' . $value["number"] .
'，员工姓名：' . $value["name"] .
'，员工性别：' . $value["sex"] .
'，员工职位：' . $value["job"] . '"})';
//===================================== break;
}
}
echo $result;
} //创建员工
function create(){
//判断信息是否填写完全
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) { //=====================================
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
//===================================== return;
}
//TODO: 获取POST表单数据并保存到数据库 //提示保存成功 //=====================================
echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
//===================================== } ?>
b、html代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p> <h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p> <script>
document.getElementById("search").onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) { //=====================================
var data = JSON.parse(request.responseText);
if (data.success) {
document.getElementById("searchResult").innerHTML = data.msg;
} else {
document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
//===================================== }
}
} document.getElementById("save").onclick = function() {
var request = new XMLHttpRequest();
request.open("POST", "serverjson.php");
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) { //=====================================
var data = JSON.parse(request.responseText);
if (data.success) {
document.getElementById("createResult").innerHTML = data.msg;
} else {
document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
//===================================== }
}
}
</script>
</body>
</html>
九、JQuery中的Ajax：
1、参数：
a、格式：JQuery.ajax([settings]);
b、type：类型，使用POST或是使用GET
c、url：发送请求的地址。
d、data：是一个对象，连同请求发送到服务器的数据。
e、datatype：与其服务器返回的数据类型。如果不指定，如果不制定，JQuery会自动根据HTTP包MIME信息来只能判断，一般我们采用josn个是，可以设置为json
f、success：一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
g、error：是一个方法，请求成功后的回调函数。传入XMLHttpRequest对象。
2、改写例子，使用JQuery.ajax执行（只修改了Html端的代码）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p> <h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<!--使用了联机静态库-->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "serverjson.php?number=" + $("#keyword").val(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
}); $("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
data: {
name: $("#staffName").val(),
number: $("#staffNumber").val(),
sex: $("#staffSex").val(),
job: $("#staffJob").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误：" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
});
</script>
</body>
</html>
十、跨域：
1、一个域名的组成
a、http:// www . abc.com :8080 / script/Jquery.min.js
协议 子域名 主域名 端口 请求资源
b、当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。
c、不同域之间相互请求资源，就算做跨域。
比如：http://www.abc.com/index.html 请求 http://www.efg.com/services.php
2、跨域
a、Javascript处于安全方面的考虑，不允许跨域调用其他页面的对象。
b、什么是跨域呢？简单的理解就是因为Javascript同源策略的限制，a.com域名下的js无法操作b.com或者是c.a.com域名下的对象。
3、处理跨域方法之一 代理
a、通过在同域名的Web服务器端创建一个代理。
b、北京服务器（域名：www.beijing.com）
c、上海服务器（域名：www.shanghai.com）
d、比如在北京的web服务器的后台（www.beijing.com/proxy-shanghaiservices.php）来调用上海服务器（www.shanghai.com/services.php）的服务，然后再把响应结果返回给前端，这样 前端调用北京同域名的服务就和调用上海同域名的服务效果相同了。
4、处理跨域方法之二 JSONP
a、
5、处理跨域方法之三 XHR2
a、HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能。
b、IE10以下的版本都不支持。
c、在服务器端做一些小小的该做即可。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
