<!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. 通过已有Nginx镜像创建私有仓库

    想搭建一个私有的Docker仓库,查看了各种资料,大多是使用Nginx做代理.但是因为对于Nginx不熟悉,各种关于权限认证的问题,折腾了两天也没有搞定.后来无意在网上看到一篇使用已有镜像的方法,最终 ...

  2. bzoj 1036 树的统计Count

    题目大意: 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  3. 68. 对Extjs中store的多种操作

    转自:https://www.cnblogs.com/exmyth/archive/2013/05/16/3082045.html 先来个声明,看着不错,贴过来的,没都测试过. Store.getCo ...

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

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

  5. 开源矿工README

    点击加入 NTMiner官方QQ群: 863725136 开源矿工内置的所有内核均为原版,开源矿工永远不会额外增加矿工支出: 开源矿工永远开源: 开源矿工永远不会去破解国人开发的内核: 下载地址 阿里 ...

  6. python自动化测试学习笔记-4常用模块

    常用模块 1.os 2.sys 3.random 4.string 5.time 6.hashlib 一.os模块 os模块主要用来操作文件.目录,与操作系统无关.要使用os模块首先要导入OS模块,用 ...

  7. jsp之servlet模板问题

    如果你在web项目下创建一个Servlet类,那么它会自带很多东西,比如有很多的注释,还有很多out.println()语句等.可能这些东西都不是你需要,这样看起来就会比较的令人不爽.下面的话就教大家 ...

  8. c#异步多线程

    1.asyncrel = delegate.BeginInvoke实现委托异步调用. 2.异步等待 asyncrel.IsCompleted用于判断是否执行完毕 or EndInvoke用于等待执行完 ...

  9. Java系列学习(四)-运算计算

    1.运算符 (1)算术运算符 A:+,-,*,/,%,++,-- B:+的用法 [a.加法] [b.正号] [c.字符串连接付] C:/和%的区别 [数据做除法的时候,/取的是商,%取的是余数] D: ...

  10. Python Base of Scientific Stack（Python基础之科学栈）

    Python Base of Scientific Stack(Python基础之科学栈) 1. Python的科学栈(Scientific Stack) NumPy NumPy提供度多维数组对象,以 ...