javascript之Ajax详解。

XMLHttpRequset使用：

每一个实例都表示一个独立的请求、响应，且这个对象的属性和方法允许指定请求细节和提取响应的数据。
使用前必须实例化XMLHttpRequest对象。
var requset = new XMLHttpRequest();

IE7之前的版本不支持XMLHttpRequset()构造函数，但能以下模拟：


if(window.XMLHttpRequest ===undefined){  // IE5 6中模拟XMLHttpRequset构造函数。
window.XMLHttpRequset= function(){
  try{     //  如果可用，则使用ActiveX对象最新版本。
  return new ActiveXObject('Msxml2.XMLHTTP.6.0');
}
catch(e1){
try{   // 否则退回比较旧的版本。
reutrn new ActiveXObject('Msxml2.XMLHTTP.3.0');
}
catch(e2){
//  都不满足的话报错。
 throw new Error('XMLHttpRequest is not supproted');
}
}
}
}

一个HTTP请求由4部分组成。

第一步首选实例化XMLhttpRequest对象。
var request= new XMLHttpRequset();

请求资源 第一参数不区分大小写 get或post ，第二个为请求数据地址
get用于常规请求类型，post常用于HTML表单
请求url地址 第二参数协议主机和端口通常必须匹配所在文档对应内容，跨域的请求通常会报错
request.open(‘GET/POST’,‘URL’);

请求头
request.setRequestHeader(‘Content-Type’,‘text/plain’);

请求的最后一步是发送请求。
get请求没有主体，所以传递null
request.send(null);

服务器返回三个部分。

一、status与statusText属性以数字和文本返回HTTP状态码。
200与‘OK’表示请求成功。
404与’Not Found’表示不能匹配到服务器上的任何资源。

二、使用getResponseHeader()和getAllResponseHeaders()能查询响应头。
XMLRequest会自动处理cookie

三、响应主体可以从responseText属性中得到文本形式、从response属性中得到Document形式的。

为了响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的readystatechange事件。在这之前必须先了解readyState属性。

readState是一个整数，指定了HTTP请求的状态：
0为open()未调用
1为open()已调用
2为接收到头信息
3接收到响应主体
4响应完成

异步：

function getText(url,callbak){
 var request = new XMLRequest();
 request.open("get",url);
 request.onreadystatechange = function(){   // 触发事件
 if(request.readyState===4 && request.status===200){  // 请求成功的状态码
  var type = request.getResponseHeader('Content-Type'); // 获取响应类型
  if(type.match(/^text/)){  // 确保响应是文本
  callback(request.responseText); // 请求的值传递给回调函数
}
}
request.send(null);  // 发送请求
}
}

同步：

function getTextSync(url){
var request = new XMLHttpRequest();
request.open("get",url,false);  // fasle 为同步
request.send(null); // 立即发送请求
if(request.status !==200){
 throw new Error(request.statusText);
}
var type  = request.getResponseHeader('Content-Type'); // 响应类型
if(!type.match(/^text/)){ // 如果类型错误就报错
throw new Error ("Expect textual resopnse;got"+type);
}
return request.responseText;
}

javascript之Ajax详解。

猜你喜欢