初识AJAX技术

来源：互联网发布：张定国非诚勿扰知乎编辑：程序博客网时间：2024/04/28 03:21

1. 简介：

AJAX(阿贾克斯),是一种网页开发技术。AJAX是异步的Javascript和XML的简写，是一种实现异步请求的技术。

为什么要使用AJAX？传统的页面刷新技术是重新加载整个页面，这样做有一个很大的缺点就是：如果只需要改变当前页面的一小部分内容，确重新加载整个页面，是很耗时间、效率的。AJAX就是为了实现部分网页刷新，在不用重新加载整个页面的情况下与服务器交换数据。

使用AJAX的优点是：节省带宽，提高响应速度。

使用AJAX也有缺点，最大的缺点就是可能让后退按钮失去作用。例如：在一个文本框里获得服务器数据后，就比之前的页面多了文本框里的数据，当我们点击他跳到下一个页面，返回时，希望还能看到文本框里的数据，但浏览器只能加载之前的静态页面，也就是看不到文本框里的数据了。解决的方法是：使用一个隐藏的iframe来保存使用了AJAX技术元素的内容，当出现后退情况时，就报内容读取到对应的元素上，恢复上次的状态。

2. 使用AJAX技术：

AJAX的核心是XMLHttpRequest对象，使用该对象来与服务器交互，实现部分刷新的功能。

注意：IE5,IE6使用的是ActiveXObject对象，而IE7+，FireFox等都是使用XMLHttpRequest对象。所以要创建一个XMLHttpRequest对象可以这样创建：

var xmlhttprequest;

if (window.XMLHttpRequest)

xmlhttprequest = new XMLHttpRequest();

else if (window.ActiveXObject)

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

else

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

2.1 XMLHttpRequest对象的四大属性：

onreadystatechange属性：为该属性指定一个函数指针。该函数会被异步调用，也就是当XMLHttpRequest对象的状态改变时会自动触发（当open()第三个参数为true时）

readyState属性：保存了XMLHttpRequest的状态，根据这个值来判断处理。

· 0: 请求未初始化

· 1: 服务器连接已建立

· 2: 请求已接收

· 3: 请求处理中

· 4: 请求已完成，且响应已就绪

status属性：状态码，表示该响应的状态。如200表示OK,404表示Not Found。

responseText(responseXML)属性：保存了服务器响应的数据。

2.2 AJAX如何向服务器提出请求：

使用XMLHttpRequest的open()和send()函数

open(method,url,async) ：第一个参数表示提交报文的方式，可以是Get/Post，通常是用Get提交，Get的速度较快，但如果要提交的数据过大就必须采用Post方式。第二个参数表示文件在服务器上的位置第三个参数表示是否采用异步方式，通常都设置为true，设置为true，上面赋值给onreadystatechange属性的函数才会异步执行；如果设置为false,则要等到服务器响应完成后才能执行其它操作。

Send(string) 参数是正对Post的，表示要提交给服务器的数据。、

如果要将string发送给服务器，还需要使用setRequestHeader(header,value)函数设置http报文的信息。

例如：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded";

xmlhttp.send("fname=Bill&lname=Gates");

3. ASP.NET的一个小例子：

<head>    <title>使用ajax技术实现部分网页刷新技术</title>    <script type="text/javascript">        function GetTime() {            var xmlhttprequest;            if (window.XMLHttpRequest)                xmlhttprequest = new XMLHttpRequest();            else if (window.ActiveXObject)                xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");            else                alert("您的浏览器不支持AJAX技术");            xmlhttprequest.onreadystatechange = function () {   //异步执行，会触发几次                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {                    document.getElementById("time").value =xmlhttprequest.responseText;                }            }            xmlhttprequest.open("GET", "AJAXResponse.ashx", true);            xmlhttprequest.send();    }    </script></head><body><form name="form" action="AJAXResponse.ashx">用户:<input type="text" name="user" onblur="GetTime()" /><br />时间:<input type="text" id="time" name="time"/></form></body>

AJXXResponse.ashx的代码很简单，就是获得当前服务器时间并写入响应流中。

string strTime = DateTime.Now.ToString();        context.Response.Write(strTime);

当user编辑框失去焦点时，time编辑框就会获得服务器端的时间。

使用HttpWatch观察，当user编辑框失去焦点后，服务器只给客户端发送时间，并不会再发送整个页面的html代码。