深入理解Ajax

来源：互联网发布：美国非农业就业数据编辑：程序博客网时间：2024/06/06 16:46

AJAX（异步 JavaScript 和 XML）是 synchronous JavaScript and XML 的简称。

AJAX不是一门新的编程语言，它是 JavaScript 的一部分，主要用来与后台交换数据，并在不重新加载（刷新）页面的情况下，更新部分页面。

使用 AJAX 的例子：

用户注册时，输入完用户名立即提交到后台验证，检测用户名是否存。
静态页面实现登录功能。
瀑布流的实现。

AJAX在提高用户体验方面有很大的作用，它可以“不知不觉”的与后台交换数据，不需要刷新页面，不需要用户等待。

GET 还是 POST

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

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

无法使用缓存文件（更新服务器上的文件或数据库）；
向服务器发送大量数据（POST 没有数据量限制）；
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

是否异步请求

对于 open() 方法：
open(method,url,async)
async 为 true 或 false。

async=true 时，JavaScript 无需等待服务器的响应，可以在等待服务器响应的同时执行其他脚本，当响应完成后再对返回的数据进行处理，所以，AJAX 请求与其他脚本的执行是分开的，互不影响。

async=false 时，JavaScript 会等到服务器响应完成后才继续执行其他脚本，如果服务器繁忙或缓慢，JavaScript 会一直等待，可能会挂起或停止。这种方式只适用于一些小而简单的请求。

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML），对于 web 开发人员来说，发送异步请求是一个巨大的进步，能在很大程度上减少服务器的开销，提高客户端脚本的执行速度。AJAX 重在“异步”，如果 async=false ，AJAX 就是去了意义。所以，如无特殊要求，一般是 async=true ，既能充分发挥 AJAX 的作用，也不会遇到莫名其妙的错误。

XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载整个网页（刷新）的情况下，对网页进行部分更新。

XMLHttpRequest 对象是 AJAX 的基础，讲 AJAX ，大部分是在讲 XMLHttpRequest 对象。

所有现代浏览器（IE 7.0+、Chrome、FireFox、Opera、Safari）均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作，本教程讲解的内容都是基于标准化的工作草案。

对于较新的浏览器，创建 XMLHttpRequest 对象的语法：

var xmlhttp=new XMLHttpRequest();

对于比较老的IE浏览器（IE5 和 IE6），使用 ActiveX 来创建：

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

兼容所有浏览器的创建 XMLHttpRequest 对象的代码：

<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

如果担心浏览器出现错误提示，请用 try..catch 代替 if...else ，如下所示：

<script type="text/javascript">
var xmlhttp;
try{
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}catch(e){
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

XMLHttpRequest 对象有多个属性和方法，还有一个事件句柄。
XMLHttpRequest 对象属性和方法属性说明readyStateHTTP 请求的状态。当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。responseText从服务器接收到的数据（不包括头部）（解析为一个字符串）。responseXML从服务器接收到的数据（不包括头部）（解析为 XML 并作为 Document 对象返回）。status由服务器返回的 HTTP 状态代码。如 200 表示成功， 404 表示 "Not Found" 错误。statusText这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。事件句柄说明onreadystatechange每次 readyState 属性改变的时候调用的事件句柄函数。方法说明abort()取消当前响应，关闭连接并且结束任何未完成的网络活动。getAllResponseHeaders()把 HTTP 响应头部（所有头部）作为一个字符串返回。getResponseHeader()返回指定的 HTTP 响应头部的值，其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。open()初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。send()发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。setRequestHeader()向一个打开但未发送的请求设置或添加一个 HTTP 请求。

0 0