对于ajax流程分解：

#Ajax

Ajax是用来发送异步请求的技术，所以将我们最熟悉的请求方式做出总结。

传统的请求方式：表单，超链接，地址栏(location.href=“url”)
特点：请求的响应会刷新当前整张页面。
原因：浏览器处理行为导致；会用一张新页面承载响应内容，刷新掉当前页面

新情景

在现在的web开发过程中，很多时候请求发送后不需要刷新整张页面，而是页面不动，使得用户可以连贯后续操作， 请求的响应只是刷新页面的某个局部。

示例：注册时的用户名重复校验，弹幕，suggest

如果用传统的请求方式（form,a,location）去解决此种需求：

打断用户操作，极差的用户体验

示例：用location.href完成用户名重复校验

##Ajax

Asynchronous Javascript And XML

异步JavaScript和XML

Ajax是客户端技术，运行在浏览器中，发送异步请求
异步：多个事件在不同的执行线上，并行发生。
同步：多个事件在相同的执行线上，串行发生。
异步请求：相对于浏览器对当前页面的展示，异步的发送请求

**Ajax技术组成：**JavaScript 语言环境
css/dom 刷新页面
xhr 核心对象，发送异步请求

Ajax编码流程1

创建XHR = 核心对象，用于发送异步请求

//浏览器差异：IE=ActiveXObject    
//                   webkit=XMLHttpRequest（Chrom，FF，Safiri，Opera）
//                   IE7+=XMLHttpRequest
var xhr;
if(window.ActiveXObject){//IE内核
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//Web内核  或  IE7+
    xhr=new XMLHttpRequest();
}	           

##Ajax编码流程2

初始化XHR

//请求方式，请求地址，参数
xhr.open("get", "url?name=zhj&pwd=123");

##Ajax编码流程3

发送请求

xhr.send();

Ajax编码流程4

服务器给出响应

return HttpResponse("hello")

异步请求最终只是需要刷新页面的局部，

所以响应只是页面的局部信息 == 字符串,

所以需要如上的响应方式.

##Ajax编码流程5

接收服务器响应

接收响应的条件：请求响应完毕 + 请求成功

//readyState有5种可能值0 1 2 3 4,代表xhr的不同状态
//未初始化=0 已初始化=1 请求发送=2  开始接收响应=3  响应完毕=4
xhr.readyState

//status 保存请求的状态码
//可能值有 404 500 200 等
//404 访问资源未找到
//403 权限
//400 bad-request
//500 服务器错误
//200 请求成功
xhr.status

//监听readyState值的改变，每次改变都会触发,执行function
xhr.onreadystatechange=function(){...}

利用以上三个属性，即可在合适的时刻接收请求的响应

xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){//请求成功，响应完整
        //响应接收,xhr会将响应存储在属性responseText中
        var ret=xhr.responseText;
        //利用dom+css将响应值刷新到页面中
        $("#tip").text(ret);
    }
}

##Ajax-Post请求

编码过程基本和get一致，只需要有一些修改

修改点1 : 初始化

xhr.open("post","url");

修改点2

防止csrf漏洞

var csrftoken = "{{csrf_token}}"； //获取csrf的校验令牌
xhr.setRequestHeader("X-CSRFToken", csrftoken); //将令牌放在请求头中

修改点3 : 设置请求头，并在send中传递请求参数

content-type = application/x-www-form-urlencoded 是在告知服务器，请求中携带的参数的编码类型为：

[key=value&key=value]

只有如此，服务器中 request.POST.get("id");才能获取到参数值

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("id=1&name=zhj")；
xhr.send('id='+id)

##请求对比

• form，，location
• Ajax异步请求
• 同步请求

• 前两个区别在于浏览器对响应处理方式不同。
• 后两个区别在于请求的机制不一样，异步请求不会阻塞当前页面，而同步请求将阻塞当前页面。