AJAX

全称：Asynchronous JavaScript and XML (异步的JavaScript和XML)

不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术，异步更新，局部更新；后台和服务器交换数据，通过XMLHttpRequest对象

流程：运用HTML和CSS实现页面，表达信息；运用XMLHttpRequest和web服务器进行数据的异步交换；运用JavaScript操作DOM，实现动态局部刷新

XMLHttpRequest对象：

var request;
if (window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
}else{
    request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
}

HTTP:

是计算机通过网络进行通信的规则，是一种无状态（不建立持久的连接，没有记忆）协议

一个完整的HTTP请求，7个步骤：1：建立TCP连接；2：Web浏览器向Web服务器发送请求命令；3.浏览器发送请求头信息；4.服务器应答；5.服务器发送应答头信息；6.服务器向浏览器发送数据；7.服务器关闭TCP连接

一个HTTP请求一般由四部分组成：1.请求的方法或动作（GET还是POST)；2.请求的URL（请求的地址）；3.请求头，包含一些客户端环境信息，身份证信息等

4.请求体（请求正文），可以包含客户提交的查询字符串信息，表单信息等

GET：一般用于信息获取，使用URL传递参数（发送的信息对任何人都可见，所有的变量名和值都显示在URL中），对所发送信息的数量也有限制，一般在2000字符；幂等（一个GET请求执行一次和一万次的效果是相同的）；

POST：一般用于修改服务器上的资源，对所发送信息的数量无限制，更安全

HTTP相应一般由三部分组成：1.一个数字和文字组成的状态码，用来显示请求是否成功；2.响应头，也和请求头一样包含许多有用的信息，例如服务器类型，日期和时间，内容类型和长度等；3.响应体，也就是响应正文

HTTP状态码（request.status）：由3位数字构成，其中首位数字定义了状态码的类型

1XX：信息类，表示收到web浏览器请求，正在进一步的处理中

2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK

3xx:重定向，表示请求没有成功，客户必须采取进一步的动作

4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在。

5xx：服务器错误，表示服务器不能完成请求的处理

XMLHttpRequest发送请求：

open(method,url,async)

send(string)

例子：

request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");

XMLHttpRequest取得响应：

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

status和statusText:以数字和文本形式返回HTTP状态码

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询响应中的某个字段的值

readyState属性：(通过request.onreadystatechange来监听)

0：请求未初始化，open还没有调用

1：服务器连接已经建立，open已经调用了

2：请求已经接收，也就是接收到头信息了

3：请求处理中，也就是接收到响应主体了

4：请求已完成，且响应已就绪，也就是响应完成了

var request;
if (window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
}else{
    request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
}
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if (request.readyState === 4 && request.status === 200){
        //做一些事情 request.responseText
    }
}

