Ajax + JSON

HTTP状态码
1XX：请求已接收，正在处理；
2XX：请求接受成功，处理完成，成功返回：200即ok；
3XX：请求重定向；即请求没有成功，客户须进一步操作；
4XX：客户端错误：400有语法错误不能理解，401请求未授权，403拒绝提供服务，404未找到改地址；
5XX：服务器错误：500服务器发生未知错误，503服务器端当前不能处理；

1.3. XMLHttpRequest对象

1.3.1. 实例化一个XHR对象：

 
 
  
  
 
 
var request = new XMLHttpRequest();

1.3.2. 判断是否支持XHR对象：

 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
var request;if (window.XMLHttpRequest){ request = new XMLHttpRequest(); //IE 7+...}else{ request = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6,IE 5}

1.3.3.`open()`方法：

 
 
  
  
 
 
open(method,url,async)

502

method

502

url

502

async

1.3.4.`setRequestHeader()`方法：

 
 
  
  
 
 
setRequestHeader("Content-type": "application/x-www-form-urlencode")

502

方法

1.3.5.`send()`方法：

 
 
  
  
 
 
send(string)

502

string

1.3.6. 属性值：

A`readyState`

0：请求未初始化，open未被调用；
1：服务器连接已建立，open已调用；
2：请求已接收，已接到头信息；
3：请求处理中，已接到响应主体；
4：请求已完成，响应已就绪；

B`status`：以数字形式返回HTTP状态码；

C`statusText`：以文本形式返回HTTP状态码；

D`getAllResponseHeader()`：获取所有的响应头；

E`getResponseHeader()`：查询响应中的某个字段的值；

F`responseText`：获取字符形式的相应数据

G`responseXML`：获取XML形式的相应数据

1.4. jQuery的Ajax应用

参考：jQuery：Ajax应用

1.4.1.`ajax()`加载服务器数据

该法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值：
语法：jQuery.ajax([settings])或$.ajax([settings])

参数settings为发送ajax请求时的配置对象，在该对象中：
url：发送请求的地址；
data：对象，为请求时传递的数据；
dataType：服务器返回的数据类型，一般可设置为json；
type：发送数据请求的方式，默认为get；
success：请求成功时执行的的回调函数；
error：请求失败时调用的函数；

1.4.2. 解析JSON

eval('('+jsondata+')')：不考虑JSON是否合法，不识别恶意代码而直接执行，慎用；
JSON.parse(jsondata)：相比eval()更加友好，会校检json数据，若不合理不予解析；

JSON在线校验

1.4.3.`load()`异步请求数据

通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中：
语法：load(url,[data],[callback])

　参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

1.4.4.`getJSON()`异步加载JSON数据

通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中：
语法：jQuery.getJSON(url,[callback])或$.getJSON(url,[callback])

url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

1.4.5.`getScript()`异步加载并执行JS文件

异步请求并执行服务器中的JavaScript文件：
语法：jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

1.4.6.`get()`以GET方式从服务器获取数据

采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据：
语法：$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

1.4.7.`post()`以POST方式从服务器发送数据

向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面：
语法：$.post(url,[callback])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

1.4.8.`serialize()`序列化表单元素值

将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求：
语法：$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

1.4.9.`ajaxSetup()`设置全局Ajax默认选项

设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值：
语法：jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

1.4.10.`ajaxStart()`和`ajaxStop()`绑定Ajax事件

ajaxStart()用于在Ajax请求发出前触发函数，ajaxStop()用于在Ajax请求完成后触发函数：
语法：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

1.5. 跨域处理

对一个URL——
协议：http://
子域名：www.
主域名：xxx.com
端口号：8080 (默认:80可省略)
请求资源地址：/xxx/xxx
以上一个不同即为跨域。

方法一：使用代理

在后台调用他域的服务，然后传回前端，代理方法属于后台方法。

方法二：使用JSONP

只针对GET，不支持POST；
在页面中设置：

 
 
  
  
  
  
  
  
  
  
  
  
  
  
 
 
<script>function jsonp(json){ ...}</script><script src="他域url/jsonp.js"></script>

502

datatype:json

datatype:jsonp

502

添加

jsonp:自定义参数名称

502

$jsonp = $_GET["自定义参数名称"];

方法三：使用XMLHttpRequest Level2 (H5专有)

需要支持XmlHttpRequest level2的浏览器；
在服务器端进行改造：

 
 
  
  
  
  
 
 
header("Access-Control-Allow-Origin:*");//权限所有都可以header("Access-Control-Allow-Methods:POST，GET");

2. JSON

2.1. 定义

JSON (JavaScript Object Notation)，即JS对象表示法，为轻量级数据交换格式；其数据类型包括：标量(scalar，字符串或数字)、序列(sequence，若干个并列数据，数组或列表)、映射(mapping，又名散列hash、字典dictionary，键值对）；

2.2. 四大基本规则

,

:

{}

[]

原文链接：https://www.f2er.com/ajax/161839.html

1. Ajax

1.1. 简介

1.2. HTTP基础

1.2.0 HTTP简介

1.2.1 HTTP请求步骤

1.2.2. HTTP请求

1.2.3. HTTP方法

1.2.4. HTTP响应

1.3. XMLHttpRequest对象

1.3.1. 实例化一个XHR对象：

1.3.2. 判断是否支持XHR对象：

1.3.3.open()方法：

1.3.4.setRequestHeader()方法：

1.3.5.send()方法：

1.3.6. 属性值：

AreadyState

Bstatus：以数字形式返回HTTP状态码；

CstatusText：以文本形式返回HTTP状态码；

DgetAllResponseHeader()：获取所有的响应头；

EgetResponseHeader()：查询响应中的某个字段的值；

FresponseText：获取字符形式的相应数据

GresponseXML：获取XML形式的相应数据

1.4. jQuery的Ajax应用

1.4.1.ajax()加载服务器数据

1.4.2. 解析JSON

1.4.3.load()异步请求数据

1.4.4.getJSON()异步加载JSON数据

1.4.5.getScript()异步加载并执行JS文件

1.4.6.get()以GET方式从服务器获取数据

1.4.7.post()以POST方式从服务器发送数据

1.4.8.serialize()序列化表单元素值

1.4.9.ajaxSetup()设置全局Ajax默认选项

1.4.10.ajaxStart()和ajaxStop()绑定Ajax事件