Ajax介绍--XMLHttpRequest

来源：互联网发布：黛珂韩国多少钱知乎编辑：程序博客网时间：2024/05/17 22:03

Ajax介绍

AJAX - 浏览器支持

AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。

function ajaxFunction()

{

var xmlHttp;

try{

xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari

}

catch (e) {

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");// Internet Explorer 6.0+

}

catch (e) {

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer 5.5

}

catch (e) {

alert("您的浏览器不支持AJAX！");

return false;}

}}

}

</script>

声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。

AJAX - XMLHttpRequest对象

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function()

{

// 我们需要在这里写一些代码

}

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。（详情参见 AJAX – readyState详情）

状态

描述

请求未初始化（XMLHttpRequest创建后、调用 open() 之前）

请求已提出

请求已发送（这里通常可以从响应得到内容头部）

请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）

请求已完成（可以访问服务器响应并使用它）

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.myForm.time.value=xmlHttp.responseText;

}

AJAX - 向服务器发送请求

要想把请求发送到服务器，就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定是否应当对请求进行异步处理。

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：

xmlHttp.open("GET","time.asp",true);

xmlHttp.send(null);

现在，我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。

<html>

<body>

var xmlHttp;

function CreateXMLHttpRequest() {

try {xmlHttp = new XMLHttpRequest();//FF 等

}

catch (e) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//IE 6.0+

}

catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE 5.5

}

catch (e) {

alert("您的浏览器不支持AJAX！"); return false;

}}}

}

function GetTime() {

CreateXMLHttpRequest();

xmlHttp.onreadystatechange = ShowTime;//此处不可加括号

xmlHttp.open("GET", "Default.aspx", true);

xmlHttp.send(null);

}

function ShowTime() {

if (xmlHttp.readyState == 4) {

document.getElementById("time").value = xmlHttp.responseText;

}

</script>

</body>

</html>

AJAX - 服务器相应请求

Default.aspx页面中，最好只有这么一句话。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax._Default" %>

Default.aspx.cs页面中，可以输出这么一句话。

protected void Page_Load(object sender, EventArgs e)

{

Response.Write(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));

}

AJAX - readyState详情

(0) 未初始化

此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。

(1) 载入

此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

(2) 载入完成

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3) 交互

此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。

(4) 完成

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

概而括之，整个XMLHttpRequest对象的生命周期应该包含：创建－初始化请求－发送请求－接收数据－解析数据－完成