AJAX：Asynchronous JS And XML，包括HTML、CSS、JS、DOM、XML、JSON等，客户端技术范畴。主要目标：发起异步请求/响应，实现页面内容的局部刷新，提高浏览体验；实现动态页面的静态化。
使用AJAX的步骤：
(1)创建XHR对象——XMLDOM对象
(2)绑定onreadystatechange事件监听函数
(3)创建请求消息
(4)发送请求消息
AJAX的原理图：
使用AJAX发起GET请求：
(1)
(2)
(3) xhr.open('GET', 'xx.php?k=v&k=v', true)
(4) xhr.send( null )
使用AJAX发起POST请求：
(1)
(2)
(3) xhr.open('POST', 'xx.php', true)
(3.5) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
(4) xhr.send( 'k=v&k=v&k=v' )
|
常见的MIME(Multipurpose Internet Mail Extension)： .jpeg .jpg <= image/jpeg .html .htm <= text/html .mpeg3 .mp3 <= audio/mpeg3 MIME类型，就是用于唯一的标示一种特定格式的文件的一个描述符 常见的MIME类型： image/jpeg image/gif image/png text/plain text/html text/css application/javascript application/xml application/json application/msword .... |
1.使用AJAX接收服务器返回的text响应
示例：点击酒馆，获得英雄列表
服务器端：
header('Content-Type: text/plain');
客户端：
(1)(2) console.log(xhr.responseText);
(3)(4)
2.使用AJAX接收服务器返回的html响应——重点
示例：动态数据的级联下拉列表
服务器端：
header('Content-Type', 'text/html');
客户端：
(1)(2) document.getElementXxxx().innerHTML = xhr.responseText;
(3)(4)
3.使用AJAX接收服务器返回的script响应
示例：加载不同的JS，实现页面主题的定制
服务器端：
header('Content-Type', 'application/javascript')
客户端：
(1)
(2) typeof( xhr.responseText ); //string
eval( xhr.responseText ); //把string作为js来执行
(3)
(4)
|
服务器如何异步的向客户端返回批量有结构的数据？如多个商品、多条帖子.... text/plain(无格式)：'tom9070mary105john120' text/plain(有格式)：'tom#90#70@mary#10#5@john#1#20' text/html(有格式)： '<div><p>tom<p><p>90</p><p>70</p></div><div><p>mary<p><p>90</p><p>70</p></div>' 批量响应数据最好的形式：有数据、有格式、跟HTML标签无关系、编程语言易于处理 application/xml： application/json： |
4.使用AJAX接收服务器返回的xml响应
HTML：HyperText Markup Language，所有的HTML标签已经为了在浏览器中加以而固定下来。用标签来呈现网页内容。
XML：eXtensible Markup Language，可扩展的标签语言，用标签的形式来描述数据(财务、航天、化学、无线...)，没有预定义任何的标签，所有的标签都由使用者随意指定。XML语言标准规定了XML数据的格式必须满足：
(1)双标签有开始，就必须有结束；单标记标签必须有/
(2)标签名严格区分大小写
(3)属性值必须使用引号括起来
(4)...
|
W3C DOM分为三部分： (1)核心DOM：用于处理任意的ML文档 document childNodes firstChild lastChild parentNode nextSibling previousSibling document.getElementXxxx node.getAttribute() node.setAttribute() (2)HTML DOM：用于HTML文档 (3)XML DOM：用于处理XML文档 XMLHttpRequest DOMParser - 可以把一段XML字符串解析为一棵DOM树 |
示例：异步的加载新闻列表
5.使用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字符串
客户端：
(1)
(2) var jsObj = JSON.parse( xhr.responseText ); //把JSON字符串解析为JS数组/对象
(3)
(4)
服务器端（PHP数据） => JSON字符串 => 客户端（JS对象）
悦为（深圳）科技有限公司
乐享其志
微信：JoyVisYOJOY
微博：http://weibo.com/JoyVis
联系&投稿：service@joyvis.com