Ajax基础知识

浏览数：36 / 时间：2015年06月09日

一、Ajax名词解释

AJAX： Asynchronous Javacript and XML

中文意思：异步Javascript和XML.指一种创建交互式网页应用的网页开发技术。（AJAX是一

种网页开发技术，主要用于创建交互式网页开发）

又不仅仅是一种单一的技术，而是有机的利用了一系列的相关技术：

简单理解为：Javascrip + XMLHttpRequest + CSS + 服务器端的集合

二、AJAX的优点：

1.0 Ajax在本质上是一个浏览器端的技术

2.0 Ajax技术主要目的在于局部交换客户端以及服务器之间的数据

3.0 Ajax这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的 Refresh wihtout Reload（轻刷新）

4.0 与服务器之间的沟通，完全是透过Javascript 来实行

5.0 使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就是让网络程式更像一个桌面应用程序

6.0 Ajax就是运用Javascript在后台悄悄帮你去服务器要资料，最后再由Javascript或DOM来帮你呈现结果，因为所有动作都是有Javascript代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

三、异步对象其中的readyState属性

readyState属性指出了XMLHttpRequest对象在发/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5中不同的状态

0：未初始化，new完后。

1：已打开。对象已经创建并初始化，但还未调用send方法

2：已发送。已经调用send方法，但该对象正在等待状态码和头的返回

3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头部完整

4：已加载。所有的数据接收完毕

四、Ajax的Get请求与Post请求

 1             //Ajax的Get请求
 2             //1.0 获取异步对象
 3             var xhr = new XMLHttpRequest();
 4             //2.0 设置参数
 5             xhr.open("get", "/A01_GetDate.ashx", true);
 6             //3.0 不使用缓存
 7             xhr.setRequestHeader("If-Modified-Since", "0");
 8             //4.0 设置回调函数
 9             xhr.onreadystatechange = function () {
10                 if (xhr.readyState == 4 && xhr.status == 200) {
11                     alert(xhr.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr.send();

 1             //Ajax的Post请求
 2             //1.0 创建异步对象
 3             var xhr01 = new XMLHttpRequest();
 4             //2.0 设置异步对象的参数
 5             xhr01.open("post", "/yyy.ashx", true);
 6             //3.0 将传入的参数放入form中给服务器
 7             Xhr01.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 8             //4.0 设置回调函数
 9             xhr01.onreadystatechange = function () {
10                 if (xhr01.readState == 4 && xhr01.status == 200) {
11                     alert(xhr01.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr01.send("name=jack&id=11");