Ajax 使用

创建动态网页的技术

Ajax 介绍

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

Ajax实现原理

1. 创建XMLHttpRequest对象(此对象用于与服务器进行数据交换)
2. 向服务器发送请求,依次调用对象的open()与send()方法

xmlHttpRequest.open("method","url",async);
xmlHttpRequest.send(string)

3. 当请求被发送到服务器时，我们需要执行一些基于响应的任务,
   每当 readyState(0-4) 改变时，就会触发 onreadystatechange 事件,
   readyState 属性存有 XMLHttpRequest 的状态信息(200 or 404)。

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

4. 获取服务器的响应,使用对象的responseText或者responseXml

• responseText 获得字符串形式的响应数据

document.getElemntById("id").innnerHtml=xmlHttp.responseText

• responseXML 获得 XML 形式的响应数据

注意:url可以通过增加随机数来避免缓存情况

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}