Ajax
一,Ajax概述
2005年,Adaptive Path公司发明了Ajax这个词,用于概括异步加载页面内容的技术。使用Ajax可以做到只更新需要部分页面,其他的大部分内容就无需重新加载,这样就避免了更新小部分内容而加载整个页面的问题。
二,XMLHttpRequest对象
XMLHttpRequest对象是Ajax的核心,该对象充当着浏览器中的脚本(客户端)与服务器之间的中介人的角色,JavaScript通过该对象可以自己发送请求,同时也可以自己处理相应,替代了由浏览器发出请求的过程。
三,引用《JavaScript DOM编程艺术》的案例
案例简述:
该案例包含四个文件,一个ajax.html文件,其中包含三个JS脚本文件,一个example.txt文件。通过JavaScript编写的ajax函数,实现ajax.html的请求响应来把example.txt的内容输出到ajax文档中。
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax案例</title>
</head>
<body>
<!--承载内容的空DIV-->
<div id="new"></div>
<!--共享onload事件,用于运行多个页面加载函数,该函数本例不编写,详细见第4篇笔记-->
<script src="js/addLoadEvent.js"></script>
<script src="js/getHTTPObject.js"></script>
<script src="js/getNewContent"></script>
</body>
</html>
example.txt
This was loaded asynchronously!
getHTTPObject.js
该函数用于针对不同浏览器创建XMLHttpRequest对象时产生的差异性,进行协调兼容的作用,并返回XMLHttpRequest对象。
function getHTTPObject (){
if(typeof XMLHttpRequest == "undefined"){
// 对IE浏览器的兼容,IE使用ActiveXObject()来创建类似于XMLHttpRequest的对象
XMLHttpRequest = function (){
try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{ return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
//非IE浏览器的兼容,创建XMLHttpRequest对象
return new XMLHttpRequest();
}
}
getNewContent.js
该函数对JavaScript的请求进行响应的作用,约定:由于XMLHttpRequest名字太长,就简述为 XHR,望周知。
function getNewContent (){
//将创建的XMLHttpRequest对象存入request变量
var request = getHTTPObject();
if(request){
/*XHR的open方法三个参数:
* 1,请求类型:GET、POST、SEND
* 2,目标文件
* 3,是否使用异步处理方式
*/
request.open("GET","example.txt",true);
//代码中的onreadystatechange是一个事件处理函数,它在服务器给XHR对象送回响应时触发
request.onreadystatechange = function() {
/*浏览器在不同阶段返回更新readyState属性值,在 属性值为4时就可以访问服务器发送来的数据
* 0 表示未初始化
* 1 表示正在加载
* 2 表示加载完毕
* 3 表示正在交互
* 4 表示处理完毕
*/
if(request.readyState == 4) {
var para = document.createElement("p");
/*访问服务器发送回来的数据需要通过两个属性完成
* 1,responseText属性,用于保存文本字符串形式的数据
* 2,responseXML属性,用于保存Content-Type头部中指定为"test/xml"数据
*/
var txt document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
//在指定了请求目标,明确了处理响应,可以使用send方法来发送请求
request.send(null);
}else{
alert('Sorry,your browser doesn't support XMLHttpRequest');
}
}
// 页面加载时运行函数
addLoadEvent(getNewContent);