ajax 学习小结

 

什么是XMLHttpRequest对象

一个页面可以通过一个HttpRequest发送一个请求来获取服务器响应，而当前页面不做刷新。

通过使用XMLHttpRequest对象，开发者可以在不刷新当前页面的情况下更新当前页面的数据。

注：XMLHttpRequest对象不是W3C标准，不过目前已有以下浏览器支持此对象操作：IE5.0+,Safari1.2,Mozilla1.0,Firefox,Netscape7。

创建一个XMLHttpRequest对象

要创建XMLHttpRequest对象，可以采用以下方法：

对于IE：

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

对于For Mozilla, Firefox, Safari, and Netscape：

var xmlhttp=new XMLHttpRequest()

XMLHttpRequest对象引用

方法：

方法	描述
abort	取消当前请求
getAllResponseHeaders()	获取完整的Http header信息
getResponseHeader(headername)	获取指定的Http header信息
open(method,url,async,user,passwd)	打开一个请求。 method-指定请求方法get或post url-请求的url async-指定异步请求响应。true表示发送请求后不等待回应而去执行别的操作；false表示请求后等待回应后才去继续别的操作。 user-访问用户（可选） passwd-访问密码（可选）
send(content)	发送请求
setRequestHeader("label","value")	设置请求头部信息

属性：

属性名	描述
onreadystatechange	一个事件，用来捕获所有的状态变换
readyState	返回对象状态： 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete
responseText	响应文本
responseXML	响应XML数据
status	返回状态数字（如:”404”表示“Not Found” “200”表示“OK”）。
statusText	返回状态文本（如：“Not Found” ，“OK”）

         

ajax 基本流程：

1 获取 xmlhttprequest 对象

function getXMLHTTPRequest() {
var xRequest=null;
if (window.XMLHttpRequest) {
xRequest=new XMLHttpRequest();
}

else if (typeof ActiveXObject != "undefined"){
xRequest=new ActiveXObject
("Microsoft.XMLHTTP");
}
return xRequest;
}

2 发送
function sendRequest(url,params,HttpMethod){
if (!HttpMethod){
HttpMethod="POST";
}
var req=getXMLHTTPRequest();
if (req){
req.open(HttpMethod,url,true);
req.setRequestHeader
("Content-Type",
"application/x-www-form-urlencoded");
req.send(params);
}
}

3 用 callback 控制请求

function sendRequest(url,params,HttpMethod){
if (!HttpMethod){
HttpMethod="GET";
}
req=getXMLHTTPRequest();
if (req){
req.onreadystatechange=onReadyStateChange;
req.open(HttpMethod,url,true);
req.setRequestHeader
("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}

function onReadyStateChange(){
var ready=req.readyState;
var data=null;
if (ready==READY_STATE_COMPLETE){
data=req.responseText;
}else{
data="loading...["+ready+"]";
}
//... do something with the data...
}

下面全部代码
/*
url-loading object and a request queue built on top of it
*/

/* namespacing object */
var net=new Object();// 相当于命名空间

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/

// 定义 ContentLoader 类，下面是其构造函数
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
  this.req=null;
  this.οnlοad=onload;// 获取方法
  this.οnerrοr=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}

// 定义对象的方法，通过 prototype 定义方法的好处是每个对象不会有该函数的一个 copy

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;//this 指当前函数 loadXMLDoc 所依附对象 即 ContentLoader 实例
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);// 将 onReadyState 该静态方法依附给 loader 对象，请注意这种调用方法！
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}

// 类方法相当于静态方法，注意本来再静态方法里面如果通过 net.ContentLoader.onReadyState() 的形式 调用 this 是无效的
// 但是注意调用该方法 是通过 function.call() 来调用的 因此可以用 this 来指向传过来的对象

net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  if (ready==net.READY_STATE_COMPLETE){
    var httpStatus=req.status;
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"/n/nreadyState:"+this.req.readyState
    +"/nstatus: "+this.req.status
    +"/nheaders: "+this.req.getAllResponseHeaders());
}

//
总结：
We instantiate the XMLHttpRequest object, tell it to load a document, and then monitor that load process
asynchronously using callback handlers.
What sets Ajax apart is not the technologies that it employs but the interaction
model that it enables through the use of those technologies.
注意：学习 ajax 不在于学它的技术，而是学习他的交互模型