Ajax + JSON

前端 JavaScript

1. Ajax

1.1. 简介

Ajax (Asynchronous JavaScript and XML)，即异步的JavaScript和XML。Ajax不是语言，而是一种技术，可以在不完整加载整个网页的前提下，加载网页的部分，即使用Ajax技术可以异步局部加载网页。

实现：有了XMLHttpRequest对象才有了异步处理，才有了ajax；才能：
1. 运用HTML和CSS实现页面，表达信息；
2. 运用XMLHttpRequest和web服务器进行数据的异步交换；
3. 运用JavaScript操作DOM，实现动态局部刷新；

1.2. HTTP基础

1.2.0 HTTP简介

定义： HTTP是计算机通过网络通讯的规则，使浏览器（客户）能够向服务器（web服务器）请求信息和服务。
特点： HTTP是一种无状态的协议：
1. 不建立持久的连接；
2. 没有记忆（不会保留信息）；

HTTP客户端发起请求，创建端口；
HTTP服务器在端口监听客户端请求；
HTTP服务器向客户端返回状态和内容；

1.2.1 HTTP请求步骤

参考：HTTP基础：同步&异步
在输入链接或者刷新之后——

1. 浏览器搜索自身DNS缓存；
   chrome://net-internals/#dns可查看chrome自身的DNS缓存
2. 若1无缓存或缓存失效：搜索操作系统DNS缓存；
3. 若2失败：读取本地Host文件；
4. 若3失败：浏览器发起一个DNS的一个系统调用；
   1) 宽带运营商服务器查看自身缓存；
   2) 运营商服务器发起一个迭代DNS解析的请求；
   3) 运营商服务器把结果返回操作系统内核同时缓存起来；
   4) 操作系统内核把结果返回给浏览器；
   5) 浏览器获取域名对应的ip地址；
5. 浏览器获取ip后，发起HTTP“三次握手”；建立TCP/IP连接；
6. 浏览器向服务器发送HTTP请求，如GET方法或POST方法；
7. 服务器端接收请求，由路径参数进行后端处理后把数据 (如HTML页面代码) 返回给浏览器，同时应答头信息；
8. 浏览器获取数据后进行解析、渲染，根据所需获取JS、CSS和图片静态资源，这三类数据同样要经过以上7个步骤获得；
9. 浏览器解析现有资源代码，渲染页面呈现给客户；

1.2.2. HTTP请求

组成：

1. 请求方法和动作；
2. 请求Url；
3. 请求头，包含客户端环境信息、身份验证信息等；
4. 请求体，即请求正文；

1.2.3. HTTP方法

含GET、POST、PUT、DELETE、HEAD、TRACE、OPTIONS等多种；
GET：
1. 一般用于信息获取、查询而非修改；
2. 使用Url传递参数；
3. 发送的信息量有限制，2000个字符左右；

POST：
1. 一般用于修改服务器上资源；
2. 发送的信息量无限制；

1.2.4. HTTP响应

组成：
1. 状态码；
2. 响应头，包含服务器类型、日期、内容类型、长度等；
3. 响应体，即响应正文；

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)

1. method：请求的方式，大小写不敏感；
2. url：请求地址，相对/绝对均可；
3. async：异步：true (默认值)；同步：false；

1.3.4. setRequestHeader()方法：

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

1. 需写在open(),send()之间；用以创建头信息；
2. POST需设置此方法；

1.3.5. send()方法：

send(string)

• string：GET因信息置于url中，故string可以缺省；POST请求须有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,[data],[callback])或$.getJSON(url,[data],[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,[data],[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>

1. 把datatype:json改为datatype:jsonp；
2. 添加jsonp:自定义参数名称；
3. 设置$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. 四大基本规则

1. 并列数据间以逗号,分隔；
2. 映射用冒号:表示；
3. 映射的集合（对象）用大括号{}表示；
4. 并列数据的集合（数组）用方括号[]表示；

2.3. 优点

1. 格式简洁、易读、经压缩而占用带宽小；
2. 支持C、C#、Java、JavaScript、Perl、PHP、Pyhon、Ruby等多种语言；

2.4. 缺点

1. 字符集必须是Unicode，收约束性强；
2. JSON语法过于严谨；

2.5. 其它Web传输常用类型

1. XML：不易读、数据文档较大；
2. Serialize：类似JSON，但将变量序列化，返回一个具有变量类型和结构的字符串表达式；
3. Array()：基本数据类型，不能用于数据传输和交替，只用作缓存；

参考文档：
HTTP协议详解
HTTP请求和相应详解