1.Ajax
(1)获得ajax对象:
var ajax=null;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//如果是旧版IE
ajax=new ActiveXObject();
}
(2)指定该ajax对象的结果处理器:
ajax.onreadystatechange=handleStateChange;//在请求过程中的每个阶段,该函数都将被调用
(3)发送请求(两步):
发送请求书写格式
第一步:调用open()方法
ajax.open(method,url,async,userName,userPassword);
//参数method:最常用的请求类型为GET或POST(字母大写);
//参数URL:绝对路径或相对路径
//参数async:表示同步或异步;为布尔值:true(异步),false(同步)
//参数userName或userPassword:可选;分表表示用户名和密码,如果资源受到HTTP验证保护,这两个参数是必需的。
第二步:调用send()方法
ajax.send(arg);//arg:请求中的数据
注意:请求发送但尚未完成的时候,可以调用对象的abort()方法撤销请求。
可以设置一个定时器,在请求消耗时间过长的时候撤销它:
ajax.open('GET','http://www.example.com/pgge.php'.true);
var ajaxAbortTimer=setTimeout(function (){
if(ajax)
{
ajax.abort();//撤销
ajax=null;
}
},
5000
);//上述代码在创建5秒后调用匿名函数。在函数中,如果ajax对象的值如果仍然为假时,就可以确定请求仍在进行,可以终中止
(4)获取服务器数据
在ajax异步请求之后,在对象的readyState属性变化时,将调用ajax对象onreadystatechange属性所指定的函数来处理服务器的响应
onreadystatechange属性的5个值,按照顺序执行:
0,未发送
1,打开
2,接收到首标
3,加载中
4,完成
在发送请求之后,该值立刻变成1,然后变成2、3,最后变成4.
*在处理readyState变化的函数中,可以检查readyState属性并做出相应的反应。
例如:
属性值为4,意味着处理完成,页面可以使用处理的结果,其他值,一位置Ajax仍在处理中,脚本不需要做任何事情,或者显示"加载中..."的信息;
if(ajax.readyState==4){
// Handle the response
...
}else{
//Show the 'Loading ... ' message or do nothing.
...
}
注意: ①我们可以在调用open()方法之后,创建“加载中...”信息,并在readyState等于4时隐藏信息(当readyState==4时,Ajax请求已经完成整个周期)。
②但是,在我们处理响应之前,还要进行一次检查:
确认响应正常。检查对象的status属性可以完成确认工作,该属性代表服务器对资源请求的相应代码。这些HTTP代码包括:
200,OK(正常)
301,Move Permanently(永久性移动)
304,Not Modified(未作修改)
307,Temporary Redirect(临时重定向)
401,Unauthorized(未授权)
403,Forbidden(禁止访问)
404,Not Found(未找到)
500 ,Internal Server Error(内部服务器错误)
使用举例:
if(ajax.readyState==4){
if((ajax.status>=200&&ajax.status<300)
|| (ajax.status==304)
){//Handle the response;
...
}else
{//satus error
...
}
}
③根据Ajax的具体使用方法,如果返回有问题的代码,可以重新启用默认的浏览器行为:将浏览器重定向到非Ajax页面,真正提交到表单,等等
④statusText属性:代表服务器返回的对应状态码的字符串信息,可用于任何错误报告中。
⑤服务器返回处理后的数据时, responseXML属性和responseText属性可以得到响应数据。
(5)Ajax对象使用完毕后(脚本不再使用它),应赋值null将其清除。
ajax=null;
(6)发送数据到服务器(两种方法)
方法一:将数据附加到url之后;数据格式:“名称=值”,多个值之间使用&分隔;为保证请求使用的数据安全,将其封装在encodeRUIcomponent()调用之中
如:ajax.open('GET','http://www.example.com/somePage.hph?id='+
encodeRUIComponent(id),true);
方法二:将数据作为send(arg)方法的实参,否则置ag=null;
如:var data='email='+encodeRUIComponent(email)
+'&password='+encodeRUIComponent(password);
ajax.send(data);
注意:①发送POST请求,必须使用第二种方法,即,适应send()方法提供数据,而不是将数据附着到URL之后。
②发送POST请求时,应该向服务器指明发送的内容类别。
调用Ajax对象的setRquestHeader(name,value)方法来完成;
//第一个参数是首标名称,第二个为其值。
ajax.setRequestHeader('Content-Type','application/x-www-urlencoded');
③FormData对象----向服务器发送送据的改进方案(老版本的浏览器不一定支持)
var data=new FormData();//创建FormData对象
data.append('email',email);
data.append('password',password);
ajax.send(data);//发送数据请求
优点:通过FormData对象的append()方法添加的数据,不需要再调用encodeRUIComponent()方法,也不需要设置Content-Type
(7)
浏览器缓存问题?
问题: 因为浏览器会试图将Ajax请求的结果缓存。所以如果浏览器缓存请求,对服务器端资源的修改就可能无法得到立即反映。
方案一:禁用浏览器缓存(简单,受影响的只是我们自己)
方案二:有服务器资源指定请求不应该缓存,(这将影响到使用相同服务器端资源的所有人)
php中,发送一个Cache-Control首标可以实现这个功能:
<?php
header('Cache-Control:no-cache');
方案三:在URL上添加一个随机值,例如时间戳。使得灭个请求都有一个唯一的URL,浏览器将不会使用前面缓存版本了。
var url='http://www/example.com/somePage.php?stamp='+new Date().getTime();
ajax.open('GET',url,true);