关于AJAX异步请求的那些事儿(2)

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

xhr.open("GET","XX.PHP?K1=V1$K2=V2",true);

xhr.send(null);

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

xhr.open("POST","XX.PHP",true);

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

xhr.send('k1=v1&k2=v2');

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

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

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

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

注意：HTTP协议规定：请求消息传递给服务器的数据中不能包含中文、特殊标点符号

3、使用AJAX接收服务器端返回的text响应

服务器端：header("Content-Type","text/plain");

客户端：console.log(xhr.responseText);

4、使用AJAX接收服务器端返回的HTML响应

服务器端：header("Content-Type","text/html");

客户端接收：document.getElementByxxx().innerHTML=xhr.responseText;

5、使用AJAX接收服务器返回的JavaScript响应

服务器端：header('Content-Type', 'application/javascript')

客户端接收：typeof( xhr.responseText ); //string eva(xhr.responseText ); //把string作为js来执行

6、使用AJAX接收服务器返回的xml响应

服务器端：header('Content-Type', 'application/xml');

客户端：XML DOM，用于处理XML文档

XMLHttpRequest DOMParser - 可以把一段XML字符串解析为一棵DOM树

7、使用AJAX接收服务器返回的json响应

JSON：原本是JS中创建的对象的“直接量”法，后来从JS中独立出来，作为一种字符串数据的表示法，被各种语言所支持。其作用于XML类似，但比XML更加轻量级、简洁、处理速度更快。

JSON格式表示字符串，有两种格式：

JSON对象字符串格式：'{ "k1":"v1", "k2": v2 }'

JSON数组字符串格式：'[ v1, v2, v3... ]'

示例：异步的加载新闻列表

服务器端：

header('Content-Type: application/json');

$arr = [ ];

echo json_encode( $arr ); //PHP数组=>JSON字符串

客户端：var jsObj = JSON.parse( xhr.responseText ); //把JSON字符串解析为JS数组/对象

8、jQuery封装的AJAX $.ajax()

使用方法：

$.ajax( {

type: 'GET/POST/PUT/DELETE',

url: 'xx.php',

data: 'k1=v1&k2=v2' | {k1:v1, k2:v2},

dataType: 'text/html/script/xml/json/jsonp',

beforeSend: fn,

success: fn,

error: fn,

complete: fn

} )

注意：

在jQuery提供的所有AJAX函数中，提交的数据可以有两种形式：

(1)HTTP协议规定的标准格式： 'k1=v1&k2=v2...'

(2)JS对象格式：{ k1: v1, k2:v2 } jQuery在发送此格式的数据之前会自动调用$.param()函数，将JS对象改为第一种格式。