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技术入门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--传智播客--蔡世友培训ppt
在本压缩包“传智播客Ajax增补 实例效果演示”中，我们将会探讨并学习Ajax如何实现页面的异步交互，提高用户体验。** 首先，Ajax的核心是XMLHttpRequest对象，它是JavaScript内置的对象，允许开发者在后台与服务器...
【标题】"传智播客.NET培训种子全集（杨中科）" 提供的是一个全面且系统的.NET技术培训课程，由知名讲师杨中科主讲。这个系列教程旨在帮助学习者深入理解和掌握.NET框架，以及其在实际开发中的应用。 【描述】"传智...
这次传智播客发布了2010年最新的.Net课堂视频教程，内容涉及C#、HTML、JavaScript、JQuery、ASP.Net等内容，覆盖了从C#初学到ASP.Net深层应用的各阶段知识，内容列表如下： 第1季C#编程基础 第2季C#面向对象基础 第...