XMLHttpRequest
XMLHttpRequest的五步使用法:
1、建立XHLHttpRequest对象
2、注册回调函数
3、使用open方法设置和服务器端交互的基本信息
4、设置发生的数据,开始和服务器端交互
5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
XMLHttpRequest的五步使用注意事项
1、不同浏览器中XMLHttpRequest对象建立的方式不同:
IE7,IE8,FireFox,Mozilla,Safari,Opera直接new XMLHttpRequest()
IE6,IE5.5,IE5则需要通过用某一个正确的
ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式
2、设置回调函数时,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性
实际上每次readystste的值发生变化的时候,回调函数都会被调用,但是一般我们只关心状态4
如果只关心正确的响应数据,只要在执行send方法之前设置回调函数即可,但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数,这样回调函数还可以处理其他的状态
3、open方法最多可以有五个参数,其中头三个参数是必须的。
使用GET方式时,请求数据位于url连接中,后面的send方法的参数直接写null就可以
使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据
4、回调函数中,最好将判断readyState和status的两个if条件,分开来写。readyState的判断条件位于外层,status的位于内层
假如他们被放到了同一个if条件中,判断数据正常返回也是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况
5、当服务器端没有正确返回XML数据时,在Javascript中使用responseXML的方式获取返回的XML数据对应的DOM对象时,FireFox和IE的结果是有差别的。
IE获取根元素节点为null,而FireFox获取根元素节点则是一个表示解析错误的元素节点。
XMLHttpRequest的详细属性和方法
方法 描述
open(String method,String url,boolean asunch, 指定和服务器端交互的HTTP方法, URL地址及其他请求信息
String username,String password)
method:表示HTTP请求方法。支持所有HTTP的方法,一般使用"GET","POST"
url:表示请求的服务器的地址
asynch:表示是否采用异步方式,true表示异步,false表示同步。
后两个参数可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码
send(content) 向服务器发出请求,如果采用异步方式,该方法会立即返回
Content可以不指定或指定为null表示不发送数据,其内容可以是DOM对象,输入流或是字符串。
setRequestHeader(String header,String Value) 设置HTTP请求中的指定头部header的值为value.此方法需在open方法以后调用
getAllResponseHeaders() 返回包含HTTP的所有响应头信息,其中响应头包括Content-Length,Date,URI等内容
返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开,每一组键之间
用CR和LF(回车加换行符)来分隔
getResponseHeader(String Header) 返回HTTP响应头中指定的键名header对应的值
abort() 停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态
readyState 表示XMLHttpRequest对象的状态
0=未初始化。对象已创建,未调用open
1=open方法成功调用以后。Send方法未调用
2=send方法已经调用,尚未开始接收数据
3=正在接收数据。Http响应头已经接收,响应数据尚未接收完成
4=完成。响应数据接收完成。
onreadystatechange 请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数).
responseText 服务器响应的文本内容
responseXML 服务器响应的XML内容对应的DOM对象
status 服务器返回的http状态码
200表示"成功",404表示"未找到",500表示"服务器内部错误"
statusText 服务器返回状态码的文本信息
<script type="text/javascript">
var xmlhttp;
function submin()
{
if(window.XMLHttpRequest)
{
//IE7,IE8,FireFox,Mozilla,safari,Opera
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType("text/xml");
//我们经常在AJAX代码中发现如下代码:
//其作用是:针对某些特定版本的mozillar浏览器的BUG进行修正
//具体来说:
//如果来自服务器的响应没有 XML mime-type 头部,则一些版本的 Mozilla 浏览器不能正常运行。
//对于这种情况,httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部,强制 text/xml 作为 mime-type。
}
}
else if(window.ActiveXObject)
{
//IE6,IE5.5,IE5
var activeName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++)
try
{
xmlhttp=new ActiveXObject(activeName[i]);
break;
}
catch(e)
{}
}
if(xmlhttp=="undefind"||xmlhttp==null)
{
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
return;
}
else
{
//2.注册回调方法
xmlhttp.onreadystatechange=callback;
var userName=document.getElementById("UserName").value;
//3.设置和服务器端交互的响应参数
var url = "Handler.ashx?name=" + userName;
xmlhttp.open("GET",url, true);
//4.设置向服务器端发生的数据,启动和服务器端的交互
xmlhttp.send(null);
//Post发送方式
//xmlhttp.open("POST","AJAX",true);
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlhttp.send("name"=userName);
}
}
function callback()
{
//5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据
if (xmlhttp.readyState == 4)
{
if(xmlhttp.status==200)
{
//纯文本数据的接受方法
var message=xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是,服务器端需要设置content-type为text/xml
//var domxml=xmlhttp.responseXML;
var div=document.getElementById("info");
div.innerHTML=message;
}
//判断返回的XML数据是否正确
/*
var rootElement=xmlhttp.responseXML.documentElement;
if(rootElement==null||rootElement.nodeName!="") ""里是XML根元素节点的名字
{}
else
{}
*/
}
}
</script>