下面的例子展示了你如何动态load内容。使用AJAX和XMLHttpRequest object.
<!DOCTYPE html>
<html>
<head>
<title>Dynamically loading content using AJAX and XMLHttpRequest</title>
<style type="text/css">
blockquote {
font-style: italic;
text-align: justify;
}
</style>
</head>
<body>
<button onclick="init('lorem.txt');">Load <em>Lorem ipsum...</em></button>
<button onclick="init('404.txt');">Load invalid file</button>
<blockquote id="output"></blockquote>
<script type="text/javascript">
var xhr;
const debug = document.getElementById("output");
function xhr_onReadyStateChangeHandler(evt) {
var req = evt.currentTarget; // xhr
switch (req.readyState) {
case XMLHttpRequest.UNSENT:
case 0:
// do nothing
break;
case XMLHttpRequest.OPENED:
case 1:
// do nothing
break;
case XMLHttpRequest.HEADERS_RECEIVED:
case 2:
// do nothing
break;
case XMLHttpRequest.LOADING:
case 3:
// do nothing
break;
case XMLHttpRequest.DONE:
case 4:
if ((req.status === 200) || (req.status === 0)) {
debug.innerHTML = req.responseText;
} else {
debug.innerHTML = "<h1>Unable to load text file: status=" + req.status + "</h1>";
}
break;
}
}
function init(uri) {
xhr = new XMLHttpRequest();
xhr.onreadystatechange = xhr_onReadyStateChangeHandler;
xhr.open("GET", uri);
xhr.send();
}
</script>
</body>
</html>
源码下载
使用AJAX和XMLHttpRequest动态加载内容.zip
分享到：
相关推荐
在源网页加载之前，实现一个XMLHttpRequest的代理对象，然后覆盖全局的XMLHttpRequest，这样一但上层调用 new XMLHttpRequest这样的代码时，其实创建的是Ajax-hook的代理对象实例
简单的说，就是使用XMLHttpRequest对象和服务器端交换数据（以XML或是JSON等格式），使用JavaScript处理数据并更新页面内容。 为什么要使用AJAX？ 借助AJAX，我们可以实现： 在不重载页面的情况下，向服务器发送...
需要重点说明的是，XMLHttpRequest并不是一个W3C标准，不过许多功能已经涵盖在一个新提案中：DOM Level 3加载和保存规约（DOM Level 3 Lo Asp.net Ajax UpdatePanel.Triggers 属性 属性值 类型：System.Web.UI..::...
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。 最简单的情况下，$.ajax() 可以不带任何参数直接使用。 通过 AJAX 加载一段...
Ajax-mock-xmlhttprequest.zip,xmlhttprequest模拟测试,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况...
跨域请求，顾名思义，就是一个站点中的资源去访问另外...这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。
通过使用 JavaScript 和 XMLHttpRequest 对象，可以实现异步加载数据、动态更新网页内容、交互式用户界面等功能。 Ajax 技术的优点在于可以提高网页的响应速度和用户体验，减少带宽占用，降低服务器负载。同时，...
XMLHttpRequest 是 AJAX 的关键 现在浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 向后台请求数据readyState有五个状态0：服务器未初始化，1：服务器连接已建立，2请求已接受收，3请求...
本书重点介绍ajax及相关的工具和技术，主要内容包括xmlhttprequest对象及其属性和方法、发送请求和处理响应、构建完备的ajax开发工具、使用jsunit测试javascript、分析javascript调试工具和技术，以及ajax开发模式和...
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 ...
2、使用Ajax的好处 1、通过异步模式，提升了用户体验 2、优化了浏览器和器之间的传输，减少不必要的数据往返，减少了带宽占用 3、Ajax引擎在客户端运行，承担了一部分本来由器承担的工作，从而减少了用户量下的器...
Ajax的核心是JavaScript XmlHttpRequest对象。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest对象可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 ...
12.1.3 研究使用Ajax和XSLT的动态搜索 12.1.4 向客户端发回结果 12.2 客户端的代码 12.2.1 设置客户端 12.2.2 启动搜索过程 12.3 服务器端的PHP代码 12.3.1 创建XML文档 12.3.2 创建XSLT文档 12.4 合并XSLT和XML文档...
2) 使用DOM模型来交互和动态显示。 3) 使用XMLHttpRequest来和服务器进行异步通信。 4) 使用javascript来绑定和调用。 通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来...
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术)。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不...
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 创建 ...
Ajax异步请求的理解和使用1. Ajax 异步请求 说明2. Ajax 实现对象：XMLHttpRequest2.1 xhr 建立 Ajax 流程2.2 xhr 属性、句柄、方法3. Ajax 异步 GET/POST 请求3.1 Ajax GET 请求3.2 Ajax POST 请求 1. Ajax 异步...
Ajax-request-intercept.zip,所有请求的拦截器库，包括本机获取和本机ajax（或xmlhttprequest）,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，...
程序内容涵盖ajax基础知识，详细讲解xmlHttpRequest对象，还介绍了客户端将xml，json作为参数发送到服务器端。程序例子都是本人亲写，加载到myeclipse上都可用。例子包含自动提示，自动更新，google自动完成，进度条...
Ajax完全自学手册PPT和源代码分来上传了，需要PPT的请自己在我的资源里面查找。 1．本书1~22章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：Microsoft Visual ...