Demo:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Demo</title>
  6     <style>
  7         #box{
  8             line-height: 1.8;
  9             margin: 10px auto;
 10             width: 350px;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <div id="box">
 16     <h1>员工查询</h1>
 17     <label>请输入员工编号：</label>
 18     <input type="text" id="keyword"/>
 19     <button id="search">查询</button>
 20     <p id="searchResult"></p>
 21 
 22     <h1>员工查询</h1>
 23     <label>请输入员工姓名：</label>
 24     <input type="text" id="staffName"/><br>
 25     <label>请输入员工编号：</label>
 26     <input type="text" id="staffNumber"/><br>
 27     <label>请输入员工性别：</label>
 28     <select name="" id="staffSex">
 29         <option value="">男</option>
 30         <option value="">女</option>
 31 
 32     </select><br>
 33     <label>请输入员工职位：</label>
 34     <input type="text" id="staffJob"/><br>
 35     <button id="save">保存</button>
 36     <p id="createResult"></p>
 37 
 38 </div>
 39 
 40 <script type="text/javascript">
 41 document.getElementById("search").onclick = function(){
 42     //发送Ajax查询请求处理
 43     var request;
 44     if (window.XMLHttpRequest){
 45         request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
 46     }else{
 47         request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
 48     }
 49     request.open("GET","service.php?number="+document.getElementById("keyword").value);
 50     request.send();
 51     request.onreadystatechange = function(){
 52         if(request.readyState===4){
 53             if(request.status===200){
 54                 var data = JSON.parse(request.responseText);
 55                 if(data.success){
 56                     document.getElementById("searchResult").innerHTML=data.msg;
 57                 }else{
 58                     document.getElementById("searchResult").innerHTML="出现错误：" + data.msg;
 59                 }
 60             }else{
 61                 alert("发生错误："+request.status);
 62             }
 63         }
 64     }
 65 }
 66 
 67 document.getElementById("save").onclick = function(){
 68     //发送Ajax查询请求处理
 69     var request;
 70     if (window.XMLHttpRequest){
 71         request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
 72     }else{
 73         request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
 74     }
 75     request.open("POST","service.php");
 76     var data = "name=" +document.getElementById("staffName").value
 77                 +"&number=" +document.getElementById("staffNumber").value
 78                 +"&sex=" +document.getElementById("staffSex").value
 79                 +"&job=" +document.getElementById("staffJob").value;
 80     request.serRequestHeader("Content-Type","application/x-www-form-urlencoded");
 81     request.send(data);
 82     request.onreadystatechange = function(){
 83         if(request.readyState===4){
 84             if(request.status===200){
 85                 var data = JSON.parse(request.responseText);
 86                 if(data.success){
 87                     document.getElementById("creatResult").innerHTML=data.msg;
 88                 }else{
 89                     document.getElementById("creatResult").innerHTML="出现错误：" + data.msg;
 90                 }
 91             }else{
 92                 alert("发生错误："+request.status);
 93             }
 94         }
 95     }
 96 }
 97 
 98 
 99 /*var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
100 var jsonobj = eval('('+ jsondata + ')');
101 alert(jsonobj.staff[0].name);
102 
103 var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
104 var jsonobj = JSON.parse(jsondata);
105 alert(jsonobj.staff[0].name);*/
106 
107 </script>
108 
109 </body>
110 </html>

View Code

JSON:JavaScript对象表示法（JavaScript Object Notation);JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成；JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只要按照JSON的规则来就行。

相比XML的有点：JSON的长度更短小，读写速度更快，可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便

JSON数据的书写格式：名称/值对；名称写在前面（在双引号中），值对写在后面（同样的双引号中），中间用冒号隔开例如："name":"郭靖"

JSON的值可以是下面这些类型：数字（整数或浮点数）；字符串（在双引号中）；逻辑值（true或false);数组（在方括号中）；对象（在花括号中）；null;

JSON例子：

{
    "staff":[
        {"name":"洪七","age":70},
        {"name":"郭靖","age":35},
        {"name":"黄蓉","age":30}
    ]
}

JSON解析：eval和JSON.parse

在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
var jsonobj = eval('('+ jsondata + ')');
alert(jsonobj.staff[0].name);

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

在线的JSON字符串校验：JSONLint.com

使用JSON的Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        #box{
            line-height: 1.8;
            margin: 10px auto;
            width: 350px;
        }
    </style>
</head>
<body>
<div id="box">
    <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 name="" id="staffSex">
        <option value="">男</option>
        <option value="">女</option>

    </select><br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffJob"/><br>
    <button id="save">保存</button>
    <p id="createResult"></p>

</div>

<script type="text/javascript">
document.getElementById("search").onclick = function(){
    //发送Ajax查询请求处理
    var request;
    if (window.XMLHttpRequest){
        request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
    }
    request.open("GET","service.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(){
    //发送Ajax查询请求处理
    var request;
    if (window.XMLHttpRequest){
        request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
    }
    request.open("POST","service.php");
    var data = "name=" +document.getElementById("staffName").value
                +"&number=" +document.getElementById("staffNumber").value
                +"&sex=" +document.getElementById("staffSex").value
                +"&job=" +document.getElementById("staffJob").value;
    request.serRequestHeader("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("creatResult").innerHTML=data.msg;
                }else{
                    document.getElementById("creatResult").innerHTML="出现错误：" + data.msg;
                }
            }else{
                alert("发生错误："+request.status);
            }
        }
    }
}


/*var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
var jsonobj = eval('('+ jsondata + ')');
alert(jsonobj.staff[0].name);

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}'
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);*/

