Ajax，全名为Ajax-Asynchronous JavaScript and Xml。是实现客户端与服务器端异步交互的主要手段，主要使用在B/S架构上。

一.在浏览器中一般分为同步交互和异步交互两种交互模式。

同步交互：

    客户端向服务器端发送请求，到服务器端进行响应，这个过程中，用户是不能做任何其他事情（只能等）。

异步交互：

    客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情（不用等）。

二.同步交互和异步交互的区别：

同步交互：

    1.执行速度相对异步交互慢。

    2.响应的是完整的HTML页面。

异步交互：

    1.执行速度相对同步交互要快。

    2.响应的是部分数据。

三.Ajax核心对象-----XMLHttpRequest对象，Ajax所有的属性和方法以及事件都需要在XMLHttpRequest对象中进行调用。

四.如何创建Ajax核心对象

固定套路，就是先定义一个一个创建XMLHttpRequest对象的函数，在用变量去调用该函数进行创建。

1. // 定义创建XMLHttpRequest对象的函数
   
2. function getXhr(){
   
3.         var xhr=null;
   
4.         if(window.XMLHttpRequest){
   
5.                 xhr=new XMLHttpRequest(); //除IE外其他浏览器
   
6.         }else{
   
7.                 xhr=new ActiveXObject('Microsoft.XMLHttp') //IE
   
8.         }
   
9.         return xhr;
   
10.         }
    
11. 
    
12. 
    
13. var xhr=getXhr();//创建XMLHttpRequest对象

五.Ajax常用的属性、方法及事件

属性：

    readyState - 服务器端的响应状态

    status - 服务器端状态码

    responseText - 服务器端返回的文本内容

    responseXML - 服务端返回的XML格式数据

方法：

    abort() - 请求

    getAllRequestHeaders() - 获取响应的所有http头

    getRequestHeader() - 获取指定响应的http头

    setRequestHeader() - 设置指定请求的http头

    open(method,url) - 创建链接

            method:get/post（常用）

    send() - 发送链接

            如果open的method为get,send里的参数为null

事件：

    onreadystatechange - 监听事件

            当服务器的状体改变是就会触发该数据（readyState）；

六.实现Ajax的异步交互步骤

创建XMLHttpRequest核心对象
        固定写法 - 独立编写
                与服务器端建立连接
        使用XMLHttpRequest对象的open(method,url)方法
                method - 设置当前请求的类型
                url - 设置当前请求的地址
        向服务器端发送请求
                使用XMLHttpRequest对象的send(请求参数)方法
                请求参数的格式 - key=value
        接收服务器端的响应数据
                使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
                使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
                使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
                使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

1. var xhr=getXhr(); //调用创建XMLHttpRequset对象函数
   
2. xhr.open('post','05.php');
   
3. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
   
4. xhr.send('state=2&provcince='+provinceEle.value);
   
5. xhr.onreadystatechange=function(){
   
6.         if(xhr.readyState==4&&xhr.status==200){
   
7.                 var data=xhr.responseText;
   
8.                 console.log(data);
   
9.         }
   
10. }