第十二章：第43节JavaScript页面无刷新交互——ajax请求open方法详细介绍
更新于：2017-11-27 19:56:53
通过上节内容的介绍，ajax的使用我们简单了解了一些。楠神继续做详细地介绍：
ajax请求方式
ajax对象访问服务器使用open方法
ajax对象.open(get/post, 请求地址[,异步同步请求]);
它的第一个参数是请求方式：取值get or post。这里的get、post和表单里的get、post请求方式可以理解为一样的。
1）两者的不同
① 给服务器传递数据量，get最多是2k，post原则没有限制，php.ini对其限制为8M。
② 安全方面，post传递数据较安全。
③ 传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数
http://网址/index.php?name=tom&age=23&addr=beijing
红色部分就是请求字符串，就是一些“名-值”对，中间使用&符号连接。
post方式是把form表单的数据给请求出来以xml形式传递给服务器
2）ajax之get方式请求
上节做的示例就是用的get方式请求，请求传递的数据都在URL里，我们都很熟悉了，没什么要特别强调了。
备注：
在php里可以用函数 urlencode()/urldecode()对特殊符号（如&、=）进行编码、反编码处理
(url_encode()可以把中文转变为浏览器可以识别的信息。转变之后的信息具体为%号后接两个十六进制数)
在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。
3）ajax之post方式请求
用post方式请求，需要用send方法传递post数据，具体怎么操作呢？
我们把二级联动示例ajax对象open方法改成post请求方式，send方法里传入请求的数据。
看看能否成功：
结果是没有成功，send方法根本没有把数据传递到服务器，这是为什么呢？
原因：
在普通的HTML表单中，数据发送格式是 application/x-www-form-urlencoded ，在XForms的世界中，该信息是以 XML 格式数据发送的。
所以，我们在用post方式请求时，需要多操作一步：
ajax对象.setRequestHeader("Content-type","application/x-www-form-urlencoded");
这样ajax对象post请求方式就成功了。
同步、异步
open方法的第三个参数取值布尔值，意思是同步请求（false）还是异步请求（true）。默认是异步请求。
ajax对象.open(请求方式，请求地址，同步false/[异步true]);
有关同步、异步，楠神曾在第四章43节做过详细的解释了。
ajax是可以与服务器进行(异步或同步)交互的技术之一。
异步：同一个时间点允许执行多个进程。
同步：同一个时间点只允许执行一个进程。
还是通过二级联动的示例感受下同步与异步的区别：
1）在地区控制器getCitys方法中（14行代码）睡眠3秒钟。
2）在swap函数里，请求完ajax后面加上一段输出的代码（43行）。
看演示结果：
① 当是同步请求时 xhr.open("post",'/?a=getCitys',false);
选择“海南”，页面立马停顿无反应（无法做任何操作）。稍等3秒钟，服务器返回来数据后，页面才正常显示：
② 当是异步请求时 xhr.open("post",'/?a=getCitys');
可看出，虽然海南省的地级市还没有返回，但不影响“当前被选择的省ID号为：9”正常输出。
具体的效果需要大家亲自做测试。
显然异步请求要比同步请求好，前端页面不会被服务器影响。
什么时候使用同步请求？
ajax绝大多数情况下进行异步请求，但是有的时候也要使用“同步请求”(其不能被取代)。例如页面有两部分内容，一前一后，ajax请求和正常的html内容输出，如果html的输出内容包括ajax请求的内容，就需要使得ajax请求完成了再进行html内容的输出，这样就要设置两者一前一后调用(而非同时调用)，此时要使用同步请求。