当前位置： 代码迷 >> Ajax >> Ajax原理及运用二(处理HTTP请求)
  详细解决方案

Ajax原理及运用二(处理HTTP请求)

热度：190   发布时间：2012-11-23 00:03:43.0
Ajax原理及应用二(处理HTTP请求)

1、当在浏览器地址栏中输入网页地址，或者提交表单时，便通过浏览器向Web服务器发送了HTTP请求，HTTP协议规定了Web浏览器如果向Web服务器请求文档，浏览器如何提交表单，Web服务器如何响应客户端请求，以及客户端如何接受及处理服务器响应。
? 详见《HTTP协议讲解》
? 通常情况下，向服务器发送请求，以及接收处理服务器端响应的工作是又浏览器完成。并不是通过JavaScript等客户端脚本完成的。当单击某个超链接时，或者单击提交按钮，或者点击某个定义的超链接时，浏览器便向服务器端发送请求。
? 而目前的大部分浏览器均支持脚本发送HTTP请求，并能够通过脚本处理服务器的响应结果，也就是说，可以通过脚本向Web服务器发送GET或POST请求，并通过脚本操作服务器端返回的响应内容。这种能力使客户端能够隐式的向服务器发送请求，并处理请求结果，但却并不影响客户端用户界面，
2、XMLHttpRequest对象
? 通过脚本处理HTTP请求的能力是基于浏览器提供的XMLHttpRequest对象，该对象提供对HTTP协议的完全访问，通过该对象提供的方法，能够向服务器发送POST或GET请求，并且，能够很容易的获取服务器返回的请求结果。Web服务器的请求结果可以以同步或者异步方式返回。可以是文本的形式或者DOM文档的形式。
?? XMLHttpRequest对象并未标准化，在IE较早的版本中，该对象在IE与其他浏览器中的名称、创建方式并不同。但他们提供相同的功能，所以一般将他们统一称为XMLHttpRequest对象，由W3C起草的标准草案中也采用的是XMLHttpRequest，XMLHttpRequest对象源自微软的创建XMLHTTP请求对象，该对象在处理普通HTTP请求的功能上添加了发送和接收XML代码的功能，但是该对象并不仅限于发送和接收XML代码，它可以接收任何形式的内容。
IE中的XMLHttpRequest对象是一个ActiveX控件对象，需要通过ActiveXObject()构造函数创建，例如：

Ajax代码 复制代码
  1. var?xml_request=new?ActiveXObject("MSXML2.XMLHTTP");??
var xml_request=new ActiveXObject("MSXML2.XMLHTTP");


在IE不同的版本中，所支持XML HTTP库的版本不同，在较新的版本中支持“MSXML2.XMLHTTP”，在较早的IE版本中支持“Microsoft.XMLHTTP”，因此，创建XMLHttpRequest对象时，需要根据用户浏览器中支持的XML HTTP库德版本想ActiveXObject()构造函数传递不同的参数。
下面的代码根据IE支持的XML HTTP库的版本创建相应的XMLHttpRequest对象。

Ajax代码 复制代码
  1. var?xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; ??
  2. var?xml_request; ??
  3. for(var?i=0;i<xml_http_arr.length;i++){ ??
  4. ????if(xml_request?=?new?ActiveXObject(xml_http_arr.length[i])) ??
  5. ???break; ??
  6. }??
var xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var xml_request;
for(var i=0;i<xml_http_arr.length;i++){
    if(xml_request = new ActiveXObject(xml_http_arr.length[i]))
   break;
}


由于XML HTTP对象的强大功能，Mozilla在浏览器中复制看该对象，实现了名为XMLHttpRequest的对象，该对象与IE浏览器中处理XML HTTP的对象完成完全相同的功能，具有相同的属性和方法，其他浏览器也同样实现了自己的XMLHttpRequest对象，在这些浏览器中直接通过XMLHttpRequest()构造函数创建XMLHttpRequest对象，例如：

Ajax代码 复制代码
  1. var?xml_http_request=new?XMLHttpRequest();??
var xml_http_request=new XMLHttpRequest();


IE7中同样提供XMLHttpRequest()构造函数来创建XMLHttpRequest对象，但在IE7之前的版本中，需要通过ActiveXObject()构造函数创建，可以通过下面的脚步实现兼容各种浏览器版本的创建方法。

