Ajax中的XMLHTTPRequest对象

Ajax简介

（Asynchronous JavaScript and XML（异步的JavaScript和XML））

1.1什么是AJAX？

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

传统的网页（不使用AJAX）的应用程序案例：新浪微博、Google地图等等

AJAX如何工作？

1.2同步与异步

同步：是指一个进程在执行某个请求的时候

若该请求需要一段时间才能返回信息，

那么这个进程将会一直等待下去

同步

请求一、请求二、请求三、每个请求要1s则必须等待请求一返回信息才能执行请求二

 

异步：是指进程不需要一直等下去

而是继续执行下面的操作，不管其他的进程状态。

这样可以提高执行的效率。

 

异步实现：

1. 运用HTML与CSS来实现页面，表达信息
2. 运用XMLHttpRequest和web服务器进行数据的异步交换
3. 运用JavaScript操作DOM，实现动态局部刷新

 

1.3AJax-创建XMLHttpRequest对象

什么是XMLHttpRequest对象？

XMLHttpRequest对象用于后台与服务器 交换数据（具体介绍可见w3c）

创建XMLHTTPRequ对象

所有浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHTTPReq对象。

创建XMLHTTPRequest对象的语法；

Var xhr=new ActiveXObeject（“Microsoft.XMLHTTP”）；

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHTTPRequest对象，如果支持，则创建XMLHTTPRequest对象。

如果不支持，则创建ActiveXObject;

Var xhr;

If(window.XMLHttpRequest){

Xhr=new XMLHttpRequest();

}else{

Xhr=new ActiveXObject(“Microsoft.XMLHTTP”);

}

 

1.4 AJAX-向服务器发送请求

服务器发送请求，，我们使用XMLHTTPRequest对象的open()和send()方法；

Open（method,url,asyns）规定请求的类型、URL以及是否异步处理请求。

参数说明：

Method;请求的类型：Get或POST

URL：文件在服务器上的位置

async:true(异步)或false(同步)Asynchronous

Send(string):将请求发送到服务器

参数说明：string仅用于POST请求

一个简单的GET请求：

Xhr.open(“GET”,”/控制器的名称/方法”,true)

Xhr.send()

一个简单的POST请求：

Xhr.open(“POST”,”/控制器名称/方法”，true)

Xhr.send();

 

GET还是POST?

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

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

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

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

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

 

1.6AJax-服务器的响应

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

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

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

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

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

注意：onreadystaechange事件被触发4次（0-4）、分别是0-1、1-2、2-3、3-4.

对应着readyState的每个变化。

使用回调函数

回调函数是一种以参数的形式传递给另一个函数的函数

如果您的网站上存在多个AJAX任务，那么您应该为创建XMLHttpRequest对象编写一个标椎函数，并为每个AJAX任务调用该函数。

该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）；

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

 

 

日常要多加练习才能加深对代码的理解哦！

后会有期！

目录

onreadystatechange 事件

---