下面的例子展示了你如何动态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. **优化策略**:通常,初始加载只展示顶级节点,其余节点按...