使用JavaScript的XMLHttpRequest发送POST、GET请求以及接收返回值

使用XMLHttpRequest对象分为4部完成:

1.创建XMLHttpRequest组建

2.设置回调函数

3.初始化XMLHttpRequest组建

4.发送请求

实例代码：

[javascript]  view plain copy print ?

1. var userName;    
2. var passWord;    
3. var xmlHttpRequest;    
4.     
5.     
6. //XmlHttpRequest对象    
7. function createXmlHttpRequest(){    
8.     if(window.ActiveXObject){ //如果是IE浏览器    
9.         return new ActiveXObject("Microsoft.XMLHTTP");    
10.     }else if(window.XMLHttpRequest){ //非IE浏览器    
11.         return new XMLHttpRequest();    
12.     }    
13. }    
14.     
15. function onLogin(){    
16.     userName = document.f1.username.value;    
17.     passWord = document.f1.password.value;      
18.         
19.     var url = "LoginServlet?username="+userName+"&password="+passWord+"";       
20.             
21.     //1.创建XMLHttpRequest组建    
22.     xmlHttpRequest = createXmlHttpRequest();    
23.         
24.     //2.设置回调函数    
25.     xmlHttpRequest.onreadystatechange = zswFun;    
26.         
27.     //3.初始化XMLHttpRequest组建    
28.     xmlHttpRequest.open("POST",url,true);    
29.         
30.     //4.发送请求    
31.     xmlHttpRequest.send(null);      
32. }       
33.     
34.     
35. //回调函数    
36. function zswFun(){    
37.     if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){    
38.         var b = xmlHttpRequest.responseText;    
39.         if(b == "true"){    
40.             alert("登录成功！");    
41.         }else{    
42.             alert("登录失败！");    
43.         }           
44.     }    
45. }  

================================================================================

[javascript]  view plain copy print ?

1. var xmlhttp;  
2. function verify1() {  
3.     var username = document.getElementById("username").value;  
4.     //确定浏览器  
5.     if(window.XMLHttpRequest) {  
6.         //针对FireFox、Mozillar、Opera、Safari、IE7、IE8  
7.         //创建XMLHttpRequest对象  
8.         xmlhttp = new XMLHttpRequest();  
9.         //修正某些浏览器的BUG  
10.         if(xmlhttp.overrideMimeType) {  
11.             xmlhttp.overrideMimeType("text/html");  
12.         }  
13.     }else if(window.ActiveXObject){  
14.         //针对IE5、IE5.5、IE6  
15.         //这两个为插件名称作为参数传递，为了创建ActiveXObject  
16.         var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
17.         for(var i=0;i>activeName.length();i++) {  
18.               try{  
19.                   //非别取出，如果创建成功则终止循环，如果失败则会抛出异常继续循环  
20.                   xmlhttp = new ActiveXObject(activeName[i]);  
21.                   break;  
22.               }catch(e){  
23.               }  
24.         }  
25.     }  
26.     //确定XMLHttpRequest是否创建成功  
27.     /*if(!xmlhttp) { 
28.         alert("XMLHttpRequest创建失败!"); 
29.         return; 
30.     }else { 
31.         alert("XMLHttpRequest创建成功!"+xmlhttp); 
32.     }*/  
33.     //注册回调函数  
34.     xmlhttp.onreadystatechange=callback;  
35.     url = "classisservlet?name="+username;  
36.     //设置连接信息  
37.     //1.是http请求的方式  
38.     //2.是服务器的地址  
39.     //3.是采用同步还是异步，true为异步  
40.     //xmlhttp.open("GET",url,true);  
41.     //post请求与get请求的区别  
42.     //第一个参数设置成post第二个只写url地址，第三个不变  
43.     xmlhttp.open("POST","classisservlet",true);  
44.     //post请求要自己设置请求头  
45.    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
46.     //发送数据，开始与服务器进行交互  
47.     //post发送请求  
48.     xmlhttp.send("name="+username);  
49. }  
50. function callback() {  
51.     //接收响应数据  
52.     //判断对象状态是否交互完成，如果为4则交互完成  
53.     if(xmlhttp.readyState == 4) {  
54.          //判断对象状态是否交互成功,如果成功则为200  
55.         if(xmlhttp.status == 200) {  
56.             //接收数据,得到服务器输出的纯文本数据  
57.             var response = xmlhttp.responseText;  
58.             //得到div的节点将数据显示在div上  
59.             var divresult = document.getElementById("result");  
60.             divresult.innerHTML = response;  
61.         }  
62.     }  
63. }   

[javascript]  view plain copy print ?

1. <span style="color:#ffffff;"></span>  

[plain]  view plain copy print ?

1.   

原文链接地址： http://www.cnblogs.com/hwx0807/archive/2011/06/28/2092205.html