一、代码示例

关于Ajax的基本概念（包括XMLHttpRequest对象及其相关方法属性）移步这里（w3school中文版）学习了解。

  1. <!doctype html>
  2. <html lang = "en">
  3. <head>
  4.     <meta charset = "utf-8">
  5.     <title>使用Ajax异步加载数据</title>
  6.     <script type = "text/javascript">
  7.         function loaded() {
  8.             var xmlhttp = null;    //定义一个变量存储XMLHttpRequest对象
  9.             //使用try-catch获取XMLHttpRequest对象，XMLHttpRequest对象是实现Ajax的核心基础
  10.             try {
  11.                 xmlhttp = new XMLHttpRequest();    //针对Firefox，chrome，Safari等浏览器
  12.             }
  13.             catch(e) {
  14.                 try {
  15.                     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   //IE浏览器
  16.                 }
  17.                 catch(e) {
  18.                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   //老式IE浏览器
  19.                 }
  20.             }
  21.  
  22.             xmlhttp.onreadystatechange = function () {
  23.                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     //当请求已完成，且服务器响应状态就绪时
  24.                     //alert(xmlhttp.responseText);
  25.                     document.getElementById("new").innerHTML = xmlhttp.responseText;
  26.                     //document.getElementById("new").innerText = xmlhttp.responseText;
  27.                     //使用innerText属性，一直无法得到Ajax的响应字符数据，搞不懂什么原因，目前只能通过innerHTML属性获取输出"example.txt"字符数据
  28.                 }
  29.             }
  30.             xmlhttp.open("GET","example.txt",true); //说明请求方式类型，以获取html文档同路径下的一个txt文档数据为例，直接跳过后台脚本交互过程，简单的示例哈~~
  31.             xmlhttp.send();         //发送请求
  32.         }
  33.         window.onload = function(){
  34.             loaded();
  35.         }
  36.     </script>
  37. </head>
  38.  
  39. <body>
  40.     <div id = "new">ok,that's shit!!!</div>
  41.     <!-- <input type = "button" value = "shit" /> -->
  42. </body>
  43. </html>

二、效果截图

三、结论

虽然理论能看的明白，但还是要多实践、敲代码才是真理！这次虽然是一个简单示例，却没料想因为使用innerText属性无法输出Ajax获取的数据，找了老半天都没发现问题，也不知道原因，只能使用innerHTML属性（其实就是Firefox不支持innerText属性而已，可以使用textContent替代）。主要结论如下：

1、直接在本地硬盘建立一个.txt文档作为Ajax请求的数据源时，chrome、IE浏览器会限制Ajax请求使用的协议。比如请求路径是file://协议从自己硬盘里加载example.txt文件，就会看到"Cross origin requests are onlu supported for HTTP"(跨域请求支持HTTP协议)的错误信息（如图）。Firefox浏览器没有限制。

2、基于Firefox浏览器，使用innerText属性无法输出Ajax获取的txt文档字符数据，而使用innerHTML属性可正常获取输出（写入当前HTML文档中），原因暂不明。

3、至于上述IE、Chrome浏览器不支持本地文件Ajax请求，可使用JQuery的Ajax相关的接口方法，或者使用WebStorm开发工具编写上述代码，即可解决本地测试ajax请求问题。

四、参考资料

  1. 《JavaScript DOM编程艺术（第2版）》[英]Jeremy Keith [加]Jeffrey Sambells著 杨涛等译,人民邮电出版社. 第115页-第119页
  2. Ajax教程

关于Ajax实现的简单示例的更多相关文章

  1. Ajax -- 原理及简单示例

    1. 什么是Ajax •Ajax被认为是(AsynchronousJavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 2. Ajax ...

  2. AJAX的简单示例：注册校验

    众所周知,我们每次需要注册一个网站的用户名时,都会校验该邮箱.用户名是不是正确的格式.是不是有被使用过,密码是否符合规则,二次确认是否符合. 如果这些校验都采用form表单提交的话,会给用户带来极不好 ...

  3. Spring MVC 文件上传简单示例(form、ajax方式 )

    1.Form Upload SpringMVC 中,文件的上传是通过 MultipartResolver 实现的,所以要实现上传,只要注册相应的 MultipartResolver 即可. Multi ...

  4. Web API 简单示例

    一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...

  5. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  6. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  7. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  8. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  9. Linux下的C Socket编程 -- server端的简单示例

    Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...

随机推荐

  1. 利用例子来理解spring的面向切面编程(使用@Aspect)

    上篇的例子,自动装配和自动检测Bean是使用注解的方式处理的,而面向切面编程是使用aop标签处理的,给我感觉就像中西医参合一样. 现在就来优化优化,全部使用注解的方式处理. 1.工程图:

  2. luogu P1310 表达式的值

    题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. “× ”运算优先于“⊕”运算,即计算表达式时,先计算× 运算,再计算⊕运算.例如:计算表达式A⊕B × ...

  3. ssm框架 spring的主配置文件 spring-mvc主配置文件 web.xml配置文件(基础的配置文件)

    1.spring主配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  4. Java原子类及内部原理

    一.引入 原子是世界上的最小单位,具有不可分割性.比如 a=0:(a非long和double类型) 这个操作是不可分割的,那么我们说这个操作是原子操作.再比如:a++: 这个操作实际是a = a + ...

  5. Hystrix的介绍和简单使用

    这周在看项目的相关代码时,接触到了Hystrix,因此查询了相关资料学习了下. 一.什么是Hystrix Hystrix是Netflix针对微服务分布式系统的熔断保护中间件,当我们的客户端连接远程的微 ...

  6. input 对伪元素(:before :after)的支持情况

    最近做一个自定义视觉效果的Switch组件,用到了 input:radio 和 label,并在label里用伪元素 :before 模拟状态的切换效果. 但是同事评审的时候说可以不用label,直接 ...

  7. TdxBarButton的FASTSCRIPT封装

    TdxBarButton的FASTSCRIPT封装 // cxg 2017-2-13 unit fs_dev; interface{$i fs.inc}uses fs_iinterpreter, fs ...

  8. NSThread学习

    使用多线程可以防止主线程阻塞.同时也可以将一个大的任务分成若干个小的任务去做. 常用方法一: 1, 首先使用  detachNewThreadSelector:toTarget:withObject: ...

  9. Xcode搭建真机调试环境 图文实例

    本文介绍的Xcode搭建真机调试环境 图文实例,图文并茂,使我们学习起来更方便些,我们先来看内容. AD: 2013云计算架构师峰会超低价抢票中 Xcode搭建真机调试环境 是本文要介绍的内容,不多说 ...

  10. jsp中获取spring 管理的bean(通过config)

    WebApplicationContext wac = (WebApplicationContext)config.getServletContext().getAttribute(WebApplic ...