DOM--6 向应用程序中加入ajax

组合技术

适当的ajax时对已有技术和下列思想的组合

• 语义化(X)HTML标记
• 文档对象模型(DOM)
• JavaScript
• XML

不同浏览器中，公共XMLHttpRequest方法

• open(method, url[, asynchronous [, userName[, password ]]]); 用于指定请求url,方法以及与请求相关的其他可选属性;
• setRequestHeader(label, value); 用于给丁的label和value为请求应用的一个头部信息。该方法必须在请求的open()方法之后，且在send()方法之前调用;
• send(content); 用于发送请求；
• abort(); 用于停止当前的请求;
• getAllResponseHeaders(); 返回字符串形式的完整头部信息集合;
• getResponseHeader(label); 返回指定头部的一个单独的字符串值；

步骤

生成一次新的请求

function stateChangeListener() {

}
var request = false;
if(window.XMLHttpRequest) {
  var request = new window.XMLHttpRequest();
} else if(window.ActiveXObject){
  var request = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(request) {
  request.onreadystatechange = stateChangeListener;
  //get
  request.open('GET', '/your/scritp/?var=value&var2=value', true);
  request.send(null);
  //post
  request.open('POST', '/your/scritp/', true);
  request.send('var=value&val2=value');
}

处理响应

在‘request.onreadystatechange’方法中，对'request'属性的处理

• readyState
  • 0: 尚未初始化
  • 1: 载入中
  • 2: 载入完成
  • 3: 交互
  • 4: 完成
• responseText: 一个在响应中返回的数据的字符串表示;
• responseXML: 一个兼容DOM核心的文档对象(在响应是一个有效的XML文档并且设置了适当的头部信息的情况下)；
• response: 返回的结果；
• status: 一个表示请求状态的数字代码，这些数字代码是由服务器生成的HTTP协议状态代码;
• statusText: 与状态代码相关的一条信息;

function stateChangeListener() {
  switch(request.readyState) {
    case 1:
    //载入中
      break;
    case 2:
    //载入完成
      break;
    case 3:
    //交互
      break;
    case 4:
    //完成
      if(request.status == 200) {
        //对request.responseText/responseXMl处理
      } else {
        //request.status/statusText,错误状态码和信息
      }
    break;
  }
}

在服务器上识别Ajax请求

在服务器看来Ajax请求和其他请求都是一样的；为了表示来自XMLHttpRequest对象的请求，可以使用请求对象的setRequestHeader()方法来发送自定义头部信息,注意设置位置

request.open('GET', '/your/scritp/?var=value&var2=value', true);
request.setRequestHeader('Sent-By','Jinks');
request.send(null);

** 请求的侦听器还可以进一步处理检查响应中是否爆好有效的头部信息,(一般是请求设置特定的头部信息后，后台返回信息的时候再设置相同的头部信息返回)**

function processSpecialRequest(request) {
  if(this.readyState == 4) {
    var header = request.getResponseHeader('My-Ajax-Response');
    if(header == 'SpecialValue') {
      //服务器响应中包含了你发送的预期值
    } else {
      //服务器响应了其他的值
    }
  }
}

返回信息的数据类型