一.XMLHttpRequest对象
1.XHR对象的调用及其属性和方法
关于无刷新技术,很自然的会想到XMLHttpRequest(XHR)对象,这是Ajax中请求服务器局部刷新的技术基础,在主流的浏览中都支持XHR,不过是在不同版本和类型的浏览器是用不同的方法获取这个对象。
var xhr;
try
{xhr= new ActiveXObject('Msxml2.XMLHTTP'); /*IE5.0*/}
catch(e)
{
try{xhr= new ActiveXObject('Microsoft.XMLHTTP'); /*IE5.5*/}
catch(e)
{
try{xhr= new XMLHttpRequest();/*IE7及其他类型浏览器*/}
catch(e){}
}
}
try
{xhr= new ActiveXObject('Msxml2.XMLHTTP'); /*IE5.0*/}
catch(e)
{
try{xhr= new ActiveXObject('Microsoft.XMLHTTP'); /*IE5.5*/}
catch(e)
{
try{xhr= new XMLHttpRequest();/*IE7及其他类型浏览器*/}
catch(e){}
}
}
上面利用异常的机制实现了浏览器的兼容。
XHR有同步和异步两种方式,同步请求时,页面会等待服务器的响应结束才允许用户继续进行其他工作,因此如果这个请求阻塞用户很久,那是很令人失望的。所以,通常使用的是异步请求,让用户可以在等待响应的期间可以继续做其他的。下面是典型的打开一个异步请求并处理的代码。
xhr.open("get","ajax.aspx?arg=a&arg=b"
); //创建请求
xhr.onreadystatechange= function() { //注册请求状态改变的处理事件
if(xhr.readyState==4 ) {
if(xhr.status==200 ) {
var text= xhr.responseText;
}
}
}
xhr.onreadystatechange= function() { //注册请求状态改变的处理事件
if(xhr.readyState==4 ) {
if(xhr.status==200 ) {
var text= xhr.responseText;
}
}
}
xhr.send(null);//发送请求
—open()方法是向服务器发送一个请求的前的准备,使用它可以创建一个请求。其完整的形式是open(method,url,asynchronous,username,password),正如上面的示例,后面三个参数是可选的。第三个参数表示请求是否是异步,不设值时,默认的便是true即异步。第一个参数是发送请求的方式,一般是GET或POST比较常用(其他的还有PUT、DELETE等方法)。
- GET方法如果传递参数,是用紧跟在"?"后面用"&"分隔开的名值对,作为查询字符串提交。在服务器端处理时一般用request.querystring提取(PHP用$_GET("参数名"))。由于send方法中参数body是必须的,而GET方法下不发送数据到服务器端,所以可以为null。
- POST方法,实际也是可以在URL中传递查询字符串的,并在服务器端用同样的方法提取。然而使用POST方法,是因为需要发送影响服务器状态或更大量的数据。它发送的数据是send方法中body参数的值,该参数也是查询字符串的形式(这也许比较常见,或者说更容易用标准的方式可以提取,就如同从表单用POST方式提交,而实际上如果不设置请求的头部信息,它可以是任何形式)。在服务器端获取时,一般使用request.form提取(PHP用$_POST("参数名"))需要特别注意的是,由于是CGI风格(表单式的提交)上传浏览器数据,所以需要用setRequestHeader方法设置请求的头部信息,这必须要在send方法前设置。
xhr.open("post","ajax.aspx" )
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );
xhr.onreadystatechange= function() {
if(xmlhttp.readyState==4 ) {
if(xmlhttp.status==200 ) {
var text= xhr.responseText;
}