AJAX当我在前两年第一次看到这个名字的时候,我有些感觉头大。因为又出了一门新语言,自从WEB应用流行起来时,就层出不穷的新技术。那时在网上看到《Ajax实战》,很郁闷,又是500多页的新技术…。但自从接触WEB以来,很多看似复杂而艰难的东西就像窗户纸一样。AJAX也不例外,不是就对当前页面数据的更新吗!(说大话了,虽然我还没用熟它。但它确实没有相像中的那么难。)
开始整理!
一、AJAX简介
1. AJAX简介
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议[1],它:
1. 使用XHTML+CSS来表示信息;
2. 使用JavaScript操作DOM(Document Object Model)进行动态显示及交互;
3. 使用XML和XSLT进行数据交换及相关操作;
4. 使用XMLHttpRequest对象与Web服务器进行异步数据交换;
5. 使用JavaScript将所有的东西绑定在一起。
6. 使用SOAP以XML的格式来传送方法名和方法参数。
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括:Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象,也不支持XSLT[2]。
比如google搜索的提示框,google的地图都是使用AJAX来实现的。
AJAX技术,不用刷新整个页面即可完成与服务器通讯并更新页面显示数据。
AJAX不用刷新整个页面便可与服务器通讯的办法——XMLHttpRequest:该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词,XMLHttpRequest是核心!
2.AJAX工具包
通过简介我们知道,AJAX不是一项独有的新技术是多种技术的创新混合。
a) 服务器端语言:服务器需要具备向浏览器发送特定信息的能力,Ajax与服务器端语言无关。
b) XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择。
c) XHTML(eXtended Hypertext Markup Language,使用扩展超媒体标记语言)和 CSS(Cascading Style Sheet,级联样式单)标准化呈现。
d) DOM(Document Object Model,文档对象模型)实现动态显示和交互。
e) 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
f) 使用JavaScript绑定和处理所有数据。
3.AJAX的缺陷
老佟在讲解新技术时,时常说的话——没有完美的技术。AJAX也不例外:
a) 由 Javascript 和 AJAX 引擎的不同导致的浏览器的兼容。
b) 页面局部刷新,导致后退等功能失效。
c) 对流媒体的支持没有FLASH、Java Applet好。
d) 一些手持设备(如手机、PDA等)支持性差。
AJAX具有这些缺陷,但它带给人们的体验和技术的发展是功不可没的!
二、XMLHttpRequest
1.简介
XMLHttprequest最早是在IE5中以ActiveX实现的,但它至今仍不是W3C的标准。XMLHttpRequest的创建方法有两大阵营,微软自己的ActiveX单兵和其他浏览器以JavaScript对象为一个阵营。虽然XMLHttpRequest的创建不同,但它们的接口和属性相同。
2.创建XMLHttpRequest对象
我们将它单独拿出来做成一个函数,因为只创建XMLHttpRequest对象一次即可:
function getXMLHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
return null;
}
}
|
在需要XMLHttpRequest对象的地方,直接调用上面的方法获得即可!
3.XMLHttpRequest的方法
方法
|
描述
|
abort()
|
停止当前的请求
|
getAllResponseHeader()
|
将HTTP请求的所有响应首部作为键/值返回
|
getResponseHeader(“header”)
|
返回指定首部的串值
|
Open(“method”,”url”)
|
建立服务器的调用。Method可以是GET、POST或PUT,URL可以是相对URL或绝对URL。
|
Seng(content)
|
向服务器发送请求。
|
setRequestHeader(“header”,”value”)
|
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。
|
4.XMLHttpRequest的属性
属性
|
描述
|
readyState
|
请求状态,状态值:0,未初始化。1,正在加载。2,已经加载。3,交互中。4,完成。
|
onreadystatechange
|
当readyState状态值被改变时,都会调用这个属性指定的JavaScript函数。
|
responseText
|
服务器的响应,表示为一个串。
|
responseXML
|
服务器的XML响应,可以解析为 DOM对象。
|
status
|
服务器响应的HTTP状态码。
|
statusText
|
服务器响应的HTTP状态码的相应文本。
|
三、XMLHttpRequest发送与接收请求
XMLHttpRequest与服务器进行通讯包含以下三个关键部分:
1. onreadystatechange事件处理函数
2. open方法
3. seng方法
在发送和接收请求之前先了解XMLHttpRequest的onreadystatechange属性。为此属性指定一个无参数的函数。在onreadystatechange指定的函数中通过判断XMLHttpRequest的readyState值,来进行相应的处理。比如,readyState为4时说明服务器处理XMLHttpRequest的请求完成,这时我们就可以获取服务器的响应数据。readyState值是被服务器改变的。
1.发送请求
1) 准备请求
XMLHttpRequestObj .open(method, url, asynch),open 方法允许程序员用一个Ajax调用向服务器发送请求:
method:请求类型,类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,就会带来不好的结果。在此将时间戳追加到URL的最后(url+”?time=”+new Date()),就能确保URL的唯一性,从而避免浏览器缓存结果。
url:路径字符串,指向你所请求的服务器上服务的路径。可以是绝对路径或相对路径。
asynch:表示请求是否要异步传输,默认值为true。指定true,在读取后面的脚本之前,不需要等待服务器的响应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。
2) 发送请求
XMLHttpRequestObj .send(data),send 方法可为已经待命的请求(open设置的准备就地正法)发送指令:
data:将要传递给服务器的字符串。若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:request.send(null);。当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null。
3) 请求信息头
XMLHttpRequestObj .setRequestHeader(header,value):
当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。Ajax 请求中,发送首部信息的工作可以由 setRequestHeader该完成。
header: 首部的名字.
value:首部的值。
如果用POST 请求向服务器发送数据,需要将“Content-type”的首部设置为 “application/x-www-form-urlencoded”。它会告知服务器正在发送数据,并且数据已经符合URL编码了。该方法必须在open()之后才能调用。
2.接收请求
当一个请求被响应后,XMLHttpRequest的如下属性被设置(看前边的表它们分别代表什么意思):readyState、status、responseText、responseXML。
1) readyState,表示Ajax请求的当前状态。
n 0 代表未初始化,还没有调用 open 方法。
n 1 代表正在加载,open 方法已被调用,但 send 方法还没有被调用。
n 2 代表已加载完毕,send 已被调用请求已经开始。
n 3 代表交互中,服务器正在发送响应。
n 4 代表完成,服务器响应发送完毕。
每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数指定为一个函数,那么每次 readyState 值的改变都执行该函数。
readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4。我们常处理readyState为4的应用。
2) 服务器的响应信息头,三位数的状态码是服务器发送的响应中最重要的头部信息,并且属于超文本传输协议中的一部分。常用状态码及其含义:
l 404 没找到页面(not found)
l 403 禁止访问(forbidden)
l 500 内部服务器出错(internal service error)
l 200 一切正常(ok)
l 304 没有被修改(not modified)
在 XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应!我们以此为标记,决定是否处理响应信息哦!~
3) responseText,此属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。
当 readyState 属性值变成 4 时,responseText 属性可用,表明 Ajax 请求已经结束。我们通过此取获取服务器响应的信息,一般为HTML或JSON信息。我们可以直接使用HTML响应内容,如果响应内容为JSON,我们必须获取JSON体中的休息。
4) responseXML
如果服务器返回的是XML,那么数据将储存在responseXML 属性中。
只用服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml。我们通过此取获取服务器响应的信息,一般为XML信息。我们可以使用DOM获取XML中的响应内容。
三、XMLHttpRequest响应内容的数据格式
在服务器端 AJAX 是一门与语言无关的技术,在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:
l XML
l JSON
l HTML
1.HTML
还记得最初编写的Serlvet吗?在Serlvet中直接向输出流打印HTML信息,JSP页面被翻译为Servlet时,也是通过输出流向浏览器输出HTML信息。浏览器,直接显示即可。所以在XMLHttpRequest处理请求信息时,可以直接使用DOM对象的innerHtml属性或JQuery对象的html()方法,将responseText文本内容直接添加到页面元素节点中。
虽然这使用HTML做为响应数据格式十分方便快捷,但当需要更新一篇文档的多个部分时HTML就不大合适了,并且innerHtml不是w3c的标准。
2.XML
XML是WEB的世界能用语言,我们可以自定义XML格式,并且可以通过DOM对象完全操作XML。使用XML作为响应数据的格式,必须保证XML的头部信息正确,比如:“<?xml version="1.0" encoding="utf-8"?>”。若这个格式不正确,那么responseXML的值将是空的。
使用XML的最大难处是,如果XML的内容庞大或复杂,使用DOM解析XML数据是痛苦的。
3. JSON
这个东西在我接触WEB时就看见它,甚至在GWT的也有看见它。当时感觉比较神秘!~~JSON是什么呢?
JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。如:
borde
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
【标题】:“传智播客Ajax课堂源码”是一份来自知名教育机构传智播客的Ajax技术教学资源。这个源码集包含了他们教授Ajax技术时使用的实例代码,旨在帮助学习者深入理解Ajax的工作原理和实际应用。 【描述】:这份...
传智播客AJAX技术入门,课堂讲课PPT
【标题】"传智播客Ajax源码"指的是传智播客教育机构关于Ajax技术的一套教学源代码。Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它通过JavaScript与...
【标题】中的“传智播客ajax(包含js及jquery实现)课堂源码”表明这是一个关于AJAX(异步JavaScript和XML)与jQuery技术的教学资源,由知名的IT教育机构传智播客提供。这个资源可能包含了实现AJAX和jQuery功能的源...
综上所述,"传智播客ajax课堂源码.rar"可能是一个教学示例,涵盖了Ajax与jQuery在实际应用中的关键点,尤其是针对用户名验证的实现,有助于学习者深入理解Ajax的工作原理和jQuery在其中的作用。通过研究这个源码,...
"传智播客Ajax课堂源码"是指来自知名教育机构传智播客的一门关于Ajax技术的在线课程的教学资源。这通常包括该课程的代码示例、练习项目以及可能的教学课件,旨在帮助学习者深入理解Ajax技术,并通过实际操作提升其...
在本资料中,"传智播客Ajax课堂源码"提供了学习和实践Ajax技术的具体实例,帮助开发者深入理解Ajax的工作原理和应用方法。** **一、Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台...
《传智播客_AJAX视频教程》1.27G 《传智播客_FTP视频教程》117M 《传智播客_hibernate视频教程》573M 《传智播客_俄罗斯方块游戏开发_视频教程》217M 《传智播客_赖家材struts入门》558M 《传智播客_贪吃蛇游戏开发...
**传智播客AJAX教程源码解析** 在IT领域,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。此教程源码提供了传智播客对...
在本压缩包“传智播客Ajax增补 实例效果演示”中,我们将会探讨并学习Ajax如何实现页面的异步交互,提高用户体验。** 首先,Ajax的核心是XMLHttpRequest对象,它是JavaScript内置的对象,允许开发者在后台与服务器...
【标题】"传智播客.NET培训种子全集(杨中科)" 提供的是一个全面且系统的.NET技术培训课程,由知名讲师杨中科主讲。这个系列教程旨在帮助学习者深入理解和掌握.NET框架,以及其在实际开发中的应用。 【描述】"传智...
这次传智播客发布了2010年最新的.Net课堂视频教程,内容涉及C#、HTML、JavaScript、JQuery、ASP.Net等内容,覆盖了从C#初学到ASP.Net深层应用的各阶段知识,内容列表如下: 第1季C#编程基础 第2季C#面向对象基础 第...
传智播客JDBC_所有源码与ppt Java培训教程教学课件 传智播客SCM手把手开发文档 传智播客内部数据库教学资料及上课笔记 张孝祥javaweb高级PPT 张孝祥JavaWEB课堂PPT AJAX技术入门.ppt itcast_hibernate.ppt itcast_...