ajax - GET / POST 请求

GET

对于XHR 而言，位于传入 open（）方法的URL末尾的查询字符串必须经过正确编码。

查询字符串中每个参数的名称和值必须使用 encodeURIComponet（）进行编码，然后才能放到URL的末尾。所有名-值对必须有“&”分隔。

例子：
xhr.open("get","example.php?name1=value1&name2=value3",true);
下面这个函数可以辅助向现有URL的末尾添加查询字符串参数：

//向现有URL的末尾查询字符串参数：
function addURLParam(url,name,value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
}

//使用上述函数
var url = "example.php";
//添加参数
url = addURLParam(url,"name","Nicholas");
url = addURLParam(url,"book","Professional Javascript!");

xhr.open("get",url,false);
xhr.send(null);

POST

post请求应该把数据作为请求的主体提交。

post请求的主题可以包含数据,而且格式不限。

首先,open时,参数部分设为"post"。

xml.open("post","example.php",true);

然后,向send()方法中传入一些数据。可以传入XML DOM文档，传入的文档经序列化后作为作为请求主体被提交到服务器。当然，也可以传入字符串。

注意：默认情况下，服务器对post请求和提交web表单请求并不会一视同仁。 所以，服务器端必须有程序读取发送过来的原始数据，并从中解析处有用的部分。

不过，我们可以使用XHR对象来模拟表单提交：
首先将Content-Type 头部信息设置为 application/x-www-from-urlencoded,也就是表单提交时的默认内容类型。
然后,可以适当地创建一个字符串(Post数据的格式与查询字符串格式相同。 如果需要对表单中的数据进行序列化,然后再通过XHR发送到服务器，可以使用 serialize（）函数来创建这个字符串）。

例子：

function serialize(form) {
    var parts = [],field = null,i,len,j,optLen,option,optValue;

    for (var i = 0,len = form.elements.length; i < len; i++) {
        field = form.elements[i];

        switch (field.type) {
            case "select-one":
            case "select-multiple":

                if (field.name.length) {
                    for (var j = 0,optLen = field.options.length; j < optLen; j++) {
                        option = field.options[j];
                        if (option.selected) {
                            optValue = "";
                            if (option.hasAttributes) {
                                optValue = ((option.hasAttributes("value")) ? option.value : option.text);
                            } else {
                                optValue = (option.attributes("value").specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;

            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;

            case "radio":
            case "checkbox":
                if (!field.checked) {
                    break;
                }
            //这里没有break
            default:
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    };
    return parts.join("&");
}

//===================================================================

function submitData() {
    var xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful:" + xhr.status);
            }
        }
    }
}


xhr.open("post","url",true);
xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

FormData

鉴于WEB应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2为此定义了FormData 类型。

下面的代码创建了一个FormData对象，并向其中添加了一些数据。

var data = new FormData();
data.append("name","Nicholas");

这个append()方法接收两个参数：键和值,分别对象表单字段中的名字和值。 可以像其添加多个键值对。或者通过向FormData构造函数传入表单元素,传入键值对。

var data = new FormData(document.forms[0]);

使用 FormData 的方便之处在于 XMLHttpRequest 对象可以自动识别传入的数据是FormData 的实例，并配置适当的头部信息，即不需要手动配置头信息。

function submitData() {
    var xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful:" + xhr.status);
            }
        }
    }
}

xhr.open("post",true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!