一、代码示例

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

<!doctype html>

<html lang = "en">

<head>

    <meta charset = "utf-8">

    <title>使用Ajax异步加载数据</title>

    <script type = "text/javascript">

        function loaded() {

            var xmlhttp = null;    //定义一个变量存储XMLHttpRequest对象

            //使用try-catch获取XMLHttpRequest对象，XMLHttpRequest对象是实现Ajax的核心基础

            try {

                xmlhttp = new XMLHttpRequest();    //针对Firefox，chrome，Safari等浏览器

            }

            catch(e) {

                try {

                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");   //IE浏览器

                }

                catch(e) {

                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   //老式IE浏览器

                }

            }

            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     //当请求已完成，且服务器响应状态就绪时

                    //alert(xmlhttp.responseText);

                    document.getElementById("new").innerHTML = xmlhttp.responseText;

                    //document.getElementById("new").innerText = xmlhttp.responseText;

                    //使用innerText属性，一直无法得到Ajax的响应字符数据，搞不懂什么原因，目前只能通过innerHTML属性获取输出"example.txt"字符数据

                }

            }

            xmlhttp.open("GET","example.txt",true); //说明请求方式类型，以获取html文档同路径下的一个txt文档数据为例，直接跳过后台脚本交互过程，简单的示例哈~~

            xmlhttp.send();         //发送请求

        }

        window.onload = function(){

            loaded();

        }

    </script>

</head>

<body>

    <div id = "new">ok,that's shit!!!</div>

    <!-- <input type = "button" value = "shit" /> -->

</body>

</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. JavaScript世界万物诞生记

    作者:manxisuo链接:https://zhuanlan.zhihu.com/p/22989691来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 一. 无中生有 起 ...

  2. Unity -- 入门教程三

    进入这个页面,按编译器版本进行下载,我用的是2010,所以要下载这个. 安装就不用我教了,下面开始看我是如何导入Unity VS的. 点击Import之后我们会发现并没有发生什么,但是接下来我们按一下 ...

  3. 谈一次Linux的木马攻击数据爆满造成的Mysql无法启动

    起初以为是mysql它们之间的扩展没有开启! 后来发现,木马的确使它初始化了,最开始没有用图形化界面 而后,修改并且开启所有pdo扩展 VIM基本操作(除了插入,其它的命令前提是按ESC): 插入: ...

  4. jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）

    又遇到颜色主题变化,这次使用了jquery+css,使用了函数传值,而不是之前网站换肤改变link的方法. 首先是设置好颜色主题后,点击改变页面颜色主题.(需要自行导入jquery.js后查看效果) ...

  5. js动态函数

    最近项目中使用百度模板引擎baiduTemplate.js,使用动态函数解析模板中代码. 通过new Function([arg1,arg2,...,argN,]functionBody)方式实现动态 ...

  6. 现成Android 5.0系统源代码

    让Android融入我的生活! 写Android一段时间了,每次看到网上一些大牛的博客.分析Android底层Zygote启动.Activity启动.View的绘制过程.SurfaceFlinger. ...

  7. 《C程序猿：从校园到职场》出版预告(4)：从“散兵游勇”到“正规部队”

    看过电视剧<楚汉传奇>的朋友应该对这个场景还有印象:当刘邦第一次去找项羽帮忙的时候.他们一行人看到了项羽军营是怎样练兵的.想到自己练兵的方法,当时就震惊了."刘家军"就 ...

  8. GIS+=地理信息+行业+大数据——纽约公开11亿条出租车和Uber原始数据下载及分析

    一览众山小编辑团队 原文/ Todd Schneider 翻译/ 沈玮薇 陈翚 文献/ 蒋理 校核/ 众山小编辑/ 众山小 排版/ 徐颖 2014-2015 © 转载请注明:源自公众号"一览 ...

  9. Python的专有属性

  10. 轻松搞定RabbitMQ（三）——消息应答与消息持久化

    转自 http://blog.csdn.net/xiaoxian8023/article/details/48710653 这个官网的第二个例子中的消息应答和消息持久化部分.我把它摘出来作为单独的一块 ...