ajax – XmlHttp


Warning: Undefined array key "HTTP_REFERER" in /www/wwwroot/prod/www.enjoyasp.net/wp-content/plugins/google-highlight/google-hilite.php on line 58

XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面, ajax主要通过XmlHttp来实现功能。

XmlHttp应用过程:

??? 1,创建。
???????? 因浏览器的不同,IE,Mozilla Firefox之类提供的XmlHttp创建方式也随之不同,故要根据用户传来的浏览器信息来相应进行选择相应的创建方式。而浏览器信息在客户端请求时是存放在 User-Agent中,故可通过读取其来创建,或者判断XMLHttpRequest,ActiveXObject对象是否存在来判别浏览器。

?? IE 的XmlHttp:MSXML2.XMLHTTP.6.0,?? MSXML2.XMLHTTP.5.0,?
???????????????????????? MSXML2.XMLHTTP.4.0? ,MSXML2.XMLHTTP.3.0,?
????????????????????? ?? MSXML2.XMLHTTP,??????????? Microsoft.XMLHTTP
? 上面6种适用于IE6以下版本的浏览器(IE6,IE5 )
? 对于每一款版本的浏览器对应的MSXML2.XMLHTTP可能有好几个版本(Miscrosoft在IE5才应用此技术,而IE5对应的操作系统是windows 98 故以上六种可解决多数IE浏览器),上面的六种版本,对于IE5,IE6都是支持的,也就是说,任意一个都可用来创建XmlHttp,一般来说,新的版本会比旧的版本错误更少,性能更好。应该优先考虑使用最新的版本,先试6.0,若用户没有此升级补丁,再试5.0….
?对于IE7以上的版本Microsoft支持与其它浏览器创建相同的方式,即通过:objXmlHttp=new XMLHttpRequest() 完成。
?
?创建方法如下:
???????? var xmlHttp;
???????? function GetXmlHttpObject(handler) {

? ? ? ?? ??? //针对不同的浏览器建立XMLHttpRequest对像?
?? ? ? ? ? ? if(window.XMLHttpRequest){??
???????????? //若存在内置的XMLHttpRequest说明是IE7,及其它浏览器

???????? ?? //针对非IE多款浏览器,Firefox,operia及IE7
????????? ? xmlHttp=new XMLHttpRequest();?

????? ????? ? ?//此if语句主要针对部分版本的Mozillar浏览器的xml bug?
??? ?? ????? ?if(xmlHttp.overrideMimetype){?
????????? ?? ?? ??xmlHttp.overrideMimeType(“text/xml”);?
????????????? ? }?
????? ??? ? }?
?? ?? ??? ?else if(window.ActiveXObject){?
??????????????? //若存在ActiveXObject对象,证明一定是IE6以下的浏览器
??? ?? ??? ??? ?//针对IE6.0及以下的IE浏览器?
??????????? ??? ? var MSXML=[‘MSXML2.XMLHTTP.6.0′,’MSXML2.XMLHTTP.5.0’,?
?????????????????????? ‘MSXML2.XMLHTTP.4.0′,’MSXML2.XMLHTTP.3.0’,?
?????????????????????? ‘MSXML2.XMLHTTP’,’Microsoft.XMLHTTP’];?

?????????? ??? //for语句检测与MSXML列表对应的系统MSXML版本?
???? ??? ??? ? for(var n = 0; n < MSXML.length; n ++){???????????
???? ??? ??? ?? ?? try{//如果找到则创建该对象?
???????????????? ?? ?? ?xmlHttp = new ActiveXObject(MSXML[n]);?
??????????????? ??? ?? ?break;?
??????????????? ??? ?? }catch(e){ //抛出说明没有当前版本的补丁,试下一个低级版本for…
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }?
???????????? ?? ?? }?
????????????
???????????? if ( xmlHttp == null ){
?? ??? ??? ?????? alert(“不能建立XMLHttpRequest对象,浏览器不是IE,FireFox等通用浏览器或IE的??????????????????????????????????? WINDOWS\system32msxml2.dll 文件不存在”);
?????????????? }
???????? ? }?

??? ??? ?}

2,操作:客户端请求, 服务器响应并返回结果。

? (1)请求:
????? 1)设置接受服务器响应结果的函数(当open的async为true时有效)
?????????? xmlHttp.onreadystatechange=handler?? //handler为自定义的处理函数的名称,不要括号

