Using the XML HTTP Request object (翻译)Jim Ley

Posted on 2006-11-02 15:15 舞步者阅读(279) 评论(0) 收藏举报

   本文系本人翻译自Jim Ley 的《Using the XML HTTP Request object》文，难免会有错误，请大家指正
                                                         使用XmlHttpRequest对象
      Windows上的IE，Mac机上的Sarari，应用于所有平台的Mozilla,KDE上的Konqueror,Java环境下的IceBrowser,所有平台下的包括（Symbian）Opera 提供了一个一个方法，这个方法用于客户端建立HTTP请求。
      从古怪地称之为对象并不为关注的简陋的开始，它渐渐成为了一个称之为AJAX的技术核心，并不断发展。
    这个对象比其他东西更容易更简洁地处理许多问题，并且引进了一些概念，这些概念在观察一个资源后来修改时或者是否存在时，显得很重要，比如说HEAD Request。
      它使得你在考虑POST请求时您的脚本选项更加灵活，不需要页面的改变，开始了使用PUT，DELETE等等的可能性
      这些方法正在越来越广泛的用于提供更加丰富的WEB应用，就象G-Maill一样，通过较少的带宽并且提供快捷的用户体验。
      什么是XMLHTTPRequest对象
     时下，这个对象称之XMLHTTPREQUEST对象，它不局限于使用xml，它可以请求或发送任何类型的文档，虽然在JAVASCRIPT中处理二进制流的时候会出现问题。
      创建这个对象
      在IE中，你可以用new ActiveObject("Msxml2.XMLHTTP")或者new ActiveXObject("Microsoft.XMLHTTP"),这个取决于安装的MSXML的版本。在MOZILLA和SAFARI，你改使用
new XMLHttpReqeust();IceBrowser使用不同的方法window.createRequest()方法
      这意味着你需要编写不同的脚本来适应不同的浏览器，能够正常的工作。下面的饿脚本做到了这一点，如果它不能被支持，变量被设置为false以考虑到合适的错误信息并且在对象不可用时，降低HTTP处理以使恢复。降低级别是重要的，甚至在IE中对象也常被轻微的安全设置所封闭。至于可能采取的降级，下面的方法讨论了这一点，如果你真的不能，我建议提供一个可供选择的页面。
        var xmlhttp=false;
try //判断微软不同版本的XMLHTTP
{
xmlhttp=new ActiveObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
  xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
catch (e)
{
  xmlhttp=false;
}
}
if(!xmlhttp&&typeof XMLHttpRequest!='undefined')//微软的不支持，其他的平台情况下
{
try
{
  xmlhttp=new XMLHttpRequest();
}
catch (e)
{
  xmlhttp=false;
}
}
if(!xmlhttp&&window.createRequest)//特殊情况下，IceBrowser浏览下创建xmlhttpRequest对象
{
try
{
  xmlhttp=window.createReqeust();
}
catch (e)
{
  xmlhttp=false;
}
}
   我如何建立一个请求？
   建立一个HTTP请求非常容易，你只要告诉XMLHTTPREQUEST对象你要建立的HTTP请求的类型和哪个URL你将要请求。在你的请求建立好之后提供一个被执行的方法，最后，在请求的主体中发送任何形式的信息
      下面的脚本建立了一个针对相对URL文本文件的请求。它提供了一个函数，这个函数每次被调用时检查readyState属性，当它的值是4的时候，以为着加载已经完成，它显示响应的文本给用户
   xmlhttp.open("GET","test.txt",true);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
  alert(xmlhttp.responseText)
}
}
xmlhttp.send(null);

      建立一个HEAD请求
通过HEAD请求，服务器将只返回资源的头部信息，而不是资源本身，这个意味着你可以得到内容的类型或最后修改的文挡，而不是下载它本身
      一个典型的HEAD请求可能返回的内容如下：

HTTP/1.1 200 OK

Server: Microsoft-IIS/4.0

Cache-Control: max-age=172800

