什么是AJAX?
~ Asynchronous JavaScript and XML的缩写。
~ 如果一个页面中只有一小部分内容需要修改,服务器仍然发送整个页面,也就是需要完全页面刷新,这样就需要占用更多的网络资源,响应时间也较长(AJAX就是为了解决这个问题而产生的)。
~ 使用AJAX,如果只需要更新页面中一小部分内容时,只需部分刷新页面即可。
AJAX相关技术
~ XHTML与CSS
~ JavaScript
~ DOM
~ XML与XSL
使用XSL可以从一个XML文档中提取信息,并使用该信息创建另一个XML文档
~XMLHttpRequest
它是浏览器中定义的对象,是AJAX技术中的核心对象
通过JavaScript脚本可以创建XMLHttpRequest对象
该对象定义了若干属性和方法,可以向服务器发出异步请求和处理响应结果。
AJAX交互模式
~ 客户触发事件
一个客户事件触发一个AJAX事件,客户事件如,onchange事件等等,某个特定的用户动作,都能触发AJAX事件
例如:
<input type="button" value="开始异步请求" onclick="startRequest();"/>
~ 创建XMLHttpRequest对象
代码如下:
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
~ 向服务器发出请求
function startRequest(){
createXMLHttpRequest(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = handleStateChange; //为异步请求设置事件处理程序
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
1.在向服务器发出请求之前,应该通过XMLHttpRequest对象的onreadystatechange属性设置回调函数
当XMLHttpRequest对象的内部状态改变时,就会调用回调函数(故,回调函数是处理响应的地方)
2.接下来通过调用XMLHttpRequest对象的open()方法打开一个HTTP请求,在该方法中需要指定请求的HTTP方法(GET/POST)以及请求的资源(请求的资源可以是静态的,也可以是动态的)。
3.调用XMLHttpRequest对象的send()方法将请求发送到指定的目标资源。send()接受一个参数(通常是一个字符串或DOM对象),这个参数作为请求体的一部分发送到目标URL
当向send()提供参数时,要确保open()中指定的HTTP方法为POST,如果使用POST方法,则需要设置XMLHttpRequest对象的Content-Type首部,如下所示:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
如果没有数据作为请求体的一部分发送,该参数应指定为null
~ 服务器处理请求并返回响应
1.如果请求的是静态资源,服务器将返回该资源
如果请求的是动态资源,服务器将执行动态资源,然后向用户返回响应
2.XMLHttpRequest对象提供了两个访问服务器响应的属性:
Ⅰ. responseText,它将响应提供为一个字符串
Ⅱ. responseXML,它将响应提供为一个XML对象
由于XMLHttpRequest对象只能处理text/html类型的结果,所以如果请求的是动态资源(如Servlet),需要将Content-Type响应头设置为text/xml
为了避免浏览器在本地缓存结果,需要将Cache-Control响应头设置为no-cache,如下所示:
response.setHeader("Cache-Control","no-cache");
~ 通过回调函数处理结果
在回调函数中首先应该检查XMLHttpRequest对象的readyState属性和status属性的值。
当readyState属性值为4,status属性值为200时表示响应完成,这时才能使用XMLHttpRequest对象的responseText或responseXML检索请求结果。
例如:
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert("服务器返回:" + xmlHttp.responseText);
}
}
}
~ 更新HTML DOM对象
客户使用新的数据更新HTML DOM页面表示元素。
一般使用document.getElementById("tagId");获取元素,然后修改元素内容。
修改元素内容的一个常用方法是设置元素的innerHTML属性值。