深刻了解ajax

AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。
它有机地包含了如下几种技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操做； 使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将全部的东西绑定在一块儿。

Ajax的实现流程是怎样的？

(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.
(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

基本步骤：

var xhr =null;//建立对象         
    if(window.XMLHttpRequest){    
        xhr = new XMLHttpRequest();    
        }else{    
            xhr = new ActiveXObject("Microsoft.XMLHTTP");    
        }    
         xhr.open(“方式”,”地址”,”标志位”);//初始化请求     `请输入代码`
         xhr.setRequestHeader(“”,””);//设置http头信息     
         xhr.onreadystatechange =function(){}//指定回调函数     
         xhr.send();//发送请求

默认状况下，在发送XHR请求的同时，还会发送下列头部信息
Accept: 浏览器可以处理的内容类型
Accept-Charset: 浏览器可以显示的字符集
Accept-Encoding: 浏览器可以处理的压缩编码
Accept-Language: 浏览器当前设置的语言
Connection: 浏览器与服务器之间链接的类型
Cookie: 当前页面设置的任何Cookie
Host: 发出请求的页面所在的域
User-Agent: 浏览器的用户代理字符串
Referer: 发出请求的页面的URI

一、open()方法的第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但一般使用大写字母。
"GET"和"POST"是获得普遍支持的"GET"用于常规请求，它适用于当URL彻底指定请求资源，当请求对服务器没有任何反作用以及当服务器的响应是可缓存的状况下."POST"方法经常使用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器获得的响应可能不一样，同时不该该缓存使用这个方法的请求.除了"GET"和"POST"以外，参数还能够是"HEAD"、"OPTIONS"、"PUT"。而因为安全风险的缘由，"CONNECT"、"TRACE"、"TRACK"被禁止使用。

二、open()方法的第二个参数是URL，该URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。若是URL与启动请求的页面有任何差异，都会引起安全错误。
三、open()方法的第三个参数是表示是否异步发送请求的布尔值，若是不填写，默认为true，表示异步发送。
四、若是请求一个受密码保护的URL，把用于认证的用户名和密码做为第4和第5个参数传递给open()方法。
send()
　　send()方法接收一个参数，即要做为请求主体发送的数据。调用send()方法后，请求被分派到服务器。
　　若是是GET方法，send()方法无参数，或参数为null；若是是POST方法，send()方法的参数为要发送的数据。

一.什么是同步请求：(false)

同步请求便是当前发出请求后，浏览器什么都不能作，必须得等到请求完成返回数据以后，才会执行后续的代码，至关因而排队，前一我的办理完本身的事务，下一我的才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里全部的代码中止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其余代码页面解除假死状态(即当ajax返回数据后，才执行后面的function)。

二.什么是异步请求：(true)

异步请求就当发出请求的同时，浏览器能够继续作任何事，Ajax发送请求并不会影响页面的加载与用户的操做，至关因而在两条线上，各走各的，互不影响。

通常默认值为true，异步。异步请求能够彻底不影响用户的体验效果，不管请求的时间长或者短，用户都在专心的操做页面的其余内容，并不会有等待的感受。

下面来区别一下同步和异步有什么不一样：

异步：在异步模式下，当咱们使用AJAX发送完请求后，可能还有代码须要执行。这个时候可能因为种种缘由致使服务器尚未响应咱们的请求，可是由于咱们采用了异步执行方式，全部包含AJAX请求代码的函数中的剩余代码将继续执行。若是咱们是将请求结果交由另一个JS函数去处理的，那么，这个时候就比如两条线程同时执行同样。

同步：在同步模式下，当咱们使用AJAX发送完请求后，后续还有代码须要执行，咱们一样将服务器响应交由另外一个JS函数去处理，可是这时的代码执行状况是：在服务器没有响应或者处理响应结果的JS函数尚未处理完成return时，包含请求代码的函数的剩余代码是不可以执行的。就比如单线程同样，请求发出后就进入阻塞状态，直到解除阻塞，余下的代码才会继续执行。

ajax的优势：

一、最大的一点是页面无刷新，用户的体验很是好。
二、使用异步方式与服务器通讯，具备更加迅速的响应能力。
三、能够把之前一些服务器负担的工做转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。而且减轻服务器的负担，ajax的原则是“按需取数据”，能够最大程度的减小冗余请求，和响应对服务器形成的负担。
四、基于标准化的并被普遍支持的技术，不须要下载插件或者小程序。
五、ajax可以使因特网应用程序更小、更快，更友好。

ajax的缺点：

一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。

Ajax应用场景：

场景1 数据校验
场景2 按照需求获取数据
场景3 自动更新页面内容

常见的状态码：

1XX：信息状态码
100 Continue 继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息
2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功而且服务器建立了新的资源
202 Accepted 服务器已接受请求，但还没有处理
3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未受权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最多见的服务器端错误。
503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

响应头:

Date：响应时间
Server：服务器信息
Last-Modified：资源最后修改时间 由服务器自动生成
ETag：资源修改后生成的惟一标识，由服务器自动生成
Content-Length：响应主体长度
Content-Type：响应资源的类型

jQuery中的Ajax操做

$.ajax({
    // 请求的地址
    url: "04-data.php",
    // 请求的方式
    type: "get",
    // 告诉jQuery，须要按照什么格式对服务器返回的数据进行解析，默认json
    dataType: "json",
    // 数据
    data: {
        msg: "我是来请求数据的"
    },
    // 请求成功的回调函数
    success: function(data) {
        console.log(data);
    },
    // 请求失败的回调函数
    error: function() {
        console.log("失败了");
    },
    // 请求发送以前调用的函数
    beforeSend: function() {
        console.log("请求发送以前调用的函数");
        // 若是返回一个false，那么就会阻止整个请求的发送
        // return false;
        // 用法：能够用做表单验证，当表单内容符合规范的时候发送ajax请求，当不符合的时候就不发送ajax请求
    },
    // 不论请求是成功仍是失败的，只要请求完成就会调用
    complete: function() {
        console.log("请求完成了");
    },
    // 设置请求超时时间(单位:ms)，超过这个时间后，就不会请求了
    timeout:2000
});