用XMLHttpRequest模拟form提交

在使用XMLHttpRequest发送请求的时候，send()方法的调用是最后的一个重要步骤，对于GET请求，和POST请求，send()方法的使用是有差异的。

这个差异体现在send()方法中的参数。如果请求没有主体（比如GET请求一定是没有请求主体的），那么一定要使用send(null);的形式发送请求。

如果是POST请求，我们就需要把请求主体的字符串表示作为send()方法的参数！

一个例子如下，其中需要关注的焦点就是，生成“请求主体字符串”的Javascript通用方法：

js 代码

 

1. function getRequestBody(oForm) { // 参数oForm是对某个form对象的引用    
2. var aParams = new Array(); // 用来存储“名-值”对的数组    
3. for (var i = 0; i < oForm.elements.length; i++) {    
4. var sParam = encodeURIComponent(oForm.elements[i].name);    
5. // “名-值”对必须转换成URL编码格式，否则极有可能丢失数据，所    
6. //以调用了javascript内建的encodeURIComponent函数    
7. sParam += "=";    
8. sParam += encodeURIComponent(oForm.elements[i].value);    
9. aParams.push(sParam);    
10. }    
11. return aParams.join("&");    
12. }   
13.   

上面数组的应用，主要是为了避免生硬的多字符串连接，这对目前大多数浏览器来说都是一个代价比较高的操作哦。 是不是对客户端太好了？也许你会说，现在的客户端都是G单位的运算频率和内存容量，没必要闲置它们的计算能力呀，但问题不仅仅是这一方面，数组的 push() , join() 方法在这里的使用非常棒。

下面是发送POST请求的函数：

js 代码

 

1. function sendRequest() {    
2. var oForm = doucment.forms[0];    
3. var sBody = getRequestBody(oForm); // 根据form元素中的子元素构造请求主体字符串    
4. var oXMLHttp = zXMLHttp.createRequest(); // 取得 XMLHttp 对象    
5.   
6. oXMLHttp.open("post",oForm.action,true);    
7. // 注意下面利用XMLHttp对象对请求头Content-Type的设置    
8. oXMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
9. oXMLHttp.onreadystatechange = function() {    
10. if (oXMLHttp.readyState == 4) {    
11. if (oXMLHttp.status == 200) {    
12. saveResult(oXMLHttp.responseText);    
13. }else {    
14. saveResult("An error occurred: " + oXMLHttp.statusText);    
15. }    
16. }    
17. }    
18. oXMLHttp.send(sBody);    
19. }    

上面的函数有个要注意的地方，就是对请求头的设置！当表单从浏览器传送到服务器时，浏览器将会把请求的内容类型设置为“application/x-www-form-urlencoded”,大多数服务器都需要这种编码格式，才能按照它对接收到的POST数据进行正确的解析。因此通过XMLHttpRequest对象进行这样的一步设置是很重要的，结合最后一步 send() 方法发送请求主体，sendRequest() 函数就有效地模拟了浏览器的提交操作，服务器端程序也就能按预期正确地工作了。

注意，这里是为了模拟浏览器提交。如果是通过请求主体发送一个简单字符串，可以这样：
oXMLHttp.setRequestHeader("Content-Type","text/plain");
如果是要发送XML字符串，就应该：
oXMLHttp.setRequestHeader("Content-Type","text/xml");

zXMLHttp是一个js库文件，里面的createRequest()方法是这样实现的：

js 代码

1. function createXMLHttp(){   
2.     if (typeof XMLHttpRequest != "undefined"){   
3.         return new XMLHttpRequest();   
4.     }else if (window.ActiveXObject) {   
5.         var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];   
6.         for (var i=0;i<aVersions.length;i++){   
7.             try{   
8.                 var oXMLHttp = new ActiveXObject(aVersions[i]);   
9.                 return oXMLHttp;   
10.             }catch(oError){   
11.                 //do nothing           
12.             }   
13.         }   
14.     }   
15. }  

 

注意： 有些浏览器对typeof()运算符，可能返回 null，而不是“undefined”