<!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script>

 var xhr=initAjax();

 function initAjax()

 {

     if(window.XMLHttpRequest)

     {

         return new XMLHttpRequest();

     }

     else if(window.ActiveXObject)

     {

         try

         {

             return new ActiveXObject("Msxml2.XMLHttp");

         }

         catch(e)

         {

             try

             {

                 return new ActiveXObject("Microsoft.XMLHttp");

             }

             catch(e)

             {

                 //return undefined

                 alert("Your browser doesn't support AJAX!");

             }

         }

     }

 }

 function showInfo()

 {

     //var xhr=new ActiveXObject("Msxml2.XMLHttp");

     if(xhr!=null)

     {

         xhr.onreadystatechange=xhrStateChange;

         xhr.open("GET","info.xml",true);

         xhr.send(null);

     }

 }

 function xhrStateChange()

 {

     if(xhr.readyState==4)

     {

         document.getElementById("infoDiv").innerHTML=xhr.responseText;

     }

     else if(xhr.readyState==3)

     {

         document.getElementById("infoDiv").innerHTML="Loading...";

     }

 }

 </script>

 </head>

 <body>

 <input type="button" value="click me" onclick="showInfo()">

 <div id="infoDiv"></div>

 </body>

 </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. Codeforces Round #327 (Div. 2)C. Median Smoothing 构造

    C. Median Smoothing   A schoolboy named Vasya loves reading books on programming and mathematics. He ...

  2. cojs1101. [Vijos1369] 难解的问题==codevs 2188 最长上升子序列

    [题目描述] 在你的帮助下,蔚蓝来到了埃及.在金字塔里,蔚蓝看到了一个问题,传说,能回答出这个问题的人就能受到埃及法老的祝福,可是蔚蓝日夜奋战,还是想不出来,你能帮帮他么?(XXX: 胡扯,教主怎么可 ...

  3. Recommendation system

    Dear Prof.Choi: My research interest is mainly the application and optimization of big data and arti ...

  4. 移植linux3.7到nuc900系列开发板遇到的问题

    通过移植学习linux新版本内核,大概了解一下内核变化. 记录一下移植过程中遇到的问题或值得注意的地方. 1,添加一款arm9芯片的支持 首先修改\arch\arm\tools\mach-types文 ...

  5. JavaScript Patterns 2.4 For-in loop

    Principle Enumeration should be used to iterate over nonarray objects. It's important to use the met ...

  6. astgo 老版本免激活完整安装包带安装命令脚本

    astgo是个国产的老牌经典软交换服务器,主要用来当回拨网络电话服务端,同时也具备群呼.传真等功能! 这个需要安装在centos 5.x 32位系统.带安装脚本,上传到root目录后执行安装脚本即可等 ...

  7. jeesite ckeditor数据库 HTML 被编码 的问题解决

    public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...

  8. codevs1154能量项链（环形dp，区间dp）

    1154 能量项链 2006年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold     题目描述 Description 在Mars星球上 ...

  9. P4166 [SCOI2007]最大土地面积

    传送门 首先,四边形的四个点肯定都在凸包上(别问我为什么我也不知道,感性理解一下好了) 那么我们可以求出凸包之后\(O(n^4)\)暴力枚举,据说在随机数据下凸包上的点只有\(O(logn)\)个可过 ...

  10. Elasticsearch搜索常用API（利用Kibana来操作）

    上面我们已经介绍了Elasticsearch的一些基本操作,这篇文章属于进阶篇,我们一起来学习. 前面我们创建了sdb和user文档,现在我们来看如何查询user中所有的文档呢? GET /sdb/u ...