AJAX初探

来源：互联网发布：linux at命令编辑：程序博客网时间：2024/04/29 12:15

AJAX 工作过程

###########################
# 1.创建一个 xmlhttp 对像，注：IE6、iE5 的创建方法不同
var xmlhttp=new XMLHttpRequest();

#################
# 2.指定 XMLHttpRequest 对像的 onreadstatechange 函数
xmlhttp.onreadystatechange=function()
        {
        //存有 XMLHttpRequest.readyState 的状态。从 0 到 4 发生变化。
        //    0: 请求未初始化
        //    1: 服务器连接已建立
        //    2: 请求已接收
        //    3: 请求处理中
        //    4: 请求已完成，且响应已就绪

        //XMLHttpRequest.status
        //200: "OK"
        //404: 未找到页面
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
        }

###############
# 3.调用 open() 函数指定方法，打开页面，是否异步
xmlhttp.open("GET","/jtest.html",true);
//AJAX 只能打开本站页面

##############
# 4.调用 send() 函数，发送请求
xmlhttp.send();

#############
# send() 方法调用后，每次xmlhttp.readyState值更改都会调用 onreadystatechange() 函数
# 当 readyState 值为4 ，则表示成功取得信息，并将返回信息保存到了 xmlhttp.responseText 变量中

示例代码：

<html>
<head>

<script type="text/javascript">
var myMess="";
function echoMess(str){
        myMess = myMess + str +"</br>";
        document.getElementById("myMess").innerHTML=myMess;
}

function loadXMLDoc()
{
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                echoMess("onreadystatechange 方法运行:readState="+xmlhttp.readyState);
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","jtest.html",true);
        xmlhttp.send();
}
</script>

</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

<hr>
<p>调试信息</p></br>
<div id="myMess">
</div>
<script type="text/javascript">
//      echoMess("test");
</script>
</body>
</html>