AJAX

1、理解AJAX

AJAX:（Asynchronous JavaScript and XML）就是异步的JavaScript和XML。
Asynchronous 读做： eɪ'sɪŋkrənəs

2、网页刷新工作流程

传统网页刷新

1.png

ajax异步刷新

2.png

3、AJAX的运行流程

3.1 ajax的组成

给页面组件（按钮、输入框、选择框）绑定一个函数（事件），然后在html的head结点使用js定义函数用于处理事件。例如：

<html>
<head>
  <script type="text/javaScript">
    function loadXMLjavaScript(){
      ajax请求的五步骤
    }  
  </script>  
</head>
<body>
  <button type="button" onclick="loadXMLjavaScript">点我刷新</button>
  </body>
</html>

3.2 ajax请求的五步骤

1、创建xmlHttpRequest()异步对象

XMLHttpRequest xmlHttp = new XMLHttpRequest();

if(window.XMLHttpRequest)
    xmlHttp = new XMLHttpRequest();
   if(xmlHttp.overrideMimeType){
     xmlHttp.overrideMimeType("text/xml");
   }
}else if(window.ActiveXobject){
    var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    for(var i=0; i
       try{
           xmlHttp = new ActiveXobject(activeName[i]);
          break;
       }catch(e){
      }
    }    
}

if(!xmlHttp){
   alert("创建xmlhttprequest对象失败");
}else{   
}

2、设置回调函数

xmlHttp.onreadystatechange= callback;function callback(){}

3、使用open方法与服务器建立连接

xmlHttp.open("get","ajax?name="+ name,true)；
//如果http请求是post方式，需要设置请求头信息
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4、向服务器发送数据

xmlHttp.send(null);

5、接受返回的数据，在回调函数中，对不同的状态进行处理

if(xmlHttp.readyState == 4){ //判断交互成功

     if(xmlHttp.status == 200){
       //获取服务器返回的数据
       //获取纯文本数据
       var responseText =xmlHttp.responseText;】
      document.getElementById("info").innerHTML = responseText;

     }

 }

只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。

readyState属性：表示请求/响应过程的当前阶段
0：未初始化。尚未调用 open()方法。
1：启动。已经调用 open()方法，但尚未调用 send()方法。
2：发送。已经调用 send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

status属性：响应的 HTTP 状态码
200：响应成功
301：永久重定向/永久转移
302：临时重定向/临时转移
304：本次获取内容是读取缓存中的数据
400：请求参数错误
401：无权限访问
404：访问的资源不存在

Ajax