AJAX数据传输

AJAX = Asynchronous JavaScript and XML(异步的Javascript和XML)

AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

1.1     场景原理

1-1.1      异步传输

当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success

1-1.2      同步传输

当ajax发送请求后，在等待server端返回的这个过程中，前台页面里所有的代码停止，页面呈现假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态解除。

1-1.3     使用方法

a)     创建 XMLHttpRequest 对象

var ajax =newXMLHttpRequest()

b)     发送请求

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 ü  method：请求的类型；GET 或 POST ü  url：文件在服务器上的位置 ü  async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 ü  string：仅用于 POST 请求

ü  GET数据

open(“GET”,url,true);

send();

ü  POST数据

open(“POST”,url,true);

send(data);

ü  设置头部

setRequestHeader(header,value)

1-2    可发送的数据格式

ajax的数据格式有四种：文本，json，HTML，和xml。现在普遍采用JSON数据格式发送数据。

1-2.1     JSON

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

1-2.2     格式语法

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

var obj ={a:'Hello', b:'World'};

//这是一个对象，注意键名也是可以使用引号包裹的

var json ='{"a": "Hello", "b": "World"}';

//这是一个 JSON 字符串，本质是一个字符串

1-2.3     JSON/JS对象互转

要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json =JSON.stringify({a:'Hello', b:'World'});

//结果是 '{"a": "Hello", "b": "World"}'

要实现从 JSON字符串转换为对象，使用 JSON.parse() 方法：

var obj =JSON.parse('{"a": "Hello", "b": "World"}');

//结果是 {a: 'Hello', b: 'World'}

1-3    响应/回调函数

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 ·      0: 请求未初始化 ·      1: 服务器连接已建立 ·      2: 请求已接收 ·      3: 请求处理中 ·      4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面
responseText	响应返回文本
responseXML

1-4   
status状态

服务器常用的状态码及其对应的含义如下：

ü  200：服务器响应正常。

ü304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。

ü  400：无法找到请求的资源。

ü  401：访问资源的权限不够。

ü  403：没有权限访问资源。

ü  404：需要访问的资源不存在。

ü  405：需要访问的资源被禁止。

ü  407：访问的资源需要代理身份验证。

ü  414：请求的URL太长。

ü  500：服务器内部错误。