XMLHttpRequest对象

•接着介绍XMLHttpRequest对象，因为Ajax应用程序的中心就是它。同时，对于许多数网页开发的实际问题中，它也是最广泛适用的解决方案。
 
•我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误，例如当试图让页面在所有服务器上都能运行时遇到的一些问题。
 
•XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的，随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。
 
•XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
 
•XMLHttpRequest对象的作用在于，允许用脚本程序通过HTTP连接到服务器，而不是通过HTTP请求响应模型与服务器通信。
 
•简而言之：它可以异步从服务器端获取text、xml 、JSON三种类型的数据
 

创建XMLHttpRequest对象

 

•同步使用XMLHttpRequest对象
           按照下面模式，可以同步地XMLHttpRequest对象：
 
           1.创建对象； - new  (叫助手过来)
           2.创建请求； - open (告诉他要去做的事情)
           3.发送请求； - send (去吧)
 
•一、先来创建XMLHttpRequest对象
      –在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
             var xhr = new XMLHttpRequest();
     –在IE5/6中代码为：
             var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
 
注意，JavaScript区分大小写。
 
 1 function createXmlHttp() {//创建xhr对象
 2                 var xhobj = false;
 3                 try {
 4                     xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
 5                 } catch (e) {
 6                     try {
 7                         xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
 8                     } catch (e2) {
 9                         xhobj = false;
10                     }
11                 }
12                 if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
13                     xhobj = new XMLHttpRequest();
14                 }
15                 return xhobj;
16             }

 

XMLHttpRequest对象的方法
方法
说明
abort
取消请求
open
需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求
send
发送请求到服务器
setRequestHeader
添加自定义HTTP头到请求（post传参时使用）
getAllResponseHeaders
获取HTTP响应头的整个列表
getResponseHeader
仅获取指定的HTTP响应头

 

 

 

•二、为XMLHttpRequest对象设置请求参数
        1.设置参数：
             xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
        2.POST方式：
             xhr.open("POST", "GetAreasByAjax.aspx", true);//第二个参数设置请求的页面，第三个参数设置是否异步
             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       3.设置浏览器不使用缓存
             xhr.setRequestHeader("If-Modified-Since", "0");
•三、发送请求：(分别对应GET和POST)
           xhr.send(null);//GET方式
           xhr.send("isAjax=1&na=123");//POST方式
 

 

请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？
 
 
XMLHttpRequest对象常用属性
属性
说明
onreadystatechange
返回或设置异步请求的事件处理程序
readyState
返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载
responseText
使用字符串返回HTTP响应
responseXML
使用XML DOM对象返回HTTP响应
Status
返回HTTP状态码
 
•readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
   –0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
   –1：已打开。对象已经创建并初始化，但还未调用send方法；
   –2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
   –3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
   –4：已加载。所有数据接收完毕
 
 
异步使用XMLHttpRequest对象：
 
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
 
使用模式应该是：
     1.创建该对象；-new
     2.设置readystatechange事件触发一个回调函数; -onreadystatechagne
     3.打开请求；-open
     4.发送请求；-send
     5.在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
        *  如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
        * 如果已经准备好，就继续往下执行；
 
 

 编写回调函数

 

1.在xhr.send之前添加设置回调函数代码：
    xhr.onreadystatechange = watching;
2.回调函数
   function watching() {
        if (xhr.readyState >= 4) {
           if (xhr.status == 200) {
               var msg = xhr.responseText; //服务器返回的字符串
            } else alert("服务器错误!" + ajaxH.status);
         }
   }
 
 
注意：页面提交时，要确定数据是发往哪个页面的,数据提交的页面是由open()方法的第二个参数指定的。
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <title></title>
 8     <script type="text/javascript">
 9         function createXmlHttp() {//创建xhr对象
10             var xhobj = false;
11             try {
12                 xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
13             } catch (e) {
14                 try {
15                     xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
16                 } catch (e2) {
17                     xhobj = false;
18                 }
19             }
20             if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
21                 xhobj = new XMLHttpRequest();
22             }
23             return xhobj;
24         }
25         var xhobj = false;
26         window.onload = function () { xhobj = createXmlHttp(); }
27 
28         //调用
29         function DoAjax() {
30             xhobj.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
31             //xhobj.setRequestHeader("If-Modified-Since", "0");
32             xhobj.onreadystatechange = watching;
33             xhobj.send(null); //GET方式
34             
35         } 
36 
37         function watching() {
38             if (xhobj.readyState >= 4) {
39                 if (xhobj.status == 200) {
40 
41                     var msg = xhobj.responseText; //服务器返回的字符串
42                     document.getElementById("divMsg").innerHTML =msg;
43                 }
44                 else
45                     document.getElementById("divMsg").innerHTML = "服务器错误!" + xhobj.status;
46             }
47         }
48     </script>
49 </head>
50 <body>
51     <form id="form1" runat="server" action="GetAreasByAjax.ashx">
52     <input type="button" value="调用Ajax" onclick="DoAjax();" /> 
53      <div id="divMsg">
54      
55     </div>
56     </form>
57     
58 </body>
59 </html>
View Code 
 1 <%@ WebHandler Language="C#" Class="GetAreasByAjax" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class GetAreasByAjax : IHttpHandler {
 7     
 8     public void ProcessRequest (HttpContext context) {
 9         //context.Response.ContentType = "text/plain";
10         //context.Response.Write("Hello World");
11         string isAjax = context.Request.QueryString["isAjax"];
12         if (!string.IsNullOrEmpty(isAjax))
13         {
14             context.Response.Write("我要好好学习Asp.Net!....."); 
15         }
16         else
17             context.Response.Write("我bu要好好学习Asp.Net!");
18     }
19  
20     public bool IsReusable {
21         get {
22             return false;
23         }
24     }
25 
26 }
View Code

 

posted @ 2013-04-11 10:09  Big.Eagle  阅读(246)  评论(0)    收藏  举报