免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1584 | 回复: 0

ajax 与XMLHttpRequest对象 [复制链接]

论坛徽章:
0
发表于 2011-12-23 02:47 |显示全部楼层
[ 本帖最后由 tkchks 于 2011-12-25 19:13 编辑 ]

使用XMLHttpRequest对象发送请求的基本步骤如下:
创建一个XMLHttpRequest的引用
告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要设置onreadystatechange属性
指定请求的属性。open()
将请求发送给服务器。send()
xmlHttp.responseText将响应提供为一个串

以下示例代码包括两个文件,分别为:
simpleRequest.html和simpleResponse.xml

以下为其完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>simpleRequest.html</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   </head>
  <script type="text/javascript" >
    var xmlHttp;
   //创建一个XMLHttpRequest对象
    function createXMLHttpRequest()
    {
      if(window.ActiveXObject)
      {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest)
      {
        xmlHttp = new XMLHttpRequest();
      }
    }
   
    //开始一个请求
    function startRequest()
    {
      createXMLHttpRequest();
      xmlHttp.onreadystatechange = handleStateChange;
      xmlHttp.open("GET","simpleResponse.xml",true);
      xmlHttp.send(null);
    }
   
    //当xmlHttp对象的内部状态发生变化时候,调用此处理函数
    //一旦接受到相应(readyState为4)
    function handleStateChange()
    {
      if(xmlHttp.readyState == 4)
      {
         if(xmlHttp.status == 200)
         {
           alert("The server replied with:"+xmlHttp.responseText);
           document.getElementById("result").innerHTML = xmlHttp.responseText;
         }
      }
    }
  </script>
  <body>
     <form>
        <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
     </form>
     <div id="result" style="boder:1px solid red;width:400px;height:200px;">box</div>
     <hr/>
     <ul>使用XMLHttpRequest对象发送请求的基本步骤如下:
         <li>创建一个XMLHttpRequest的引用</li>
         <li>告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要设置onreadystatechange属性</li>
         <li>指定请求的属性。open()</li>
         <li>将请求发送给服务器。send()</li>
         <li>xmlHttp.responseText将响应提供为一个串</li>
     </ul>
</body>
</html>


<?xml version="1.0" encoding="UTF-8"?>
<books>
   <book>
      <author>Henry</author>
      <pubdate>2011-11-11</pubdate>
      <Subject>西游记</Subject>
   </book>
    <book>
      <author>Kater</author>
      <pubdate>2015-11-11</pubdate>
      <Subject>娃哈哈</Subject>
   </book>
</books>

效果:当点击页面上的button后,会alert出一个框,其中内容为xml文件中的内容。然后在html页面中id=result的div中显示xml中的信息。
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP