JavaScript高级④-AJAX与JSON

AJAX介绍和创建XHR对象

AJAX:异步 JavaScript 和 XML。简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

AJAX包括以下几个步骤：

创建AJAX对象；
发出HTTP请求；
接收服务器传回的数据；
更新页面数据；

Ajax的工作原理如图所示：

总结：

AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后再进行处理。
AJAX技术的核心就是XMLHttpRequest对象（简称：XHR），这是微软首次引入的一个特性，其他浏览器厂商后来都提供了相同的实现。
IE5中的XHR对象是通过ActiveX对象实现的，而IE7+及其他标准浏览器都支持原生的XHR对象。
创建一个XHR对象，也叫做实例化一个XHR对象，因为XMLHttpRequest()是一个构造函数。

XHR的用法介绍

open()方法：设置: HTTP方法和要获取资源的URL;
send()方法：发送请求：
onload属性：设置: 成功获取数据后将要运行的函数;
onerror属性：设置: 出现错误后将要运行的函数;
responseText属性：设置: 存储异步请求响应的文本;

HTTP头部信息

请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。XHR对象也提供了操作这两种头部信息（请求头和响应头）的方法。

Accept：告诉WEB服务器自己接受什么介质类型，/ 表示任何类型，type/* 表示该类型下的所有子类型，type/sub-type。
Accept-Charset：浏览器告诉服务器自己能接收的字符集。
Accept-Encoding：浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）。
Accept-Language：浏览器申明自己接收的语言。语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等。
Cache-Control：指定请求和响应遵循的缓存机制。
Connection：表示是否需要持久连接。如果Servlet看到这里的值为“Keep-Alive”，或者看到请求使用的是HTTP 1.1，它就表示持久连接。
Cookie：当前域名下的Cookie。
Referer：浏览器向WEB 服务器表明自己是从哪个网页URL获得点击当前请求中的网址/URL。
User-Agent：浏览器表明自己的身份（是哪种浏览器）。例如：User-Agent：Mozilla/5.0

GET与POST请求

由于GET方式在发送数据时是将参数拼接在URL上，传输数据会受到URL长度的限制，不同浏览器的长度限制不一样，所以GET方式会受到参数大小的限制，但是POST方式没有参数大小的限制。
因为GET方式会将请求参数显示在地址栏上，而POST方式不会，所以POST方式相对来讲更安全。
GET方式有缓存，而POST方式没有缓存。

JavaScript中的跨域请求

受JS同源策略的影响，当在某一域名下请求其他域名，或在同一域名下请求不同端口的URL时，就会变成不被允许的跨域请求。127.0.0.1:8020

了解XDomainRequest对象

XDomainRequest表示JavaScript和Ajax的跨域请求，在IE8+可以使用。
XDomainRequest包含以下几个部分：

事件
1. onload事件：请求成功并返回对象时，被触发。
2. onerror事件：当跨域请求发生错误时，被触发。
3. onprogress事件：浏览器开始从服务器端接收数据时，被触发。
4. ontimeout事件：出现超时情况，被触发。
方法
1. abort方法：终止等待send
2. open(XDomainRequest)方法：建立与服务器的链接
3. send(XDomainRequest)方法：传输一个字符串数据给服务器处理
属性
1. constructor属性：返回一个对象的构造函数的引用
2. contentType属性：返回html请求或返回头部的content-type属性
3. responseText属性：以字符串形式返回请求的body内容
4. timeout属性：超时后返回的值。

JSON数据

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

Json的语法可以表示成三种类型的值：
1. 简单值：可以在Json中表示字符串、数值、布尔值和null，但是不支持undefined;
2. 对象：作为一种复杂数据结构，表示一种无序的键值对，每个键值对中的值既可以是简单值，也可以是复杂数据类型的值。
3. 数组：作为一种复杂数据结构，表示一种有序值的列表，可以通过数组索引访问其中的值。数组中的元素可以是任何类型：简单值、对象、数组均可。
如：

var obj = {a: 'Hello', b: 'World'}; 
//这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}';
 //这是一个 JSON 字符串，本质是一个字符串

在Ajax中使用JSON数据

JSON.parse()：把Json格式的字符串转换为Json对象。
JSON.stringify():把Json对象转换为Json格式的字符串。