深入解析AJAX的原理

AJAX：Asynchronous JavaScript And Xml（异步的JS和XML）

同步：客户端发起请求》服务端的处理和响应》客户端重新载入页面（循环）

异步：客户端实时请求》服务端处理和响应》客户端获得响应后局部刷新页面

异步实现的关键是，XMLHttpRequest对象的出现

 

创建XHR对象

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

HTTP请求：无状态协议（不建立持久链接，服务器不保留记录是没有记忆），它的过程如下7步：

1、建立TCP连接

2、浏览器向服务器发送请求命令

3、浏览器发送请求头信息

4、服务器应答

5、服务器发送应答头信息

6、服务器想浏览器发送数据

7、服务器关闭TCP连接

 

HTTP请求的组成：请求的方法（get或post等）；请求的URL；请求头（环境信息，身份验证）；请求体。

HTTP响应的组成：状态码（200,304等）；响应头（服务器时间，其他信息）；响应体。

 

XHR对象的方法

open(method,url,async)//async同步还是异步，默认异步为true

send(string)

 

监听请求的响应是否成功

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4 && request.status===200){
        request.responseText//取得响应体内容
    }      
}

用post提交表单时，需要在open和send中间添加一个设置

request.setRequesrHeader("Content-Type","application/x-www-form-rulencoded");

 

json解析两种方法:

var jsonData='{"staff":[{"name":"洪七公","age":70},{"name":"郭靖","age":35}]}'
var jsonObj=eval('('+jsonData+')');//容易产生错误,不会校验json是否合法，会直接执行json中的js语句
var jsonObj=JSON.parse(jsonData);//推荐

 

Jquery中的$.ajax([settings])

type：类型，“POST”或“GET”，默认“GET”

url：发送请求的地址

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

dataType：预期服务器返回的数据类型，一般为json，若不指定jquery将根据http包mime信息智能判断

success：方法，请求成功的回调函数，传入返回的数据及包含成功代码的字符串

error：方法，请求失败的回调函数，传入XMLHttpRequest对象

$.ajax({
   type:"GET",
   url:"sever.php?number"+$("#keyword").val(),
   dataType:"json",
   success:function(data){
        if(data.success){alert(data.msg)}
    },
    error:function(err){
        alert("错误状态码："+err.status)
    }
})    

 

跨域

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

方法一：后端代理

方法二：JSONP(支持get，不支持post)

<!--在www.aaa.com页面中-->
<script>
function jsonp(json){
    alert(json["name"])
}
</script>
<script scr="http://www.bbb.com/jsonp.js"></script>
<!--在www.bbb.com页面中-->
jsonp({'name':"洪七公","age":70})

 方法三：HTML5提供的XHR2（ie10以下版本不支持）

服务端增加如下(PHP)

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