AjaxXMLHttpRequest

1. // 定义一个全局的XMLHttpRequest对象  
2. var xmlHttpRequest;  
3.   
4. function verify() {  
5.   
6.     var userName = document.getElementById("userName").value;  
7.   
8.     // 创建XMLHttpRequst对象  
9.     // 需要这对IE核其他类型的浏览器建立这个对象的不同方法写不同的代码  
10.     if (window.XMLHttpRequest) {  
11.         // 针对FireFox,Mozilla,Opera,Safari,IE7,IE8  
12.         xmlHttpRequest = new XMLHttpRequest();  
13.         // 针对某些特定版本的Mozilla浏览器的BUG进行修正  
14.         try {  
15.             if (xmlHttpRequest.overrideMimeType()) {  
16.                 xmlHttpRequest.overrideMimeType("text/xml");  
17.             }  
18.         } catch (e) {  
19.         }  
20.     } else if (window.ActiveXObject) {  
21.         // 针对IE6,IE5.5,IE5  
22.         // 两个可以用于创建XMLHTTPRquest对象的控件名称,保存在一个js的数组中  
23.         // 排在前面的版本比价新  
24.         var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];  
25.         for (var i = 0; i < activexName.length; i++) {  
26.             try {  
27.                 // 取出一个控件名进行创建,如果创建成功就终止循环  
28.                 // 如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建  
29.                 xmlHttpRequest = new ActiveXObject(activexName[i]);  
30.                 break;  
31.             } catch (e) {  
32.             }  
33.         }  
34.     }  
35.     // 确认XMLHttpReques对象创建成功  
36.     if (!xmlHttpRequest) {  
37.         alert("XMLHttpRequest对象创建失败!!");  
38.         return;  
39.     } else {  
40.         // 2.注册回调函数  
41.         // 注册毁掉函数时,只需要函数名不需要加括号  
42.         // 我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的  
43.         xmlHttpRequest.onreadystatechange = callback;  
44.   
45.         // 3.设置连接信息  
46.         // 第一个参数表示http的请求方式,支持所有的饿http的请求方式,主要使用get核post  
47.         // 第二个参数表示请求的url路径  
48.         // 第三个参数表示采用同步还是异步,true表示异步  
49.           
50.         //xmlHttpRequest.open("GET", "AJAX?name=" + userName, true);  
51.           
52.         //POST方式请求的代码  
53.         xmlHttpRequest.open("POST","AJAX",true);  
54.           
55.         //POST方法需要自己设置http请求头  
56.         xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
57.           
58.         // 4发送数据,开始与服务器端交互  
59.         // 同步方式下,send这句话会在服务器端数据回来之后执行  
60.         // 异步方式下,send这句话会立即完成执行  
61.           
62.         //get方式的send方法参数为空  
63.         //xmlHttpRequest.send(null);  
64.           
65.         //post方式的send方法参数为你要传递的url参数  
66.         xmlHttpRequest.send("name="+userName);  
67.     }  
68.   
69. }  
70. // 5.回调函数  
71. function callback() {  
72.     // 判断对象的状态是否交互完成  
73.     if (xmlHttpRequest.readyState == 4) {  
74.         // 判读http的交互是否成功  
75.         if (xmlHttpRequest.status == 200) {  
76.             // 获取服务器端的返回数据  
77.             var responseText = xmlHttpRequest.responseText;  
78.             // 将数据显示在页面上  
79.             // 通过dom方式找到dom对应的节点  
80.             var divResult = document.getElementById("result");  
81.             divResult.innerHTML = responseText;  
82.         }  
83.     }  
84. }