`
tigers20010
  • 浏览: 48430 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

2009-12-27 传智播客—AJAX (转载)

    博客分类:
  • Ajax
阅读更多

AJAX当我在前两年第一次看到这个名字的时候,我有些感觉头大。因为又出了一门新语言,自从WEB应用流行起来时,就层出不穷的新技术。那时在网上看到《Ajax实战》,很郁闷,又是500多页的新技术。但自从接触WEB以来,很多看似复杂而艰难的东西就像窗户纸一样。AJAX也不例外,不是就对当前页面数据的更新吗!(说大话了,虽然我还没用熟它。但它确实没有相像中的那么难。)

 

开始整理!

 

一、AJAX简介

1. AJAX简介

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScriptXML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议[1],它:

1.          使用XHTML+CSS来表示信息;

2.          使用JavaScript操作DOMDocument Object Model)进行动态显示及交互;

3.          使用XMLXSLT进行数据交换及相关操作;

4.          使用XMLHttpRequest对象与Web服务器进行异步数据交换;

5.          使用JavaScript将所有的东西绑定在一起。

6.          使用SOAPXML的格式来传送方法名和方法参数。

类似于DHTMLLAMPAJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。

AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括:Internet ExplorerMozillaFirefoxOperaKonquerorMac OSSafari。但是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)          XHTMLeXtended Hypertext Markup Language,使用扩展超媒体标记语言)和 CSSCascading Style Sheet,级联样式单)标准化呈现。

d)         DOMDocument Object Model,文档对象模型)实现动态显示和交互。

e)          使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。

f)          使用JavaScript绑定和处理所有数据。

 

3.AJAX的缺陷

         老佟在讲解新技术时,时常说的话——没有完美的技术。AJAX也不例外:

a)          Javascript AJAX 引擎的不同导致的浏览器的兼容。

b)         页面局部刷新,导致后退等功能失效。

c)          对流媒体的支持没有FLASHJava 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可以是GETPOSTPUTURL可以是相对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方法

 

在发送和接收请求之前先了解XMLHttpRequestonreadystatechange属性。为此属性指定一个无参数的函数。在onreadystatechange指定的函数中通过判断XMLHttpRequestreadyState值,来进行相应的处理。比如,readyState4时说明服务器处理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 还是 POSTAjax 请求中,发送首部信息的工作可以由 setRequestHeader该完成。

header 首部的名字.

value:首部的值。

如果用POST 请求向服务器发送数据,需要将“Content-type”的首部设置为 application/x-www-form-urlencoded”。它会告知服务器正在发送数据,并且数据已经符合URL编码了。该方法必须在open()之后才能调用。

 

2.接收请求

         当一个请求被响应后,XMLHttpRequest的如下属性被设置(看前边的表它们分别代表什么意思):readyStatestatusresponseTextresponseXML

 

1)  readyState,表示Ajax请求的当前状态。

n          0 代表未初始化,还没有调用 open 方法。

n          1 代表正在加载,open 方法已被调用,但 send 方法还没有被调用。

n          2 代表已加载完毕,send 已被调用请求已经开始。

n          3 代表交互中,服务器正在发送响应。

n          4 代表完成,服务器响应发送完毕。

每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数指定为一个函数,那么每次 readyState 值的改变都执行该函数。

readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4。我们常处理readyState4的应用。

 

         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,此属性包含了从服务器发送的数据。它是一个HTMLXML或普通文本,这取决于服务器发送的内容。

readyState 属性值变成 4 时,responseText 属性可用,表明 Ajax 请求已经结束。我们通过此取获取服务器响应的信息,一般为HTMLJSON信息。我们可以直接使用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

         XMLWEB的世界能用语言,我们可以自定义XML格式,并且可以通过DOM对象完全操作XML。使用XML作为响应数据的格式,必须保证XML的头部信息正确,比如:“<?xml version="1.0" encoding="utf-8"?>”。若这个格式不正确,那么responseXML的值将是空的。

         使用XML的最大难处是,如果XML的内容庞大或复杂,使用DOM解析XML数据是痛苦的。

 

3. JSON

         这个东西在我接触WEB时就看见它,甚至在GWT的也有看见它。当时感觉比较神秘!~~JSON是什么呢?

         JSONJavaScript Object  Notation)一种简单的数据格式,比xml更轻巧。JSONJavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

JSON的规则很简单:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。如:

borde
分享到:
评论

相关推荐

    传智播客\Ajax\传智播客ajax课堂源码

    【标题】:“传智播客Ajax课堂源码”是一份来自知名教育机构传智播客的Ajax技术教学资源。这个源码集包含了他们教授Ajax技术时使用的实例代码,旨在帮助学习者深入理解Ajax的工作原理和实际应用。 【描述】:这份...

    传智播客AJAX技术入门

    传智播客AJAX技术入门,课堂讲课PPT

    传智播客ajax源码

    【标题】"传智播客Ajax源码"指的是传智播客教育机构关于Ajax技术的一套教学源代码。Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它通过JavaScript与...

    传智播客ajax(包含js及jquery实现)课堂源码

    【标题】中的“传智播客ajax(包含js及jquery实现)课堂源码”表明这是一个关于AJAX(异步JavaScript和XML)与jQuery技术的教学资源,由知名的IT教育机构传智播客提供。这个资源可能包含了实现AJAX和jQuery功能的源...

    ajax_jquery 传智播客ajax课堂源码.rar

    综上所述,"传智播客ajax课堂源码.rar"可能是一个教学示例,涵盖了Ajax与jQuery在实际应用中的关键点,尤其是针对用户名验证的实现,有助于学习者深入理解Ajax的工作原理和jQuery在其中的作用。通过研究这个源码,...

    传智播客ajax课堂源码

    "传智播客Ajax课堂源码"是指来自知名教育机构传智播客的一门关于Ajax技术的在线课程的教学资源。这通常包括该课程的代码示例、练习项目以及可能的教学课件,旨在帮助学习者深入理解Ajax技术,并通过实际操作提升其...

    传智播客ajax课堂源码.rar

    在本资料中,"传智播客Ajax课堂源码"提供了学习和实践Ajax技术的具体实例,帮助开发者深入理解Ajax的工作原理和应用方法。** **一、Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台...

    传智播客JAVA全套种子共20G

    《传智播客_AJAX视频教程》1.27G 《传智播客_FTP视频教程》117M 《传智播客_hibernate视频教程》573M 《传智播客_俄罗斯方块游戏开发_视频教程》217M 《传智播客_赖家材struts入门》558M 《传智播客_贪吃蛇游戏开发...

    传智播客AJAX教程的源码

    **传智播客AJAX教程源码解析** 在IT领域,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。此教程源码提供了传智播客对...

    传智播客ajax增补 实例效果演示

    在本压缩包“传智播客Ajax增补 实例效果演示”中,我们将会探讨并学习Ajax如何实现页面的异步交互,提高用户体验。** 首先,Ajax的核心是XMLHttpRequest对象,它是JavaScript内置的对象,允许开发者在后台与服务器...

    传智播客.NET培训种子全集(杨中科)

    【标题】"传智播客.NET培训种子全集(杨中科)" 提供的是一个全面且系统的.NET技术培训课程,由知名讲师杨中科主讲。这个系列教程旨在帮助学习者深入理解和掌握.NET框架,以及其在实际开发中的应用。 【描述】"传智...

    传智播客.Net培训视频教程下载地址

    这次传智播客发布了2010年最新的.Net课堂视频教程,内容涉及C#、HTML、JavaScript、JQuery、ASP.Net等内容,覆盖了从C#初学到ASP.Net深层应用的各阶段知识,内容列表如下: 第1季C#编程基础 第2季C#面向对象基础 第...

    传智播客ppt集锦

    传智播客JDBC_所有源码与ppt Java培训教程教学课件 传智播客SCM手把手开发文档 传智播客内部数据库教学资料及上课笔记 张孝祥javaweb高级PPT 张孝祥JavaWEB课堂PPT AJAX技术入门.ppt itcast_hibernate.ppt itcast_...

Global site tag (gtag.js) - Google Analytics