《JavaScript DOM 编程艺术》读书笔记——其六
Ajax
1、Ajax简介:用于概括异步加载页面内容的技术。使用它可以做到只更新页面的一小部分。它的主要优势在于对页面的请求以异步方式发送到服务器,而服务器不会用整个页面来响应请求(会在后台处理请求),与此同时用户还能继续浏览页面并与之交互。
2、XMLHttpRequest对象:Ajax技术的核心。它充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求,也可以自己处理响应。
服务器在向XMLHttpRequest对象发回响应时,该对象有多个属性可用,浏览器在不同阶段更新readyState属性的值,它有五个可能的值:
0表示未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成
只要readyState属性值变为4,即可访问服务器发送回来的数据。
访问服务器发送回来的数据需要通过两个属性完成:
(1)responseText属性:用于保存文本字符串形式的数据。
(2)responseXML属性:用于保存Content-Type头部中指定为"text/xml"的数据,即一个DocumentFragment对象。
3、举例:
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="new"></div>
<script src="../js/addLoadEvent.js"></script>
<script src="../js/getHTTPObject.js"></script>
<script src="../js/getNewContent.js"></script>
</body>
</html>
addLoadEvent.js:
function addLoadEvent(func)//此函数参数为打算在页面加载完毕时执行的函数的名字
{
var oldonload = window.onload;//网页加载完毕时会触发onload事件
if(typeof window.onload != 'function')//如果这个处理函数还未绑定任何函数
{
window.onload = func;//把新函数添加给它
}
else//如果这个处理函数已经绑定了一些函数
{
window.onload = function()//把新函数追加到现有指令的末尾
{
oldonload();
func();
}
}
}
getHTTPObject.js:
function getHTTPObject()
{
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function()
{
try
{
return new ActiveXObject("Msxmll2.XMLHTTP.6.0");//在IE中创建新的对象
}
catch(e)
{}
try
{
return new ActiveXObject("Msxmll2.XMLHTTP.3.0");
}
catch(e)
{}
try
{
return new ActiveXObject("Msxmll2.XMLHTTP");
}
catch(e)
{}
return false;
}
return new XMLHttpRequest();//在其他浏览器中创建对象
}
getNewContent.js:
function getNewContent()
{
var request = getHTTPObject();
if(request)
{
request.open("GET","example.txt",true);//指定请求类型(GET,POST,SEND),服务器上将要访问的文件,请求是否以异步方式发送和处理
request.onreadystatechange = function()
{
if(request.readyState == 4)
{
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
}
else
{
alert('Sorry,your browser doesn\'t support XMLHttpRequest');
}
}
addLoadEvent(getNewContent);
example.txt:
Hello world !
注:在使用Ajax时要注意同源策略,使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一域的数据,不能向其他域发送请求。此外,还有如Chrome浏览器会限制Ajax请求使用的协议。