AJAX学习

一、AJAX简介

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

二、什么是AJAX？

AJAX全称为 Asynchronous JavaScript and XML（异步的JavaScript和XML）。

AJAX是一种用于快速创建动态网页的技术。

通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不适用AJAX）如果需要更新内容，必须重载整个网页面。

AJAX并不是一种新的编程语言，而是几种原有技术的结合体。它有以下几种技术组合而成：

• HTML/XHTML——主要的内容表示语言
• CSS——为数据提供样式
• DOM——对已载入的页面进行动态更新
• XML——作为转换数据的格式
• XSLT——将XML转换为XHTML（用CSS修饰样式）
• XMLHttp——用XMLHTTPRequest来和服务器进行异步通信，是主要的通信代理
• JavaScript——用来编写AJAX引擎的脚本语言

三、同步交互与异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。

异步交互：客户端发出一个请求后，无需等待服务器的响应结束，就可以发出第二个请求。

四、AJAX工作原理

AJAX的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XmlHttpRequest有所了解。

 五、AJAX创建XMLHttpRequest对象

XMLHttpRequest是AJAX的基础。

工作原理：

浏览器先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上。

1.XMLHttpRequest对象

所有的现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.创建XMLHttpRequest对象

语法：variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

 

六、AJAX向服务器发送请求

XMLHttpRequest对象用于和服务器交换数据。

1、向服务器发送数据

如需将请求发送到服务器，我们需要使用XMLHttpRequest对象的 open() 和 send() 方法。

xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();

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

 

 

2、GET还是POST？

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用POST请求：

1）无法使用缓存文件（更新服务器上的文件或数据库）

2）向服务器发送大量数据（POST没有数据量限制）

3）发送包含未知字符的用户输入时， POST 比 GET 更稳定也更可靠

 3、GET请求

如果希望通过GET方法发送信息，需向URL添加信息：

xmlhttp.open("GET", "/try/ajax/demo_get2.php?fname=Henry&lname=Ford", ture);
xmlhttp.send();

4、POST请求

如果需要向 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定要发送的数据。

xmlhttp.open("POST", "/try/ajax/demo_post2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

方法	描述
setRequestHeader(header, value)	向请求添加HTTP 头   header：规定头的名称   value：规定头的值

七、服务器响应

如需获得来自服务器的响应，需使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

responseText 属性

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 八、onreadystatechange事件

当请求被发送到服务器的时候，我们需要执行一些基于相应的任务。每当readyState发生改变的时候，就会触发onreadystatechange事件。readyState属性存有 XMLHttpRequest 的状态信息。下面是XMLHttpRequest 对象的三个重要属性：

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

在 onreadystatechange 事件中，我们规定当服务器响应已经做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪。

xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
              document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        } 
}        

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。