> 编程开发 > AJAX相关 >

深入理解ajax系列第四篇：请求实例 2017-03-02 14:37　出处：清屏网　人气：　

前面的话

在使用ajax的过程中，常用的请求方式是GET和POST两种。本文将以实例的形式来详细说明这两种请求方式

GET

GET是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对于XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行

使用GET请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号(&)分隔

xhr.open("get","example.php?name1=value1&name2=value2",true);

下面这个函数可以辅助向现有URL的末尾添加查询字符串参数

function addURLParam(url,name,value){ url += (url.indexOf("?") == -1 ? "?" : "&"); url +=encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; }

这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL是否包含问号(以确定是否已经有参数存在)。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到URL的末尾。最后返回添加参数之后的URL

var url = 'test.php'; url = addURLParam(url,'name','aaa'); url = addURLParam(url,'data','bbb'); xhr.open('get',url,true); POST

使用频率仅次于GET的是POST请求，通常用于服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交，而GET请求传统上不是这样。POST请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入"post"，就可以初始化一个POST请求

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

发送POST请求的第二步就是向send()方法中传入某些数据。由于XHR最初的设计主要是为了处理XML，因此可以在此传入XML DOM文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送到服务器的字符串

默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，可以使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。POST数据的格式与查询字符串格式相同

xhr.open('post','example.php',true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data);

[注意]如果不设置Content-Type头部信息，那么发送给服务器的数据就不会出现在 $_POSR 超级全局变量中。这时候，要访问同样的数据，就必须借助 $HTTP_RAW_POST_DATA

GET对所发送信息的数量有限制，一般在2000个字符。与GET请求相比，POST请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可POST请求的两倍

【表单序列化】

随着Ajax的出现，表单序列化已经成为一种常见需求。在javascript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的

浏览器对表单字段的名称和值进行URL编码，使用和号(&)分隔；不发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type为"reset"和"button"的按钮；多选选择框中的每个选中的值单独一个条目；在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为"image"的input元素；select元素的值，就是选中的option元素的value特性的值。如果option元素没有value特性，则是option元素的文本值

在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。除此之外的其他上述规则都应该遵循

[注意]使用表单序列化与使用表单提交是有区别的。使用表单提交，响应会在新页面打开，且并不需要使用xhr对象。而ajax中的POST请求使用表单序列化，只是利用serialize()函数来构造数据。所以，这个表单中不需要提交按钮，否则会与表单提交相混淆

function serialize(form){ var parts = [], field = null, i, len, j, optLen, option, optValue; for (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 (j=0, optLen = field.options.length; j < optLen; j++){ option = field.options[j]; if (option.selected){ optValue = ""; if (option.hasAttribute){ optValue = (option.hasAttribute("value") ? option.value : option.text); } else { optValue = (option.attributes["value"].specified ? option.value : option.text); } parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); } } } break; : : : : //custom button break; : //checkbox if (!field.checked){ break; } /* falls through */ default: //don't include form fields without names if (field.name.length){ parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } } return parts.join("&"); } 实例