Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,
XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在Amazon的购物车页面,当更新篮子中的一项物品的数量时,会重新
载入整个页面,这必须下载32K的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。
用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
Ajax可用于那些场景?
Ajax能够使用户的体验更加愉快,它可以提供响应更加灵敏的UI,并消除页面刷新所带来的闪烁。目前,由于要刷新整个页面,需要传送
大量的数据,因为必须重新发送整个页面。如果使用Ajax,服务器可以返回一个包含了感谢信息的500字节的消息,而不是发送26,813字节的消
息来刷新整个页面。即使使用的是高速Internet,传送26K和1/2K的差别也非常大。同样重要的是,只需要刷新与投票相关的一小节,而不是刷
新整个屏幕。
原始的Ajax:直接使用XmlHttpRequest
如上所述,Ajax的核心是JavaScript对象XmlHttpRequest,熟悉了该应用程序之后,进一步了解其工作原理细节。
首先,您拥有一些简单的定位点标记,它连接到一个JavaScriptcastVote(rank)函数。
function castVote(rank) {
var url = "/ajax-demo/static-article-ranking.html";
var callback = processAjaxResponse;
executeXhr(callback, url);
}
该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr,提供一个回调JavaScript函数,一旦服务器响应可用,该
函数就被执行。由于我希望它运行在一个简单的Apache环境中,“cast vote URL”只是一个简单的HTML页面。在实际情况中,被调用的URL将
记录票数并动态地呈现包含投票总数的响应。
下一步是发出一个XmlHttpRequest请求:
function executeXhr(callback, url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send(null);
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send();
}
}
}
如您所见,执行一个XmlHttpRequest并不简单,但非常直观。和平常一样,在JavaScript领域,大部分的工作量都花在确保浏览器兼容方
面。在这种情况下,首先要确定XmlHttpRequest是否可用。如果不能用,很可能要使用Internet Explorer,这样就要使用所提供的ActiveX实
现。
executeXhr()方法中最关键的部分是这两行:
req.onreadystatechange = callback;
req.open("GET", url, true);
第一行定义了JavaScript回调函数,您希望一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明您想要异步执行
该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。
function processAjaxResponse() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
502 502'votes').innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:
" +
req.statusText);
}
}
}
描述
onreadystatechange
每次状态改变所触发事件的事件处理程序
readyState
对象状态值:
0 = 未初始化(uninitialized)
1 = 正在加载(loading)
2 = 加载完毕(loaded)
3 = 交互(interactive)
4 = 完成(complete)
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数据对象
status
从服务器返回的数字代码,比如404(未找到)或200(就绪)
statusText
伴随状态码的字符串信息
现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成(readyStatus == 4),
然后根据服务器的设定询问请求状态。如果一切正常(status == 200),就使用innerHTML属性重写DOM的“votes”节点的内容。
分享到:
相关推荐
"AJAX原理与技术的深入分析" AJAX(Asynchronous JavaScript and XML)是一种异步通信技术,允许Web应用程序异步地从服务器请求数据,而不需要重新加载整个网页。下面我们将深入分析AJAX的原理、技术、意义和发展...
**Ajax原理的理解** Ajax,全称为Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它的出现极大地提升了Web应用程序的用户体验,因为它允许数据在后台与服务器...
**Ajax原理详解** Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器交换数据并...
### **Ajax 原理** Ajax的原理主要包含以下几个步骤: 1. **创建 XMLHttpRequest 对象**:这是Ajax的基础,现代浏览器通常都内置了XMLHttpRequest对象。 2. **开启一个HTTP请求**:使用XMLHttpRequest对象的`open()`...
### AJAX原理及用法 #### 一、什么是Ajax技术? Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据...
Ajax 详解教程讲述 Ajax 原理 Ajax 是一种异步 JavaScript 和 XML 技术,允许 Web 应用程序实时更新页面内容,而不需要重新加载整个页面。Ajax 技术的核心是使用 XMLHttpRequest 对象异步地从服务器获取数据,并...
### AJAX原理与XMLHttpRequest详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。其核心在于使用`XMLHttpRequest`...
Ajax原理的实现依赖于一系列技术的协同工作,包括HTML、JavaScript、DHTML(Dynamic HTML)和DOM(Document Object Model)。 HTML是网页的基础结构,它用于创建交互式表单,设置用户输入的元素。在Ajax应用中,...
在本项目中,“隐藏框架实现ajax原理”是一个演示如何利用隐藏iframe来实现Ajax交互的实例。下面我们将详细探讨Ajax的工作原理以及如何通过隐藏框架实现这一过程。 1. **Ajax工作原理**: Ajax的核心是JavaScript...
Ajax原理的实现依赖于一系列技术的协同工作,包括HTML、JavaScript、DHTML(Dynamic HTML)和DOM(Document Object Model)。 HTML是网页的基础结构,它用于创建表单和其他元素,这些元素在Ajax交互中扮演着重要...
"AJAX原理及其在Web开发中的应用" AJAX(Asynchronous JavaScript and XML)是一种实现异步通信的技术,在Web开发中极为重要。本文将从AJAX的基本原理开始,逐步介绍AJAX的技术架构、主要组件、工作原理、优点和...
**Ajax原理简介** Ajax,全称"Asynchronous JavaScript and XML",是一种用于构建高度交互式Web应用程序的技术,使得页面能够在不完全刷新的情况下与服务器通信。它不是单一的技术,而是结合了多种技术,包括...
### AJAX原理详解 #### 一、引言 随着互联网技术的发展与用户对交互体验需求的提升,异步请求成为Web开发中的重要组成部分。AJAX(Asynchronous JavaScript and XML)作为一种无需重新加载整个网页即可更新部分...
**AJAX原理详解** AJAX,全称Asynchronous JavaScript and XML,是一种用于创建快速动态网页的技术。它允许在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地改善了用户的交互...
4. **Ajax工作原理** - **触发事件**:用户操作(如点击按钮)启动Ajax事件。 - **创建XMLHttpRequest对象**:实例化对象,设置请求参数,如URL和HTTP方法(GET或POST),并发送请求。 - **服务器处理**:服务器...
### Ajax原理与应用知识点详解 #### 一、Ajax技术背景 - **背景介绍**:Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这项技术最早出现在2005年左右,...
Ajax原理介绍,详细介绍了ajax的工作原理!
ajax原理及应用,概念,技术以及xmlhttprequest实例化
1 原始ajax原理 2 jquery JDBC 3 json数据 4 三级联动 5 仿百度自动提示 6 fromValidator验证 其中自带jar包 修改 DBconfig Mysql数据库配置文件直接运行即可 方便大家学习 ~~~同时鄙视那些高分卖例子的人... ...