ajax - GET / POST 请求

前端之家收集整理的这篇文章主要介绍了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));

猜你在找的Ajax相关文章