原生态的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>
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>
