随笔- 19 文章- 0 评论- 358 阅读- 17万

原生态的AJAX

1     <script type="text/javascript">
2         var xmlhttprequest;
3         function GetXmlHttpRequest() {
4             if (window.ActiveXObject) {
5                 try
6                 {
7                     //适用于IE5 IE6
8                     xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
9                 }
10                 catch(e)
11                 {
12                     //适用于IE7 以上版本
13                     xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
14                 }
15             }
16             if(window.XMLHttpRequest)
17             {
18                    //适用于所有的浏览器
19                    xmlhttprequest=new XMLHttpRequest();
20             }
21             else
22             {
23                 alert("对不起，您的浏览器不适用于AJAX");
24             }
25         }
26
27         //执行操作
28         function Operate() {
29         {
30
31             //先获取xmlhttprequest
32             GetXmlHttpRequest();
33
34             //POST传值
35
36             //open方法（指定数据发送方式，处理页面，是否异步）创建一个新的http请求，并指定此请求的方法、URL以及验证等信息
37             xmlhttprequest.open("POST", "DoOperate.ashx",true);
38
39             //setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
40             xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
41
42             //状态发生事件（onreadyStateChange事件是在readyState属性发生改变时触发）
43             xmlhttprequest.onreadystatechange=WatchChange;
44
45             //发送数据
46             xmlhttprequest.send("id=1001&name=holyknihgt");
47
48             //GET传值【如果是POST传值需要设定RequestHeader，而Get传值不需要】
49             //xmlhttprequest.open("Get", "DoOperate.ashx",true);
50
51             //xmlhttprequest.send(null);
52         }
53
54         //状态监听
55         function WatchChange()
56         {
57             //readyState
58             //0:send方法还没有被调用
59             //1:已经调用了send方法，请求还在处理
60             //2:send方法已完成整个应答已接收
61             //3:正在解析应答
62             //4:应答解析完成
63
64             //status
65             //200:表示交互成功
66             //404：NOT Found
67             //500：服务器内部错误
68             if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
69             {
70                 //或许响应值
71                 var result = xmlhttprequest.responseText;
72                 //将响应值以‘，’分割
73                 result = result.split(',');
74                 //给id为resultMsg的控件赋值
75                 document.getElementById("resultMsg").innerHTML = "ID:"+result[0]+"  Name:"+result[1];
76             }
77         }
78     </script>
79 </head>
80 <body>
81     <form id="form1" runat="server">
82     <div>
83         <div id="resultMsg"></div>
84         <input type="button" value="调用AJAX" onclick="Operate();" />
85     </div>
86     </form>
87 </body>
88 </html>