使用Ajax技术实现动态页面更新-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>User ResponseText With innerHTML</title>
    <script type="text/javascript">
    var xmlHttp;//声明全局XmlHttpRequest
    function createXMLHttpRequest() //创建一个xmlhttprequest
    {
        if(window.ActiveXObject)//IE浏览器把xmlhttprequest看成一个activeX控件。
        {
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        else//其他浏览器
        {
            xmlHttp= new XMLHttpRequest();
        }
    }
    
    function startRequest()
    {
        createXMLHttpRequest();
        xmlHttp.onreadystatechange=handleStateChange;//设定请求状态改变时，响应的函数
        xmlHttp.open("GET","innerHTML.xml",true);//建立调用，向innerHTML.xml发送请求，innerHTML.xml模拟服务器
        xmlHttp.send();//发送请求
    }
    
    function handleStateChange()
    {
        
        if(xmlHttp.readyState==4)//请求完成，0=未初始化；1=正在加载；2=已加载；3=交互中；4=完成
        {
                       if(xmlHttp.status==200)//请求状态，200为正常返回。
            {
                document.getElementById("results").innerHTML=xmlHttp.responseText;//返回文本绘制页面
            }
        }
    }
    </script>
</head>
<body>
<form action="#">
<input type="button" value="click me" onclick="startRequest();"/>
<div id="results"></div>
</form>
</body>
</html>

<table border="1">
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
<tr>
<th>WaterSkiing</th>
<th>Dock #1</th>
<th>9:00 AM</th>
</tr>
</table>

一个XmlHttpRequest与普通的Http请求流程上没有太大的差别，具体分为：
1.open():建立对服务器的调用，这里设定调用是异步还是同步，这里的异步也就是Ajax里面那个大A。设定为同步，处理只有等待服务器返回相应才继续。一般情况下设定为True，这才与XmlHttpRequest初衷相符合。
2.send(content):向服务器发送请求。
3.得到responseText或者responseXml进行处理。
以上代码对各步骤进行了说明。Ajax核心就是处理XmlHttpRequest对象，深入学习，需要对javascript面向对象编程有深入的了解。这样可以把js代码与html完全分离，实现自己的业务逻辑。

Ajax原理