1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Ajax</title>
6
7 <script language="javascript">
8 //<script language="javascript" type="application/javascript"> // 如果上方的代码不能够完整实现就使用这个
9
10 //IE浏览器实例化方式
11 //var h = new ActiveXObject("Msxml2.XMLHTTP");
12
13 //var p = new ActiveXObject("Microsoft.XMLHTTP");
14
15
16 //非IE浏览器
17 //var f = new XMLHttpRequest();
18
19 //alert(p.getAllResponseHeaders());
20
21 var hx = false;
22 //定义函数
23 function test()
24 {
25 //所有浏览器通用实例化代码
26 if(window.XMLHttpRequest) //非IE IE7版本及以上 都支持非ie形式
27 {
28 hx = new XMLHttpRequest(); //如果是非IE浏览器 那么就会实例化
29 alert("qqq"); //如果是实例化成功上方的，那么就会输出这句话
30 }
31 else if(window.ActiveXObject) //IE
32 {
33 try{
34 hx = new ActiveXObject("Msxml2.XMLHTTP"); //实例化
35 alert("qqq2"); //如果实例化成功上方的 那么就会输出这句话
36 }
37 catch(e)
38 {
39 alert(e);
40 try
41 {
42 hx = new ActiveXObject("Microsoft.XMLHTTP"); //实例化
43 alert("qqq3"); //如果实例化成功上方的 那么就会输出这句话
44 }
45 catch(e)
46 {
47 alert(e);
48 }
49 }
50 }
51
52 //测试创建XMLHttpRequest是否成功
53 if(!hx)
54 {
55 alert("创建XMLHttpRequest失败");
56 }
57 else
58 {
59 alert("创建XMLHttpRequest成功");
60 }
61
62
63 /*
64 //异步请求的请求类型有两种方式 一种是 get 另一种是 post 两种方法都有各自的方式
65
66
67 //get方式
68
69 // 1 设置异步请求的url等信息
70 hx.open("GET","ajaxtest?userid=abc",true); //（"请求类型 GET/POST",URL,是否异步 true/false）
71 // 2 设置回调函数 事件处理器
72 hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange
73 //调用请求的发送
74 hx.send(null); //在需要请求传送参数时设置异步请求时用 post 方式
75
76 }
77
78 //回调函数
79 function getResult()
80 {
81 //
82 //alert("readyState = "+hx.readyState);
83 if(hx.readyState == 4)
84 {
85 if(hx.status == 200)
86 {
87 alert("回调信息 = " + hx.responseText); //返回的值
88 }
89 else
90 {
91 alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText);
92 }
93 }
94 }
95
96
97
98 */
99
100
101
102 //post方式
103
104 // 1 设置异步请求的url等信息
105 hx.open("POST","ajaxtest",true); //（"请求类型 GET/POST",URL,是否异步 true/false）
106 // 2 设置回调函数 事件处理器
107 hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange
108
109 //调用请求的发送
110 //在需要请求传送参数时设置异步请求时用 post 方式
111 hx.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
112 hx.send("userid=abc");
113
114 }
115 //回调函数
116 function getResult()
117 {
118 //
119 //alert("readyState = "+hx.readyState);
120 if(hx.readyState == 4)
121 {
122 if(hx.status == 200)
123 {
124 alert("回调信息 = " + hx.responseText); //返回的值
125 }
126 else
127 {
128 alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText);
129 }
130 }
131 }
132
133 //alert("Server = " + hx.getAllResponseHeaders("Server"));
134
135 </script>
136
137 </head>
138
139 <body>
140
141 <input type="text" width="30" onchange="test()" />
142
143 </body>
144 </html>
