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" οnblur="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代码。