Ajax代码 复制代码
  1. if(typeof(XMLHttpRequest)=='undefined'?&&?window.ActiveXObject){ ??
  2. ??funciton?XMLHttpRequest(){ ??
  3. ????var?xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; ??
  4. ????var?xml_request; ??
  5. ????for(var?i=0;i<xml_http_arr.length;i++){ ??
  6. ???????if(xml_request?=?new?ActiveXObject(xml_http_arr.length[i])) ??
  7. ????????break; ??
  8. ?????}??? ??
  9. ???return?xml_request; ??
  10. ???} ??
  11. } ??
  12. var?xml_http_request=new?XMLHttpRequest();??
if(typeof(XMLHttpRequest)=='undefined' && window.ActiveXObject){
  funciton XMLHttpRequest(){
    var xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    var xml_request;
    for(var i=0;i<xml_http_arr.length;i++){
       if(xml_request = new ActiveXObject(xml_http_arr.length[i]))
        break;
     }   
   return xml_request;
   }
}
var xml_http_request=new XMLHttpRequest();


由于不支持XMLHttpRequest()构造方法的浏览器(即IE7之前的版本)，通过自定义一个XMLHttpRequest()函数创建XMLHttpRequest对象，在该函数中通过ActiveXObject方法创建该对象。
? 3、 无论是IE早期版本，还是最新的IE7，以及Mozilla和Safari等浏览器，XMLHttpRequest对象的功能特性是相同的。均定义一下的属性和请求。
(1)、readyState属性
? 该属性是一个只读属性，表示当前HTTP请求状态，该属性值是一个0-4的整数，分别表示HTTP请求发送和接收的不同状态，该值在操作HTTP请求的过程中自动更新，各值含义如下:

  • 当创建一个XMLHttpRequest对象时，属性值为0.
  • 当已经调用open()方法对HTTP进行初始化，但是还未调用send()方法请求时，属性值为1，表示HTTP请求已打开。
  • 当已经调用了send()方法发送了请求，但还未接到服务器响应时，属性值为2，表示HTTP请求已发送。
  • 当以及那个接收到响应头，但响应内容还没有接收完时，属性值为3，表示正在接收响应内容。
  • 当所有的响应内容已被全部接收完毕时，属性值为4.


(2)、responseTest属性
该属性为只读字符串型属性，表示当前已经从服务器接收到的响应内容。
该属性内容不包括响应头，只包括响应体，因此，当readyState属性小于3时，该属性为空字符串，当readState属性为4时，该属性包含了服务器响应的完整内容。
(3)、responseXML属性
只读属性，该属性将响应内容解析为XML格式，并以document对象方式返回。返回的document对象可以通过DOM API进行处理。
只有在下列3个条件均成立时，该属性才不为空。

  • readyState属性为4.
  • 响应头包括"text/xml","application/xml"等以"/xml"结尾的content-type，表示响应内容的类型为XML。
  • 响应的内容是由正确的XML标记组成。


(4)、status属性
只读整数属性，表示由服务器返回的HTTP状态代码。属性值为3位的整数，0xx表示请求未初始化，1xx表示服务器接收到请求，需要进一步处理，2xx表示接收到请求，正在进行分析处理，3xx表示正在进一步处理，4xx表示请求包含错误，5xx表示执行有效请求出错，一些常用状态含义如下：100表示客户端必须继续发送请求，200表示请求成功，201表示已创建，202表示请求已接收，但处理未完成。204表示响应内容为空，205表示服务器完成了请求，必须重置当前已经浏览过的文件，304表示客户端已经执行了GET，但文件未变化，404表示not found错误，401表示请求授权失败，403表示请求不允许，413表示请求资源大于服务器允许的大小。
(5)、statusText属性
该属性是status属性的字符串形式，以字符串的形式返回HTTP的状态。
(6)、abort()方法
取消HTTP请求，将readState属性设置为0，并取消所有未完成的动作。
(7)、getAllResponseHeaders()方法。
以字符串形式返回未解析的HTTP响应头的全部内容。如果readyState属性小于3，饿该方法返回null，所有头部内容做为一个字符串返回，在该字符串中，一行对应于一个HTTP头的内容，每个头尾部用"\r\n"换行。
例如：
下面时getAllResponseHeaders()返回的某个请求的HTTP头内容。

Http代码 复制代码
  1. HTTP/1.1?200?OK? ??
  2. Date:?Mon,?12?Mar?2004?19:12:16?GMT? ??
  3. Server:?Apache/1.3.31?(Unix)?mod_throttle/3.1.2? ??
  4. Last-Modified:?Fri,?22?Sep?2004?14:16:18? ??
  5. ETag:?"dd7b6e-d29-39cb69b2"? ??
  6. Accept-Ranges:?bytes? ??
  7. Content-Length:?3369? ??
  8. Connection:?close? ??
  9. Content-Type:?text/html;charset=gb3212??
