异步请求Ajax

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

    官网：http://www.yuevis.com/

   联系&投稿：service@joyvis.com