Expires: Sat, 06 Apr 2002 11:34:01 GMT

Date: Thu, 04 Apr 2002 11:34:01 GMT

Content-Type: text/html

Accept-Ranges: bytes

Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT

ETag: "0a7ccac50cbc11:1aad"

Content-Length: 52282

      要创建一个HEAD请求，你只要将第一个参数改成“HEAD”，然后提取头信息，或者使用
getAllRequestHeaders或者getResponseHeader("Name")来或者具体的某个
   xmlhttp.open("HEAD","/fag/index.html",true);
   xmlhttp.onreadystatechange=function()
{
   if(xmlhttp.readyState==4)
      {
         alert(xmlhttp.getAllResponseHeaders())
      }
}
xmlhttp.send(null)
    使用HEAD请求，   找出最后修改的另个文件
      HEAD请求的一个应用，是找出何时URL被修改，扩展前一个例子，你可以获得如下的信息：
     xmlhttp.open("HEAD","/faq/index.html",true);
   xmlhttp.onreadystatechange=function()
      {
         if(xmlhttp.readyState==4)
            {
               alert(xmlhttp.getResponseHeader("Last-Modified"))
            }
      }
xmlhttp.send(null)
      无刷新调用服务端脚本
     表单是HTML中调用服务端脚本的方式,他们强制页面重新加载，这样做通常不是非常用户友好的。使用HTTP请求，你可以在不刷新页面的条件下调用脚本，当XML HTTPREQUEST对象不可用时，仍然使表单反馈

<%

a=+(Request.QueryString('a')+'')

b=+(Request.QueryString('b')+'')

if (isNaN(a) || isNaN(b)) {a='';b='';total='' }

else {

total=a+b

}

acc=Request.ServerVariables('HTTP_ACCEPT')+''

if (acc.indexOf('message/x-jl-formresult')!=-1) {

Response.Write(total)

} else {

%>

<script src="xmlhttp.js" type="text/javascript"></script>

<script>

function calc() {

frm=document.forms[0]

url="add.1?a="+frm.elements['a'].value+"&b="+frm.elements['b'].value

xmlhttp.open("GET",url,true);

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4) {

document.forms[0].elements['total'].value=xmlhttp.responseText

}

}

xmlhttp.setRequestHeader('Accept','message/x-jl-formresult')

xmlhttp.send()

return false

}

</script>

<form action="add.1" method="get" onsubmit="return calc()">

<input type=text name=a value="<%=a%>"> + <input type=text name=b value="<%=b%>">

= <input type=text name=total value="<%=total%>">

<input type=submit value="Calculate">

</form>

<%

}

%>

      上面的这个例子在执行于服务端的ASP中使用JSCRIPT，HTTP ACCEPT 头用来告诉服务器哪些响应应该回发，或者是整个页面或只是结果。
       HTTP 接受头用于告诉服务端哪些MIME类型客户端将要接受，正常的它用象text/html表达信息。这里虽然我们告诉它我们仅仅接受“message/x-jl-formresult",所以服务器知道它是我们的客户
      其他的识别将要返回信息的方法可能取决于你发送给服务端的数据，或者你可能仅仅使用不同的URLS用于表单的提交和xmlhttp请求，无论你做的什么，记住：在尽可能的地方反馈合适的信息给非xml的浏览请求者
      使用JSON作为传输语言
      时下，XML可以被用来编码你得到的信息，它在xml响应属性中也可起作用，然而，xml并不是很好地被支持，一些浏览者请求的资源的类型是XML MIME类型text/xml或者applicaton/xml两种中的一个，在你使用XML时会出现或多或少的错误。JSON是个好的可选择的方法，它可以快速的被解析更快地在脚本中访问
      我在FLIGHT ROUTEPLANNER中使用JSON用来查找机场的信息。你可以使用新的功能构造器轻易地将返回的JSON

刷新页面返回顶部

舞步者

公告

Using the XML HTTP Request object (翻译)Jim Ley