?????????? onreadystatechange:当HTTP请求的状态改变时调用handler方法,HTTP 请求有5种状态
?????????? readyState有5种状态,分别用数字的 0 到 4 来表示。
?? ??? ??? ??? ?0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置。
?? ??? ??? ??? ?1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
?? ??? ??? ??? ?2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
?? ??? ??? ??? ?3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
?? ??? ??? ??? ?4 Loaded HTTP 响应已经完全接收。

?? ??? ??? ?注:onreadystatechange事件句柄不同的浏览器能处理的状态并不一致,IE和FireFox能处理1到4,而 Safari能处理2到4的状态,Opera 能处理3、4两中状态。0的状态基本没什么用,因为创建了XMLHttpRequest 对象后都会马上调用open() 方法,这时候状态就变成1了,当然除非你要判断对象是否已经被 abort() 取消,可是这样的情况依然很少。大部分情况下判断是不是4(已经接受完成)这个状态就够了。
??????????? function Mycallback(){??? //自定义的回调函数
???????????? if(xmlhttp.readyState == 4){?
???????????????? if(xmlhttp.status == 200){?
????????
???????????????????? resultNode.innerHTML = xmlhttp.responseText;?
???????????????? } else{?
???????????????????? resultNode.innerHTML = “服务器故障”;?
??????????????? }?
???????????? }?
??????? }
? ? ? ?
?? 注:status 说明:由服务器返回的 HTTP 状态代码。
???????? statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码
???????? xmlhttp.status == 200 查看数据在在网络传输过程的状态,xmlhttp.status 等于200时表示传输过程完整没有错误,其它的情况可能有在网络传输过程中出错或者指定的地址失效.常用的状态码有:
????? ? ◆200 (OK): 找到了该资源,并且一切正常。
??? ?? ?◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。
????? ? ◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码,以登录到服务器。
??? ?? ?◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。
??? ?? ?◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。

????? 2)建立与服务器的连接,初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求
??????????? xmlHttp.open(“GET”, url , true)
??????????
??????????? oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

??????????? ?? ?参数
?? ??? ??? ??? ??? ?bstrMethod:http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
?? ??? ??? ??? ??? ?bstrUrl? 请求的URL地址,可以为绝对地址也可以为相对地址。
?? ??? ??? ??? ??? ?varAsync[可选]: 布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用?? ??? ??? ??? ?onreadystatechange属性指定的回调函数。也就是说当true时定义接受服务器响应结果的函数–回调函数才有效
???????????? 因ajax主要利用异步,同步直接提交表单就可完在,不需ajax,故可为open( “GET”,url ) 默认为true
?? ??? ??? ??? ??? ?bstrUser[可选] :如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
?? ??? ??? ??? ??? ?bstrPassword[可选]:验证信息中的密码部分,如果用户名为空,则此值将被忽略。
?????
? ?? 3)执行
?????????? xmlHttp.send (varBody? );?? varBody:欲通过此请求发送的数据。
?????????? 此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync == False,此方法将会等待请求完成或者超时时才会返回,如果bAsync == True,此方法将立即返回
?????????? varBody为传送的数据,当open方法为get时,参数在url中指定,当方式为post时,参数应存放在请求数据中,目前自定义发送存入请求数据的过程就是用varBody指定。可知当为get时,send传空即:xmlHttp.send( “” );
????????? 如:
????????? xmlHttpRequest.open(“POST”,”login.jsp”,true);
 ??  xmlHttpRequest.setRequestHeder(“Content-Type”,”application/x-www-form-urlencoded;charset=UTF-8″);
????????????????? //使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送 一个表单,这样服务器才会知道如何处理上传的内容。
  ?? xmlHttpRequest.send(“user=”+username+”&pwd=”+password);
????????
????? 注:xmlHttp.send(“”);如果写成xmlHttp.send(); 或 xmlHttp.send(null);FireFox不支持。

? (2) 服务器响应并返回结果
??????????? 编写处理函数,并将结果返回
?????????????? doGet(){
??????????? response.setContentType(“text/html;charset=GB2312”);?
? ? ? ? ? ? PrintWriter out = response.getWriter();?
??????????? out.println(“<b>hello ajax</b>”);????
? ? ? ? ? //以上是servlet形式,需要手动设置返回格式,而在struts中用return success转到某一页面,此页面只是信? 息。因为当前会接受这些信息,而不是用来转到某一页面。 ?????????????????
}
????????? 在回调函数中接收:
?????????????? document.getElementById(“txtHint”).innerHTML = xmlhttp.responseText;?
?????? ? 属性 : responseText? 服务器返回的文本内容
????????????????? responseXML 服务器返回的兼容DOM的XML内容
????????????????? statusText???? 服务器返回状态码的文本信息