1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  <script>
  7.  var xhr=initAjax();
  8.  function initAjax()
  9.  {
  10.      if(window.XMLHttpRequest)
  11.      {
  12.          return new XMLHttpRequest();
  13.      }
  14.      else if(window.ActiveXObject)
  15.      {
  16.          try
  17.          {
  18.              return new ActiveXObject("Msxml2.XMLHttp");
  19.          }
  20.          catch(e)
  21.          {
  22.              try
  23.              {
  24.                  return new ActiveXObject("Microsoft.XMLHttp");
  25.              }
  26.              catch(e)
  27.              {
  28.                  //return undefined
  29.                  alert("Your browser doesn't support AJAX!");
  30.              }
  31.          }
  32.      }
  33.  }
  34.  function showInfo()
  35.  {
  36.      //var xhr=new ActiveXObject("Msxml2.XMLHttp");
  37.      if(xhr!=null)
  38.      {
  39.          xhr.onreadystatechange=xhrStateChange;
  40.          xhr.open("GET","info.xml",true);
  41.          xhr.send(null);
  42.      }
  43.  
  44.  }
  45.  function xhrStateChange()
  46.  {
  47.      if(xhr.readyState==4)
  48.      {
  49.          document.getElementById("infoDiv").innerHTML=xhr.responseText;
  50.      }
  51.      else if(xhr.readyState==3)
  52.      {
  53.          document.getElementById("infoDiv").innerHTML="Loading...";
  54.      }
  55.  
  56.  }
  57.  </script>
  58.  </head>
  59.  <body>
  60.  <input type="button" value="click me" onclick="showInfo()">
  61.  <div id="infoDiv"></div>
  62.  </body>
  63.  </html>

initAjax函数实现了对浏览器的兼容(IE5,6), 不过现在ActiveX技术早已过时, 被浏览器默认禁用.

showInfo函数中将xhrStateChange函数绑定到onreadystatechange事件, 注意这种绑定方式不支持传参(只写函数名不能加括号)!!!而且这句代码写在函数外也是可以的.结果如下

第49行如果把innerHTML改为innerText, 则将不考虑xml文件中的标签, 内容原样显示, 如下

另外, xhr除了responseText属性, 还有一个属性:responseXml.

附readyState的各状态

Ajax基本写法的更多相关文章

  1. ajax提交写法

    <script> /* ajax提交写法 */ function add_prize() { // var query={}; var query = new Object(); quer ...

  2. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  3. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. jquery ajax分页写法

    jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...

  5. ajax标准写法

    ajax 标准写法 $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", / ...

  6. JQuery的Ajax标准写法

    Ajax的标准写法 $.ajax({ url:"http://www.xxx",//请求的url地址 dataType:"json",//返回的格式为json ...

  7. Ajax原生写法

    用太久JQuery了,别忘了Ajax原生是怎么写的 var Ajax = { get : function (url, callback) { var req = Ajax.getRequest(ca ...

  8. JQuery中ajax请求写法

    $.ajax({ type: "POST", url: "ygdwController.do?getonygdw", data : "id=" ...

  9. ajax常用写法

    $.ajax( url,{ type:"post", data:{},}) .done(function() { alert("success"); }) .f ...

  10. jquery ajax标准写法

    $.ajax({ url:url,                      //地址 type:'post', //请求方式 还可以是get type不可写成Type 不让会导致数据发送不过去,使用 ...

随机推荐

  1. 破解IntelliJ IDEA 2017

    一.下载地址 http://www.jetbrains.com/idea/ 二.下载破解jar包 http://idea.lanyus.com/ 2.1 将下载好的jar包放在IDEA的bin文件下 ...

  2. Spark 机器学习 ---Word2Vec

    package Spark_MLlib import org.apache.spark.ml.feature.Word2Vec import org.apache.spark.sql.SparkSes ...

  3. 禁用backspace网页回退功能

    <script language="JavaScript">document.onkeydown = check;function check(e) { var cod ...

  4. max_allowed_packet设置问题

    最近在运行的项目出现了一个线上事故,有人反映商城的东西下不了单了,到后台看了一下,果然报了一个错 Cause: com.mysql.jdbc.PacketTooBigException: Packet ...

  5. .net 必看书籍2

    一.入门 1.<HTML与CSS入门经典(第7版) >HTML入门 点评:html语言的入门,由于html极其简单所以同类其他书也可代替,本书并非经典,本书摆在这里纯属占位!你可以用其他书 ...

  6. SQLYog 快捷键

    SQLYog常用快捷键 Ctrl+M     创建一个新的连接Ctrl+N     使用当前设置新建连接Ctrl+F4    断开当前连接 对象浏览器F5         刷新对象浏览器(默认)Ctr ...

  7. Django总结一

    HTTPRequest与HTTPresponse 一. 1.互联网两台机器之间通行:ip.端口.协议 - 协议 - HTTP (80) - HTTPS (443) 2.浏览器输入URL一回车返回页面发 ...

  8. Hadoop Hive概念学习系列之hive里的优化和高级功能（十四）

    在一些特定的业务场景下,使用hive默认的配置对数据进行分析,虽然默认的配置能够实现业务需求,但是分析效率可能会很低. Hive有针对性地对不同的查询进行了优化.在Hive里可以通过修改配置的方式进行 ...

  9. Unity学习-元素类型（三）

    在看下面操作时,先记住三句话 1.游戏对象 是由 组件 组成的:衣服 2.材质(Material):就是衣服的设计方案 3.纹理(Texture):做衣服的布料 从GameObject到Cube 第一 ...

  10. V3的普通窗体控件的使用

    1.文本: 属性: 标签对齐方式: Left  Right  Center 值对齐方式: Left  Right  Center 事件: 值改变事件 值加载事件 单击标题事件 键盘按下事件 获得焦点事 ...