最近网上提的很多的一个新概念就是 AJAX 了, 那么, AJAX 是什么呢? 以下内容引用网上资料:
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术:
Ajax(Asynchronous JavaScript + XML)的定义
* 基于 web标准(standards-based presentation)XHTML+CSS的表示;
* 使用 DOM(Document Object Model)进行动态显示及交互;
* 使用 XML 和 XSLT 进行数据交换及相关操作;
* 使用 XMLHttpRequest 进行异步数据查询、检索;
* 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
与传统的web应用比较
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
关于 AJAX 提出者文档的翻译见这里: Ajax: A New Approach to Web Applications(中英对照) . 您可能想看看到底有什么很酷很炫的 Web 站点用到了 AJAX, 可以看这里: Google Suggest, Google Maps, 还有我个人做的一个小小的例子: AJAX Test.
AJAX 是一个新出现的名词, 但是引用的这几项技术都是老的存在了很久的技术, 甚至, 最大为推崇的 XMLHttpRequest 也不是 W3C 规范的一部分, 而是浏览器很早就内置的一个 JavaScript 对象. 这里的这几个概念中, 目前所见到的最多的应用就是 异步更新页面内容这个所说的亮点了. 其他的几个概念: XHTML + CSS, DOM, XML + XSLT, 都是做 WEB 表示层用的很熟很熟的几个技术了(当然, 用 JavaScript 解析 XML 可能用的人不多).
那么, 我就直奔主题: 怎么来用 AJAX 来解决实际的问题了. 现在依然不行, 因为关键的东西还不够. 如前所述, 异步操作的魔法就是 XMLHttpRequest 对象了, 这个对象怎样实现异步?? 那么首先让我们了解一下 XMLHttpRequest(see also The XMLHttpRequest Object).
首先 XMLHttpRequest 对象并非一个 W3C 标准, 它只是主要浏览器都支持的可以通过 JavaScript 在客户端访问其他 URL 内容的一个对象. 所以很不幸的您创建它的时候必须根据不同的浏览器来创建它(所谓的跨平台脚本编写):
在 Mozilla, Firefox, Safari, 和 Netscape 中:
var xmlhttp=new XMLHttpRequest()
在 Internet Explorer 中:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
那么接下来最常用到的代码就像下面这样:
<script >
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange;
xmlhttp.open("GET","http://www.somehost.com/test.htm",true);
xmlhttp.send();
}
}
function xmlhttpChange()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
// if "OK"
if (xmlhttp.status==200)
{
// ...some code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
注意: 上面例子中一个很重要的属性就是 onreadystatechange, 可以讲这个就是异步处理的关键. 这个属性是一个事件处理器, 当网络请求的每次状态改变时这个方法都被触发. 状态码从 0 (uninitialized, 未初始化) 到 4 (complete, 完成). 通过在方法 xmlhttpChange() 中我们检查状态改变, 我们可以告诉什么时候连接完成并且只在 HTTP 操作成功(返回代码为 200)的时候来进行必要的处理.
为什么我们要在例子中使用异步操作?
所有的例子中我们都使用异步(async)模式 (open() 的第三个参数设置为 true). 异步模式参数指定请求时被异步处理与否. true 表示脚本将会在 send() 方法被调用后继续执行, 不需要等待服务器的返回; false 则表示脚本必须等到服务器返回一个请求后才能继续执行, 这时候将会有问题发生, 因为如果此时有网络或者服务器故障发生, 或者请求需要花费很长时间完成, 这时候浏览器窗口将会没有任何反应(常说的界面死掉), 甚至会出现"服务器没有返回"这样的错误, 所以为了更好的用户体验, 尽量使用异步模式来设计您的代码. open() 方法的第二个参数是 URL 地址,
好了, 说了这么多, 您可能迫不及待的想运行一个真实的例子, 请试试这个例子: 在线读取 TXT 文本并且显示在当前页面 ajax1.htm, 所用到的文本文件 textfile1.txt.
源码查看页面源代码就可以得到了.
最后, 您可能希望熟悉一下 XMLHttpRequest 对象来为以后更好的利用它打下基础:
The XMLHttpRequest Object Reference XMLHttpRequest 对象参考
Methods 方法
Method 方法 Description 描述
abort() Cancels the current request
取消当前请求
getAllResponseHeaders() Returns the complete set of http headers as a string
将完整的 HTTP 头部做为一个字符串返回
getResponseHeader("headername") Returns the value of the specified http header
返回给定的 HTTP 头的值
open("method","URL",async,"uname","pswd") Specifies the method, URL, and other optional attributes of a request
The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes.
The URL parameter may be either a relative or complete URL.
The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing
指定表单提交方法, URL, 以及请求的可选属性
method 参数可以是"GET", "POST" 或者 "PUT" 这些值中之一(使用"GET"来请求数据, 特别的, 当发送的数据长度大于512字节时使用 "POST").
URL 参数可以为相对的和完整的 URL.
async 参数指定请求是否为异步方式处理. true 意味着调用 send() 方法后脚本继续向下执行, 不需要等待响应. false 意味着脚本将等待响应之后才能继续执行
send(content) Sends the request
发送请求
setRequestHeader("label","value") Adds a label/value pair to the http header to be sent
在要发送的 HTTP 头中添加 标签/取值
Properties 属性
Property 属性 Description 描述
onreadystatechange An event handler for an event that fires at every state change
每次状态改变时除非的事件处理器
readyState Returns the state of the object:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
返回对象的状态
0 = 未初始化
1 = 载入中
2 = 已载入
3 = 交互
4 = 完成
responseText Returns the response as a string
将响应做为字符串返回
responseXML Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
将响应做为XML返回. 这个属性返回一个 XML 文档对象, 可以用 W3C 的 DOM 节点树方法和属性进行检索分析
status Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
将状态做为数字返回(例如 404 为"Not Found" 或者 200 为 "OK")
statusText Returns the status as a string (e.g. "Not Found" or "OK")
将状态做为字符串返回(例如 "Not Found" 或者 "OK")
What's the next?
AJAX Follow Me - (2) GET 和 POST 配合表单
AJAX Follow Me - (3) 整合 XML 和 DOM
AJAX Follow Me - (4) 一个完整的实用例子
分享到:
相关推荐
学习AJAX开发初步,达到能基本使用AJAX进行开发应用
ajax、jquery这个是实际开发中使用最多的脚本,js在兼容性上有待提高,学会这些电子书,那么已经可以算是初步入门,可以进行实际开发了。
通过该文档,能让你对Ajax技术有初步的认识与应用
用(asp.net)写的AJAX,缓存,重写URL实例,适合初步学习AJAX的程序员.
适合初级学习ajax的
快速认识Ajax,简单,易于上手 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是一种在无需重新加载整个网页的情况下,能够...
初步认识ajax技术,通过简单的例子学习,让我们深深的体会都它的强大。
本Java视频教程案例是尚硅谷JavaWEB学习完成后的一个总结性案例,由讲师在第45、46、47天带领学员一起完成。...学习本案例后,将初步具备 JavaEE 企业级开发技能,并为学习后面的框架和项目扫除障碍。
通俗易懂,本书主要面向希望初步掌握Visual C# 2008编码能力的读者。帮助读者了解C#基本程序结构以及C#内置数据类型、面向对象思想、以及使用Visual C# 2008进行面向对象编程的基本方法。此外,还帮助读者掌握范型,...
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
前初步数据库同时验证 前端数据合法验证 更新员工 数据合法验证 删除员工 单一批除 批量删除 核心技术栈 项目框架:Spring / Spring MVC / Mybatis 基础工具:Maven / Tomcat / MySQL / JDK1.8 前端技术:jQuery / ...
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
通过本次实习,应当对HTMLcSs...学习基于Ajax技术的RSS阅读器(Web形式)基于XML和XSLT的学生成绩发布系统、基于WebServices的XML文件上传和查看系统:完成简单的单点登录系统:软件初步测试:了解和初步掌握系统的发布等。
1.Ajax初步介绍 (1) 现在我们创建的Web应用程序几乎都要用到Ajax技术,从技术上面讲,Ajax代表异步JavaScript和XML(Asynchronous JavaScript and XML,Ajax)。在实际应用中,他代表在构建具有良好用户体验的响应性...
pandas数据分析和数据清洗,使用libFM,sklearn对模型初步搭建 • recsys_core: 使用pandas, libFM, sklearn完整的数据处理和模型构建、训练、预测、更新的程序 • recsys_etl:ETL 处理爬虫增量数据时使用kettle ...
本系统采用常规ssh框架构建而成,大量使用Ajax技术进行交互。对初步学习者非常试用
pandas数据分析和数据清洗,使用libFM,sklearn对模型初步搭建 recsys_core: 使用pandas, libFM, sklearn完整的数据处理和模型构建、训练、预测、更新的程序 recsys_etl:ETL 处理爬虫增量数据时使用kettle ETL便捷...
初步验证(JSR303) 4. ajax 5. Rest风格URI: 使用Http协议请求方式的动词,来表示对资源的操作 GET:/ emps / get / {id}查询 GET:/ emps / get查询 开机自检:/ emps / save增加 PUT:/ emps / update / {id}...
本书首先介绍了JSP的概念和特征,使读者对JSP先有一个初步的了解。 然后对自定义标签开发、标准标签库(JSTL)使用、JSP2.0表达式(EL)、Servlet简单应用和高级应用以及Web2.0新特性Ajax的开发过程进行了详细的...
通过初步学习DWR框架发现真是一个不错的AJAX框架,特别是dwr.util工具对java发数据传输特别方便。这是我写的一个dwr和spring结合在页面下拉框产生联动效果的简单例子,请多指教!