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));