AJAX 快速入门 ——ajax的两种请求方式

在我们了解了AJAX的基础 属性，事件，方法，以及AJAX的使用步骤后，现在说下关于 ajax 的主要两种请求方式：

1、使用 AJAX 发起 HTTP GET请求消息

// 1 创建 XHR 对象

var xhr = null;

// 2 绑定监听函数

xhr.onreadystatechange = function(){

if(xhr.readyState===4){ //响应消息接收完成

if(xhr.status===200){    //成功响应（参考常见的http请求响应消息的状态码）

// 接收到一个成功的响应消息

}else{

//接收到响应消息，但不是一个成功的响应

}

}

}

// 3 创建请求消息

xhr.open('GET','xx.php?key1=value1&key2=value2',true);

// 4 发送请求消息

xhr.send(null);

2、 使用 AJAX 发起HTTP POST请求消息

// 1 创建 XHR 对象

var xhr = null;

// 2 绑定监听函数

xhr.onreadystatechange=function(){

if(xhr.readySate===4){

if(xhr.status===200){

// 接收到一个成功的响应消息

}else{

//接收到响应消息，但不是一个成功的响应

}

}

}

// 3 创建请求消息

xhr.open('POST','xx.php',true);

// 4 设置请求头部

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') ;

// 5 发送请求消息

xhr.send('key1=value1&key2=value2');

*为什么GET 比 POST请求多了一步？

这是因为设置'Content-Type','application/x-www-form-urlencoded'是为了确保服务器知道实体中有参数变量;

请求消息的Content-Type头常用值：

text/plain : 客户端向服务器提交的请求主体是一些普通文本数据（未经编码）--很多web服务器会直接拒绝这样的请求数据；

application/x-www-form-urlencoded : 客户端向服务器提交的请求主体是经过了编码的文本数据--默认情况下，HTMLForm标签会把所有的表单数据经过编码之后在提交给服务器

multipart/form-data ： 客户端向服务器提交的请求主体中包含上传的文件

响应消息的Content-Type头常用值：

text/html   image/png     text/css application/javascript  ......