下面的例子展示了你如何动态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
分享到：
相关推荐
在"ns-window--ajax页面动态加载弹出窗口"这个例子中，可能涉及的是通过Ajax技术实现弹窗内容的动态加载。这通常发生在用户点击某个按钮或链接时，触发Ajax请求，获取服务器上的数据，然后动态插入到弹出窗口的DOM...
"使用Ajax动态加载JSON文件"这个主题就涉及到了两个核心概念：Ajax和JSON。Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。而JSON（JavaScript Object ...
总结来说，"AjaxTree实现动态加载"是利用Ajax技术优化的树形数据展示方法，通过按需加载节点数据，提高了Web应用的性能和用户体验。这种技术广泛应用于各种需要层次结构数据展示的场景，如文件管理系统、组织结构图...
本文将深入探讨Ajax如何与JSP（JavaServer Pages）和Servlet结合，实现动态加载数据。 首先，我们需要了解JSP和Servlet的基础概念。JSP是一种服务器端的技术，用于生成动态网页。开发者可以在JSP文件中混合HTML、...
Ajax技术的核心是XMLHttpRequest对象，它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换，从而实现局部刷新，提升响应速度和交互性。 ### Ajax与XMLHttpRequest Ajax技术最早由Adaptive Path提出，...
这个技术的核心在于利用Ajax（异步JavaScript和XML）来实现页面内容的动态加载，而无需刷新整个页面。这不仅可以减少服务器负载，还能节省用户流量，提供流畅的浏览体验。 PHP是一种服务器端脚本语言，常用于构建...
本文将深入探讨如何利用Ajax实现动态加载树形结构，并结合dhtmlx库中的dhtmlxMenu和dhtmlxTree组件，实现支持右键菜单、复选框、拖拽以及排序功能，同时支持json和xml格式的数据加载。 首先，我们要理解Ajax的工作...
"图片ajax动态分批加载"是一种优化策略，通过结合PHP和AJAX技术，可以实现图片的按需加载，即用户滚动到页面底部时，再动态加载下一批图片，这样既提高了页面加载速度，又不影响用户浏览。 首先，我们需要理解PHP和...
### Ajax之XMLHttpRequest详解 ...掌握XMLHttpRequest的使用，对于提高Web应用程序性能和用户体验至关重要。未来，随着技术的进步，类似的API可能会继续发展和完善，但XMLHttpRequest的基本原理和用法将保持不变。
Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术允许Web应用程序在后台与服务器进行数据交换，提升了用户体验，使得...
Ajax（Asynchronous JavaScript ...这种技术在现代 Web 开发中广泛应用于表单提交、动态加载内容、实时聊天等场景，极大地提高了用户体验和交互效率。了解和熟练掌握 Ajax 技术对于任何Web开发者来说都是至关重要的。
在AjaxXMLHttpRequest_Demo02.zip中，我们可能会看到以下几个关键组成部分： 1. **HTML文件**：通常命名为index.html，它是用户界面的基础，包含用户交互的元素，如按钮、输入框等。当用户触发某个事件（如点击按钮...
总的来说，XMLHttpRequest对象是实现Ajax技术的关键，它使得前端和后端可以更高效、更灵活地交互，极大地提升了Web应用的用户体验。理解并熟练掌握XMLHttpRequest的使用，对于任何前端开发者来说都至关重要。
在实际应用中，它可能是一个JavaScript函数，通过调用XMLHttpRequest对象或使用jQuery等库来发送AJAX请求，并处理返回的数据，动态更新DOM元素，呈现更多的内容。 综上所述，实现"php ajax mysql 点击加载更多 ...
本项目"AJAX动态加载无限级树和弹出div层"正是利用这一特性，实现了动态加载无限层级的树形结构数据以及通过JavaScript弹出div层来展示相关信息。 首先，我们来详细探讨AJAX。AJAX的核心是XMLHttpRequest对象，它...
本文将深入探讨“Ajax动态加载列表框”的概念、实现方式以及相关知识点。 Ajax动态加载列表框，简单来说，就是利用Ajax技术来实现在用户交互时动态更新下拉选择框（Select Box）中的选项，而无需整个页面刷新。这种...
**Ajax 动态加载 FAQ** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快速的交互，提高了用户体验。以下是一些...
2. **异步加载树节点**：当用户展开一个节点时，使用Ajax发送请求到服务器，获取该节点的子节点数据，然后使用dtree提供的API将新数据插入到现有树中。 3. **优化策略**：通常，初始加载只展示顶级节点，其余节点按...
在现代Web开发中，为了提供更好的用户体验，尤其是在移动端，我们经常使用Ajax上拉懒加载列表。这个技术允许用户滚动页面时，数据动态加载，而无需等待整个页面刷新。"ajax上拉懒加载列表（适用于移动端）"这个项目...