JavaScript DOM 编程艺术之 Ajax

Ajax用于概括异步加载页面内容的技术。以前web应用都要涉及打量页面刷新，即使页面中的一小部分有变化，也要刷新和重新加载整个页面。使用Ajax可以做到只更新页面中的一小部分，主要优势在于对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来相应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。利用Ajax，Web应用可以呈现出功能丰富，交互敏捷，类似桌面应用般的体验。

Ajax技术的核心是XMLHttpRequest对象。

这个对象充当着浏览器中的脚本（客户端）与服务器端之间的中间人的角色。

通过两个js脚本简单了解ajax

try-catch错误处理语句：

try {
    //可能会导致错误的代码  
} catch (error) {
    //在错误发生时怎么处理
}

首先在html当前目录建立一个文本文档输入一句话用来充当服务器端脚本的输出

第一js脚本用来获取XMLHttpRequest对象

不同的IE版本中使用的XMLHTTP对象不同，为了兼容所有的服务器，第一个脚本如下

function getHTTPObject() {
    if (typeof XMLHttpRequest == "undefined")
        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;
}
    return new XMLHttpRequest();
}

以上脚本最终会返回一个新的XMLHttpRequest或XMLHTTP对象，或返回false

XMLHttpRequest对象有许多方法，open方法用来指定服务器上将要访问的文件，指定请求类型：GET、POST、SEND，第三个参数指定请求是否以异步方式发送和处理。

request.open("方法", "文件", true)

onreadystatechange是一个事件处理函数，会在服务器给XMLHttpRequest对象发回响应的时候被触发执行。

request.onreadystatechange = function () {

// 处理响应

}

浏览器会在不同阶段更新readyState属性的值：

0 未初始化

1 正在加载

2 加载完毕

3 正在交互

4 完成

访问服务器发送回来的数据通过两个属性可以访问

responseText 用于保存文本字符串形式的数据

responseXML 用于保存Content-Type=text/xml的数据，其实是一个DocumentFragment对象，可以用DOM方法处理这个对象。

明确了如何处理响应，就可以用send方法发送请求了：

request.send(null);

Ajax中send方法参数的使用:

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。

例如：

var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);

第二个脚本用来获取内容

function getNewContent() {
    var request = getHTTPObject();
    if (request) {
        request.open("GET", "example.txt", true);
        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);

其中addLoadEvent是自己编写的加载函数

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    }else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

这样，将以上两个js脚本插入含有id为new的div节点的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
    <div id="new"></div>

    <script src="script/addLoadEvent.js"></script>
    <script src="script/getNewContent.js"></script>
    <script src="script/getHTTPObject.js"></script>
</body>
</html>

就完成了一次简单的Ajax请求

需要注意的是：

1.在使用Ajax时，要注意同源策略，使用XMLHttpRequest对象发送的请求只能访问于其所在的HTML处于同一个域中的数据。

2.脚本在发送XMLHttpRequest请求后，仍然会继续执行，不会等待响应返回。也就是说脚本不会等待send的响应，而是会继续执行。

为此，如果其他脚本依赖于服务器的响应，就得把响应代码写到onreadystatechange属性对应的函数中，这是异步性。

JavaScript DOM 编程艺术之 Ajax

猜你喜欢