<!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. Java程序学习中各阶段的建议

    第一部分:对于尚未做过Java工作的同学,包括一些在校生以及刚准备转行Java的同学. 一.Java基础 首先去找一个Java的基础教程学一下,这里可以推荐一个地址,或者你也可以参照这个地址上去找相应 ...

  2. linux ifconfig命令配置ip地址

    Linux下网卡命名规律:eth0,eth1. 第一块以太网卡.第二块. lo为环回接口,它的IP地址固定为127.0.0.1.掩码8位. 它代表你的机器本身.   ifconfig [Interfa ...

  3. R环境中的工作空间（workspace）

    工作空间(workspace)就是当前R的工作环境,它储存着全部用户定义的对象(向量.矩阵.函数.数据框.列表) . 在一个R会话结束时,你能够将当前工作空间保存到一个镜像中.并在下次启动R时自己主动 ...

  4. Bing Maps进阶系列五：通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图

    Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方便的开发模 ...

  5. SQL service

    依赖关系解决 ============================================================================================= ...

  6. AD9850驱动程序--MSP430版本

    前段时间忙着画板子搞运放搞滤波了,程序更新的少,发现MSP430不是太好用,尤其Timer,不过也与我使用内部晶振有关,产生正玄波之前用MSP430发出PWM,再进行滤波变为正弦波太麻烦了,这次改用D ...

  7. VPS主机

    腾讯云企业认证 备案域名要是顶级域名格式,所以不能是www.blueheartzf.com,而要是blueheartzf.com

  8. Counterfeit Dollar

    http://poj.org/problem?id=1013 #include<stdio.h> #include<string.h> #include<math.h&g ...

  9. [Swift通天遁地]三、手势与图表-(3)通过捏合手势放大和缩小图像视图

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. Jquery 表单基础元素操作总结

    最近做前端比较多总结一些常用功能: radio 单选选中并且出发change事件: $(selector).find('input:radio[name=valuationMode]').filter ...