Ajax实现异步请求后台XML数据(初学Ajax整理笔记)

index.html

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>异步请求</title>
  <script type="text/javascript" language="javascript">
       var xmlHttp;
       //创建XMLHttpRequest对象
       function createXmlHttpRequest()
       {
            if(window.ActiveXObject)//判断浏览器是否是IE并且支持XMLHttpRequest
            {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
           else if(window.XMLHttpRequest)//判断浏览器是否支持XMLHttpRequest对象
           {
                 xmlHttp = new XMLHttpRequest();
            }
        }
       function startRequest()
       {
            createXmlHttpRequest();
            xmlHttp.onreadyStatechange = readyStatechangeHandle;//实现读取服务器状态函数
            xmlHttp.open("POST","Hello World.xml",true);//设置如何读取服务器
            xmlHttp.send(null);//向服务器发送请求
        }
       function readyStateChangeHandle()
       {
             //判断读取服务器状态
             if(xmlHttp.readyState==4)
             {
                  if(xmlHttp.status==200)
                   {
                         //得到页面中的Div
                          var div = document.getElementById("divHelloWorld");
                          //接收服务器响应的XML文档
                          var xmlDoc = xmlHttp.responseXML;
                         //解析服务器性赢得XML文档
                         var date = xmlDoc.getElementsByTagName("data"[0].firstChild.nodeValue);
                         div.innerHTML="<b>"+data+"</b>";//将服务器数据填入Div中
                     }
                }
            }
  </script>
</head>
<body>
       <div align="center" id="divHelloWorld" style="width:100%"></div>
       <div align="center" style="width:100%">
              <input type="button"  value="Hello World" id="btnRequest" οnclick="startRequest()"/>
    </div>
</body>
</html>

xml文件

<?xml version="1.0" encoding="utf-8"?>
<HelloWorld>
     <data>
          Hello World
     </data>
</HelloWorld>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章