<!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. 带你装B,带你飞的大数据时代

    我接触过的大数据有: 1.美国棱镜计划 2.前几天新闻报道的,苹果公司窃取用户隐私 3.百度的用户搜素习惯统计分析 4.淘宝的用户购物习惯分析,智能推荐宝贝 5.浏览器的智能标签页 ... 最想了解的 ...

  2. HDU 5289 Assignment （二分+区间最值）

    [题目链接]click here~~ [题目大意]: 给出一个数列,问当中存在多少连续子序列,子序列的最大值-最小值<k [思路]:枚举数列左端点.然后二分枚举右端点,用ST算法求区间最值.(或 ...

  3. 日常工作中常见的mysql优化技巧

    1.介绍一下MYSQL经常使用的优化技巧. MySQL 自带 slow log 的分析工具 mysqldumpslow ,可是没有说明.本文通过分析该脚本,介绍了其用法. slow log 是 MyS ...

  4. 【http代理报文】自己开发HTTP代理工具，不限语种。

    我们知道通过修改浏览器设置可以使用代理访问网页,其实这个操作就是修改了每次的HTTP头. 工作中,我们难免需要通过TCP/IP协议发送HTTP报文来直接请求网页内容(比如爬虫工具),有同学问如何通过H ...

  5. MBEEWALK - Bee Walk

    A bee larva living in a hexagonal cell of a large honey comb decides to creep for a walk. In each “s ...

  6. puppet开源的软件自动化配置和部署工具——本质就是CS，服务端统一管理配置

    1.  概述 puppet是一个开源的软件自动化配置和部署工具,它使用简单且功能强大,正得到了越来越多地关注,现在很多大型IT公司均在使用puppet对集群中的软件进行管理和部署,如google利用p ...

  7. [python基础]xml_rpc远程调控supervisor节点进程

    supervisor提供的两种管理方式,supervisorctl和web其实都是通过xml_rpc来实现的. xml_rpc其实就是本地可以去调用远端的函数方法,在python中只需要引入xmlrp ...

  8. zookeeper集群安装及使用详解

    1. Zookeeper简介 ZooKeeper是一个开源的分布式框架,提供了协调分布式应用的基本服务.它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronizatio ...

  9. 安装cloudermanager时如何正确Configuring TLS Security for Cloudera Manager

    不多说,直接上干货! 参考官网 https://www.cloudera.com/documentation/enterprise/5-2-x/topics/cm_sg_config_tls_secu ...

  10. [转]android-学习笔记之按钮事件

    本文转载自: http://zhangkun716717-126-com.iteye.com/blog/761080 前备知识: 1.需要了解怎么得到界面元素. 那么如何得到界面元素呢?在界面配置文件 ...