用XMLHttpRequest模拟form提交

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

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

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

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

js 代码

 

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

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

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

js 代码

 

function sendRequest() {
var oForm = doucment.forms[0];
var sBody = getRequestBody(oForm); // 根据form元素中的子元素构造请求主体字符串
var oXMLHttp = zXMLHttp.createRequest(); // 取得 XMLHttp 对象

oXMLHttp.open("post",oForm.action,true);
// 注意下面利用XMLHttp对象对请求头Content-Type的设置
oXMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
oXMLHttp.onreadystatechange = function() {
if (oXMLHttp.readyState == 4) {
if (oXMLHttp.status == 200) {
saveResult(oXMLHttp.responseText);
}else {
saveResult("An error occurred: " + oXMLHttp.statusText);
}
}
}
oXMLHttp.send(sBody);
}

上面的函数有个要注意的地方，就是对请求头的设置！当表单从浏览器传送到服务器时，浏览器将会把请求的内容类型设置为“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 代码

function createXMLHttp(){
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if (window.ActiveXObject) {
        var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
        for (var i=0;i<aVersions.length;i++){
            try{
                var oXMLHttp = new ActiveXObject(aVersions[i]);
                return oXMLHttp;
            }catch(oError){
                //do nothing
            }
        }
    }
}

 

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

分享到：

异常处理与函数返回 | servlet2.3的过滤器

• 2006-11-26 16:31
• 浏览 5159
• 评论(0)
• 查看更多