9-1. 浏览器原生Ajax接口（XHR对象）

通过Ajax技术，不需要更新整个页面，只需要向服务器获取指定的这块信息

 

What is Ajax Technology?

It is 异步的JavaScript与XML技术

Function: Ajax是一种无需刷新页面即可实现客户端与服务器端数据交互的技术！

Ajax is not a language, it is only just a technology method. 

In fact, there existed original Ajax technology's API(functions and methods), but it is not convenient and also have 

problems with 浏览器兼容问题(Browser compatibility issue)

 

jQuery only just improve the original Ajax technology.

So we need to learn the original Ajax API which is bulit-in(noun.) 内置 in Brower and then learn 通过jQuery封装的各种方法，方便的使用Ajax这项技术。

 

1）Create XHR object

整个Ajax技术的接口，核心是通过XMLHttpRequest这个对象（简称 XHR）来完成！

How to get XHR object?

IE，google, firefox Browers 是通过XMLHttpRequest这个引用类型来创建出XHR对象。

var xhr=new XMLHttpRequest( );   //得到XHR对象

 

2）启用一个请求等待发送

XHR对象.open('HTTP方法','请求的地址',是否异步发送请求的布尔值,用户名,密码);

调用open( )方法并不会真正发送请求，而只是启动一个请求以备发送

 

-'HTTP方法'

比如get或post，大小写无所谓

GET请求用于从服务器端获取数据为目的

POST方式用于将数据提交给服务器端并且存储

 

-请求的url地址

如果该地址指向的事静态内容（比如HTML等）会直接将这些内容返回给客户端！

如果是动态脚本（如PHP）那么会在服务器端执行这个PHP文件，并且将其输出的内容返回给客户端

 

-是否异步发送请求的布尔值

默认是true表示异步请求，false表示同步请求

同步请求的特点：

客户端提交请求->等待服务器处理（等待服务器端回应之前客户端不能做其他事情）->服务器端处理完毕返回给浏览器

即：浏览器在得到服务器端数据回应之前不能和用户有任何交互，后面的JS代码会等到服务器响应之后继续执行

 

异步请求的特点：

客户端提交请求（请求之后可以继续做其他事情）

->服务器进行处理（处理过程就像在后台完成一样，用户可能都感觉不到，还可以继续浏览网页中的内容并且进行交互，后面的JS代码也会继续执行而不会等待异步请求的响应）

->处理完毕（处理完毕后浏览器会得到这个通知，然后可以执行对应的一些准备好的操作）

优点：在异步请求的过程中用户依然可以操作我们的页面内容，后面的js代码也会继续执行，而无需等待发起的请求的响应！

 

-最后两个参数是 服务器如果设置了需要认证请求，写上您在服务器端设置的用户名和密码（一般很少使用）

 

3）发送请求

XHR对象.send(要发送的数据);

传入的参数作为主体内容发送给服务器！

如果不需要传主体数据，必须传入null，否则有些浏览器无法兼容！
       
       

4）如何获取服务器响应的数据
       
在收到服务器端响应后，响应的数据会自动填充XHR对象的属性，部分属性和方法简介如下

1. responseText：作为响应主体被返回的文本

2. responseXML：如果响应的内容是XML格式的，就根据内容创建XML DOM对象以便操作（XML格式已经很少使用，所以这个属
                              性现在也很少使用了）
3. status：响应的HTTP状态（200表示成功，404表示未找到）  

4. statusText：HTTP状态的说明

5. readyState：请求/响应过程的当前活动阶段，可能的值

     0：未初始化。尚未调用open()方法

     1：启动。已经调用open()方法，但尚未调用send()方法

     2：发送。已经调用send()方法，但尚未接收到响应

     3：接收。已经接收到部分响应数据

     4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
                  
6. readystatechange事件:

          只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件

          注：必须在调用open()之前指定readystatechange事件处理程序才能确保跨浏览器兼容性。

                对于readystatechange事件处理程序内部最好不要使用this来代表当前的xhr对象，

                因为有的浏览器会出现不可预知的问题，所以我们在处理程序内部就用XHR对象的变量名就好了。

7. abort()

           取消当前正在执行的请求