HTTP/1.1 200 OK 
Date: Mon, 12 Mar 2004 19:12:16 GMT 
Server: Apache/1.3.31 (Unix) mod_throttle/3.1.2 
Last-Modified: Fri, 22 Sep 2004 14:16:18 
ETag: "dd7b6e-d29-39cb69b2" 
Accept-Ranges: bytes 
Content-Length: 3369 
Connection: close 
Content-Type: text/html;charset=gb3212


(8)、getResponseHeader(header_name)方法
以字符串形式返回指定HTTP头的内容，参数header_name为要返回的HTTP头的名称。
例如：

Http代码 复制代码
  1. 返回"Content_Type"的内容 ??
  2. var?con_type=xml_http_request.getResponseHeader("Content_Type");?? 
返回"Content_Type"的内容
var con_type=xml_http_request.getResponseHeader("Content_Type");


(9)、open(method,url,asynchronous,usename,pwd)方法
该方法初始化HTTP请求，设置send方法需要的HTTP请求参数，并重置XMLHttpRequest对象。
[list]

  • 参数method表示请求的方式，可以使"GET","POST","HEAD"；
  • 参数url表示请求的页面URL地址，一般情况下，脚本采用同源安全策略，允许脚本访问的URL地址必须是与当前页面具有相同的主机名和端口。对URL地址的解析。以当前脚本所在文章的URL地址做为参照。例如：地址
    Http代码 复制代码
    1. “./http_test.php”??
    “./http_test.php”

    表示与当前文档位于同一路径下的http_test.php文件，符号“/”表示服务器文件跟目录，如果脚本所在页面为“http:www.cctv.com/news/index.html”，其域名为"www.cctv.com"，则url地址为：
    Http代码 复制代码
    1. “/finance/news_list.php”??
    “/finance/news_list.php”

    表示文件“http://www.cctv.com/finance/news_list.php”.
  • 参数asynchronous为布尔值，表示是否采用异步执行，当设置为false时，请求时同步的。资源是独立的。在同步情况下，当通过send()发出请求后，send()方法将等待服务器的响应直到所有响应为完全接收时才返回，总之用户等待时间漫长。而且用户不能进行其他操作，如果设置为true，请求异步，在异步情况下，当send()方法发送请求后立即返回，服务器在后台处理请求时，客户端仍然可以进行其他操作。这种情况下，客户端需要等待的时间只是send()方法执行的时间，而且这时间可以忽略不计。默认参数为true
  • username和pwd是可选的参数，表示访问目标URL的授权用户名和密码。当open()方法调用后，将属性readyState属性设置为3.
    open()方法使用如下：
    Javascript代码 复制代码
    1. xml_http_request.open("GET","/http_test.php","true");??
    xml_http_request.open("GET","/http_test.php","true");

    [/list]
    (10)、send(body)方法
    该方法发送HTTP请求，open()方法设置请求的参数，但不向服务器发送请求，需要通过send()方法向服务器发送请求。
    参数body表示请求体，是一个字符串或者document对象。如果不需要请求体，则该参数为null，对于post对象，该参数是要传送的数据。对于GET方法，该参数为NULL，大部分浏览器不允许省略该参数。
    在调用send()方法之前，必须调用open()方法设置请求参数，如果之前未调用open方法，将产生异常。
    send()方法发送请求的方式取决于open()方法中的asynchronous参数。当该参数设置为false时，send()方法发送请求后将等待服务器响应，直到所有响应内容被收到，readyState属性状态为4，send()方法才返回。在这个过程中，客户端无法进行其他操作。当open()方法设置异步方式时，send()方法发送请求后立即返回，服务器的响应将在后台中进行处理，在异步请求时，在服务器处理请求的过程中，并不影响客户端的其他操作。
    (11)、setRequestHeader(name,value)方法
    为请求设置指定头的内容。参数name为HTTP头的内容，名称中不包括空白、冒号、换行符；value为头的内容，不包括换行。
    该方法只能在readyState为1时，即在open()方法之后，send()方法之前进行调用。对于一些HTTP头，XMLRequest对象设置一个默认值，通过setRequestHeader()设置的值将添加咋默认值后面，以逗号隔开。
    下面的头由XMLHttpRequest自动设置，并不通过该方法设置：
    Host、Connection、Keep-Alive、Accept-Charset、Accept-Encoding、if-Modified-Since、if-Range 和Range、if-None-Match。

    • 转 http://shawnfree.iteye.com/blog/375455

      相关解决方案

    代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
    Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.