</script>

</body>
</html>

View Code

用jQuery实现Ajax:

jQuery.ajax([settings])

type:类型，”POST"或“GET”，默认为“GET”

url:发送请求的地址

data:是一个对象，连同请求发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json"

success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Demo</title>
 6     <style>
 7         #box{
 8             line-height: 1.8;
 9             margin: 10px auto;
10             width: 350px;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="box">
16     <h1>员工查询</h1>
17     <label>请输入员工编号：</label>
18     <input type="text" id="keyword"/>
19     <button id="search">查询</button>
20     <p id="searchResult"></p>
21 
22     <h1>员工查询</h1>
23     <label>请输入员工姓名：</label>
24     <input type="text" id="staffName"/><br>
25     <label>请输入员工编号：</label>
26     <input type="text" id="staffNumber"/><br>
27     <label>请输入员工性别：</label>
28     <select name="" id="staffSex">
29         <option value="">男</option>
30         <option value="">女</option>
31 
32     </select><br>
33     <label>请输入员工职位：</label>
34     <input type="text" id="staffJob"/><br>
35     <button id="save">保存</button>
36     <p id="createResult"></p>
37 
38 </div>
39 <!-- 引入jquery -->
40 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
41 <script type="text/javascript">
42 $(document).ready(function(){
43     $("#search").click(function(){
44         $.ajax({
45             type:"GET",
46             url:"service.php?number="+ $("#keyword").val(),
47             dataType:"json",
48             success:function(data){
49                 if(data.success){
50                     $("#searchResult").html(data.msg);
51                 }else{
52                     $("#searchResult").html("出现错误：" + data.msg);
53                 }
54             },
55             error:function(jqXHR){
56                 alert("发生错误："+jqXHR.status);
57             }
58         });
59     });
60 
61     $("#save").click(function(){
62         $.ajax({
63             type:"POST",
64             url:"service.php",
65             dataType:"json",
66             data:{
67                 name:$("#staffName").val(),
68                 number:$("#staffNumber").val(),
69                 sex:$("#staffSex").val(),
70                 job:$("#staffJob").val(),
71             },
72             success:function(data){
73                 if(data.success){
74                     $("#createResult").html(data.msg);
75                 }else{
76                     $("#createResult").html("出现错误：" + data.msg);
77                 }
78             },
79             error:function(jqXHR){
80                 alert("发生错误："+jqXHR.status);
81             }
82         });
83     });
84 });
85 
86 </script>
87 
88 </body>
89 </html>

View Code

跨域：

一个域名地址的组成：

http:// www . abc.com : 8080 / script/jquery.js

协议子域名主域名端口号请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域;不同域之间相互请求资源，就算做”跨域“;比如：http://www.abc.com/index.html请求http://www.efg.com/service.php

JS处于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单地说就是因为JS同源策略的限制，a.com域名下的 js无法操作b.com或是c.a.com域名下的对象。

跨域方法一：代理

通过在同域名的web服务器端创建一个代理：

北京服务器（域名：www.beijing.com),上海服务器（域名：www.shanghai.com);

比如在北京的web服务器的后台（www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器（www.shanghai.com/service.php)的服务，然后再把相应结果返回给前端，这样前端调用北京同域名的服务器就和调用上海的服务效果相同了。

跨域处理方法二：JSONP

JSONP可用于解决主流浏览器中跨域数据访问的问题。

在www.aaa.com页面中：

<script>
    function jsonp(json){
        alert(json["name"]);
    }

</script>
<script src="http://www.bbb.com/jsonp.js"></script>

在www.bbb.com页面中：

jsonp({'name':'洪七','age':24});

需要将原有代码dataType的值从json改为jsonp,再增加一行：

jsonp:"callback"'//任意值

后端要增加

$jsonp = $_GET["callback"];

并且返回值需要用'（）'括起来，前面加上$jsonp的值，用逗号连接，例如：

$result=$jsonp.'({"success":false,"msg":"没有找到员工”})';

jsonp只能支持“GET”请求，不支持“POST”请求

跨域处理方法三：XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

IE10以下的版本都不支持

在服务器端做一些小小的改动即可：增加下面两行代码

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");