关于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对象改为第一种格式。

佳物不独来,万物同相携。
原文地址:https://www.cnblogs.com/rongrongtu/p/4988340.html