原生态的AJAX

最新推荐文章于 2024-10-02 05:39:15 发布

Chrysler2015

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/holyknight-zld/archive/2012/07/17/ajax.html

版权

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 " οnclick= " Operate(); " />
85     </div>
86     </form>
87 </body>
88 </html>

转载于:https://www.cnblogs.com/holyknight-zld/archive/2012/07/17/ajax.html