Ajax全接触

(1)XMLHttpRequest对象的创建(XHR)

1 var request;
2 if(window.XMLHttpRequest){
3     request= new XMLHttpRequest();//ie7+,ff,chrome,opera,safari.
4 }else{
5     request = new ActiveXObject("Microsoft.XMLHTTP");//ie5 6
6 }

(2)XHR发送请求

open（method，url，async）

method="get","post","Get","Post",一般大写

url=绝对地址,相对地址

async=true,异步

设置http请求头信息

发送表单信息
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

 1 <script>
 2 document.getElementById("search").onclick = function() { 
 3     var request = new XMLHttpRequest();
 4     request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
 5     request.send();
 6     request.onreadystatechange = function() {
 7         if (request.readyState===4) {
 8             if (request.status===200) { 
 9                 document.getElementById("searchResult").innerHTML = request.responseText;
10             } else {
11                 alert("发生错误：" + request.status);
12             }
13         } 
14     }
15 }
16 
17 document.getElementById("save").onclick = function() { 
18     var request = new XMLHttpRequest();
19     request.open("POST", "server.php");
20     var data = "name=" + document.getElementById("staffName").value 
21                       + "&number=" + document.getElementById("staffNumber").value 
22                       + "&sex=" + document.getElementById("staffSex").value 
23                       + "&job=" + document.getElementById("staffJob").value;
24     request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
25     request.send(data);
26     request.onreadystatechange = function() {
27         if (request.readyState===4) {
28             if (request.status===200) { 
29                 document.getElementById("createResult").innerHTML = request.responseText;
30             } else {
31                 alert("发生错误：" + request.status);
32             }
33         } 
34     }
35 }
36 </script>

View Code

(3)XHR 取得响应

通过onreadystatechange来监听

responseText,文本内容

responseXml,XML内容

status statusText:
getAllResponseHeader();
getResponseHeader("xx");

readystate
0 没有open
1 已建立连接
2 接受处理
3 处理
4 完成

(4)JSON基本概念

1.JavaScript对象表示法(JavaScript Object Notation)

2.解析json

eval('('+jsonString+')'),不校验代码json格式,可以执行JS方法

JSON.parse,校验json格式,不执行JS方法

(5)跨域

http:// www . abc.com : 80 / scripts/jquery.js

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

上面的协议,子域名,主域名,端口号,任意一个不相同,都算不同的域

1.代理

2.JSONP,解决Get请求的跨域

前端修改,jsonp:"callback"

 1 $.ajax({ 
 2     type: "GET",     
 3     url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),
 4     dataType: "jsonp",
 5     jsonp: "callback",
 6     success: function(data) {
 7         if (data.success) {
 8             $("#searchResult").html(data.msg);
 9         } else {
10             $("#searchResult").html("出现错误：" + data.msg);
11         }  
12     },
13     error: function(jqXHR){     
14        alert("发生错误：" + jqXHR.status);  
15     },     
16 });

后端修改

callback的值拼接在这里({"":""})

3.HTML5提供的XHR2(IE10以上支持)

只需要在服务端做如下修改

header("Access-Control-Allow-Origin:*")

*:所有域名

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

可以允许POST,GET