Ajax使用思路
Ajax使用思路:
1、创建XMLHttpRequest对象
2、open(“method”,”URL”,asyncFlag)方法创建新的请求。
3、send(content)方法发送请求数据(get方法不需要指定content参数,post方法需要指定参数)
4、onreadystatechange属性设置状态改变时的处理函数(请求成功,返回成功等)
5、处理函数中指定返回成功或返回的处理函数
6、responseXML或resopnseText属性获取服务器返回的参数。
Ajax中常用属性
1、 onreadystatechange: 是指定状态改变时所触发的事件处理器的属性
在AJAX中,每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数
2、readyState:是XMLRequest对象提供的请求状态属性。该属性提供了5个属性值:
值—>意义
0—>未初始化
1—>正在加载
2—>已加载
3—>交互中
4—>完成
该属性常用于判断请求状态,当请求状态等于4,也就是为完成时,在判断请求是否成功,若成功,将开始处理返回结果。
3、status:表示返回服务器的HTTP状态码属性。返回值为长整型的数值。常用于当请求状态为完成时,判断当前的服务状态是否为成功。
常用的状态码:
100—->继续发送请求
200—->请求已成功
202—->请求被接受但未成功
400—->错误的请求
404—->文件未找到
408—->请求超时
500—->内部服务器错误
501—->服务器不支持当前请求所需要的某个功能
4、responseText:是XMLRequest对象提供的获取服务器响应的属性,表示为字符串。
5、responseXML:是XMLRequest对象提供的获取服务器响应的属性,表示为XML。这个对象可以被解析为一个DOM对象。
Ajax中常用函数
1、 open(“method”,”URL”,asyncFlag);创建新请求的方法
参数说明:
method:指定请求的类型,一般为GET或POST
URL:指定请求的地址。
asyncFlag:为可选参数,用于指定请求方式,异步请求为:true 同步请求为:false; 默认为true;
2、send(content);向服务器发送请求的方法;若为异步请求,则该方法立即返回。否则将等到接受到响应为止。
参数content用于指定发送的数据,可以时DOM对象、输入流或字符串。如果没有参数需要传递可以为null;
3、setRequestHeader(“header”,”value”); 该方法用于为请求的HTTP头设置值。
如:setRequestHeader(“Content-Type”,”application/x-www-form=urlencoded”);
4、abort();停止或放弃当前异步请求的方法。
5、getResponseHeader(“Content-Type”) 该方法用于返回响应的HTTP头部信息的方法
getResponseHeaders() 该方法用于以字符串的形式返回完整的HTTP头信息。包括:Server、Date、Content-Type和Content-Length
AJax重构代码
在用到Ajax的页面直接调用net.AjaxRequest函数并传入相应的参数即可
url:服务器的地址
onload:为请求成功并且服务器返回状态为200(即:成功)时执行的回调处理函数
onerror:服务器返回状态为不为200时,执行的错误处理函数
method:表示请求方式post/get
params:要向服务器传递的参数
// JavaScript Document
var net = new Object();
//编写构造函数
net.AjaxRequest = function (url,onload,onerror,method,params){
this.req = null;
this.onload = onload;
this.onerror = (onerror)?onerror : this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并制定处理函数,最后返回HTTP发送的请求
net.AjaxRequest.prototype.loadDate =function(url,method,params){
//重构回调函数
net.AjaxRequest.onReadyState = function (){
var req = this.req;
var ready = req.readyState;
if(ready==4){
if(req.status == 200){
this.onload.call(this);
}else{
// alert("状态的");
this.onerror.call(this);
}
}
}
if(!method){
method = "GET";
}
//创建XMLHttpRequest对象req
if(window.XMLHttpRequest){
this.req = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
this.req = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
this.req = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
console.log("不支持Ajax");
}
}
}
/*
*/
if(this.req){
try{
var loader = this;
/*
注意:在指定所触发的事件处理器时,所调用的函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。
如下面的代码:
*/
this.req.onreadystatechange = function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
if(method == "POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form=urlencoded");
this.req.setRequestHeader("x-requested-with","ajax");
}
console.log(params.toString());
this.req.send(params);
}catch(err){
this.onerror.call(this);
}
}
//重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function(){
if(console) {
console.log("错误数据----请求状态:"+this.req.readyState + "--返回状态--"+this.req.status);
}else{
alert("错误数据----请求状态:"+this.req.readyState + "--返回状态--"+this.req.status);
}
}
}