关于Ajax实现的简单示例
2024-09-07 22:40:59
一、代码示例
关于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请求问题。
四、参考资料
- 《JavaScript DOM编程艺术(第2版)》[英]Jeremy Keith [加]Jeffrey Sambells著 杨涛等译,人民邮电出版社. 第115页-第119页
- Ajax教程
最新文章
- 【Java心得总结六】Java容器中——Collection
- LLVM example for main
- 4.总结近5周以来的github上的工作情况,以图表方式分析你小组的工作情况、存在的问题及解决的方案。(尤心心)
- StringMisc
- 关于union的那些事儿
- SRM 403(1-250pt, 1-500pt)
- 五金配件行业ERP解决方案
- OBS studio最新版配置鉴权推流
- RabbitMQ消息队列的小伙伴: ProtoBuf(Google Protocol Buffer)
- 读《图解HTTP》有感-(与HTTP协作的WEB服务器)
- windows安装多个python及pip版本
- Windows 10 RS4 无法完全关闭Hyper-V导致Virtual Box 虚拟机无法启动
- Linux服务器重启后eureka报错
- Apache Commons Digester 三(规则注解)
- Eclipse个人规范化设置
- 解决Web部署 svg/woff/woff2字体 404错误 iis 解决Web部署 svg/woff/woff2字体 404错误
- libevent源码剖析
- while(cin>;>;word)时的结束方法
- 初始python(三)
- Oracle 与 MySQL 批量添加
热门文章
- 第3章 CentOS常用命令
- Java 正则表达式的使用
- FireDAC 出现Variable length column[*] overflow. Value length - [80], column maximum length
- Interface Builder中的技巧
- Attempt to invoke virtual method &#39;void android.app.ActionBar.setTitle的解决方法
- iOS -- 十进制、十六进制字符串,byte,data等之间的转换
- SDUTOJ 2826 小P寻宝记——好基友一起走
- C#.NET的TabControl如何隐藏和显示页面
- vue class绑定 组件
- windows forget jenkins password.