浅析Ajax：GET与POST

Asynchronous Javascript And XML

异步的JavaScript和XML；

作用：与服务端交互，读取文件

实现所使用到的类：

XMLHttpRequest：不兼容IE5、IE6；

ActiveXObject：兼容IE5、IE6；

客户端服务端通信是通过http这个协议进行通信的，http有两个常用的方法（GET/POST）：

1.GET : 参数传到URL里面；

使用?把接口地址跟参数隔开；多个参数使用&隔开。

2.POST：数据传输到body体里面；

传输的数据相对安全；传输的数据没有大小的限制。

（不常用）

3.DELETE

4.PUT

JS中以GET方式发送一个请求；

var req = new XMLHttpRequest();

req.open("GET","xxx");

req.send();

req.onreadystatechange = function () {

alert(this.readyState);

};

JS中接受服务端发到客户端里面的内容

XMLHttpRequest > response 回应

同步：一行行代码执行，遇到比较耗时的任务，会等耗时任务执行完毕后

继续执行（有耗时的任务程序会卡住，直到这个任务执行完成）；

XMLHttpRequest 默认是异步的；

异步：

open三个参数的意义：XMLHttpRequest ->open（http的请求方

法，请求的地址，同步还是异步）

HTTP协议传输内容

两个方法：

GET：传输的参数是直接拼接到URL中的，与HTML直接传值一样，

需要使用？来隔开传递的参数，如果有多个参数，使用&隔

开每一个参数；

GET特点：

GET参数放到URL里面 -> 不能传比较大的参数（因为URL的大

小有限制）； 参数是暴露在URL里面的；

GET传输速度要快一些 -> 只要不涉及到传大文件、密码、比较

重要的，都是用的GET；

POST：传输的参数放到body体中，传输的大小也没有限制；

要想跟服务端交互，得知道跟谁交互，需要知道的内容

1.请求数据的位置是哪儿

主机地址(IP或者域名)

需要指定具体文件的位置

2.需要使用哪一个HTTP 的方法

服务端提供的API要求使用哪个就使用哪个；

3.要传输的参数；

GET:拼接到URL，使用？拼接、使用&分隔

POST:请求参数是在http标题的一个不同部分（名为entity body）传

输的，这一部分用来传输表单信息，因此必须将

Content-type设置为:application/x-www-form- urlencoded。

post设计用来支持web窗体上的用户字段，

其参数也是作为key/value对传输。

但是：它不支持复杂数据类型，

因为post没有定义传输数据结构 的语义和规则。

部分示例代码：

//在不知道值具体是什么类型的时候，

// 可以通过null赋值；

var result = null;

var request = new XMLHttpRequest();

//设置请求

//设置请求的http的方法GET

//设置请求的服务器位置：http://route.showapi.com/255-1

request.open("GET","http://route.showapi.com/255-1");

//request.send();

//监听客户端传输数据到服务端的传输状态

request.onreadystatechange = function () {

//readyState：读取传输的状态

console.log(this.readyState);

if(this.readyState ===XMLHttpRequest.DONE){

//response http的回应，里面有可能有咱们需要的值

alert("交互完成");

result = request.response;

}

};

request.send();

console.log(result);

-------------------------------------------------------------------------------------------------------------------