Ajax的简单介绍

JavaScript Ajax

简介

Ajax，Asynchronous JavaScript + XML，核心是XMLHttpRequest对象。
IE7+，Chrome，Firefox，Safari原生支持XHR对象。

在JavaScript中一个客户端Http请求通常有四个部分组成。

1. Http请求方法或动作；
2. 正在请求的URL；
3. 一个可选的请求头集合，其中可能包括身份验证信息；
4. 一个可选的请求主体。

一个服务端返回的HTTP响应包含3个部分。

1. 一个数字和文字组成的状态码，用显示请求的成功和失败；
2. 一个响应头集合；
3. 一个响应主体。

XMLHttpRequest()使用

使用XHR建立http请求代码示例.

var xhr = new XMLHttpRequest();
//打开http请求,第一个参数 http请求的方法或动作,第二次参数http的请求URL,第三个参数ajax是否为异步执行。
xhr.open("get","example.php?value1=a&value2=b",false);  

// 设置可选的请求头集合，主要包括对请求主体、当前浏览器环节、cookie的信息。
//使用多个setRequestHeader()方法会对请求合集增加内容。
xhr.setRequsetHeader("Content-Type","text/plain");

//设置请求主体,对于get方法参数在url中填写,故使用null代替。
xhr.send(null);

使用XHR处理服务器返回响应

//本端代码插入上端第10行和第1行之间。
//对XHR对象中自带onreadyStatechange事件,添加事件函数。该事件监听readyState值的变化。
xhr.onreadyStatechange = function(){
  //xhr.readyState表示请求或响应过程中的活动阶段,0表示初始化；1表示启动;2表示发送;3表示接受;4表示完成。
  //处理服务器返回响应,在请求或响应过程完成阶段。
  if(xhr.readyState == 4){
    //xhr.status表示响应的HTTP状态码,200表示成功,304表示请求资源没有修改可以使用缓存中的版本,这两个状态码表示响应有效。
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
      //解析响应头集合,识别响应主体内容
      var type = xhr.getResponseHeader("Content-Type");
      if(type.match(/^text/)){
        //处理响应主体
        alert(xhr.responseText);
      }
    }
  }
}