AJAX教程--董伟专.ppt

北京传智播客教育,AJAX培训教程实例讲解,作者：董伟专,北京传智播客教育,今天的课题,AJAX简介XMLHttpRequest对象数据格式实现基本的Ajax技术,北京传智播客教育,AJAX简介,AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：使用XHTML+CSS来表示信息；使用Javascript操作DocumentObjectModel进行动态显示及交互；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据交换；使用JavaScript将所有的东西绑定在一起。,北京传智播客教育,与传统的web应用比较,图1Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复,图2在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面,Ajax：一种不用刷新整个页面便可与服务器通讯的办法,北京传智播客教育,不用刷新整个页面便可与服务器通讯的办法,FlashJavaapplet框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面隐藏的iframeXMLHttpRequest：该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择。实际上通常把Ajax当成XMLHttpRequest对象的代名词,北京传智播客教育,Ajax工具包,“Ajax并不是一项技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起”服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。XML(eXtensibleMarkupLanguage，可扩展标记语言)是一种描述数据的格式。Aajx程序需要某种格式化的格式来在服务器和客户端之间传递信息，但XML只是其中的一种选择XHTML（eXtendedHypertextMarkupLanguage,使用扩展超媒体标记语言）和CSS（CascadingStyleSheet,级联样式单）标准化呈现；DOM（DocumentObjectModel,文档对象模型）实现动态显示和交互；使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取；使用JavaScript绑定和处理所有数据。,北京传智播客教育,Ajax的工作原理图,北京传智播客教育,Ajax的缺陷,AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：由Javascript和AJAX引擎导致的浏览器的兼容页面局部刷新，导致后退等功能失效。对流媒体的支持没有FLASH、JavaApplet好。一些手持设备（如手机、PDA等）支持性差。,北京传智播客教育,小结,Ajax并非是一个新的技术或者语言，他只是几项技术按一定的方式组合起来，在共同协作中发挥各自的作用。老技术，新技巧。Ajax主要功能特点：JavaScript用户体验；CSS样式定义；DOM组织视图；XML数据异步加载；XMLDocument/XMLHttpRequest。,北京传智播客教育,XMLHttpRequest对象,XMLHttpRequest对象的概述XMLHttpRequest对象的方法和属性XMLHttpRequest对象发送请求基本步骤Ajax简单请求示例,北京传智播客教育,javascript的两项强大性能,AJAX(异步javascript和XML)是个新产生的术语,专为描述javascript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail,Googlesuggest和googleMaps的横空出世才使人们开始意识到其重要性.这两项被忽视的性能是:(1)无需重新装载整个页面便能向服务器发送请求.(2)对XML文档的解析和处理,北京传智播客教育,向服务器发送请求,if(window.XMLHttpRequest)/Mozilla,Safari,.http_request=newXMLHttpRequest();elseif(window.ActiveXObject)/IEhttp_request=newActiveXObject(Microsoft.XMLHTTP);,北京传智播客教育,XMLHttpRequest的概述,XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.创建XMLHttpRequest对象（由于非标准所以实现方法不统一）(1)InternetExplorer把XMLHttpRequest实现为一个ActiveX对象。(2)其他浏览器（Firefox、Safari、Opera）把它实现为一个本地的JavaScript对象。(3)XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。,北京传智播客教育,创建XMLHttpRequest对象,varxmlHttp;functioncreateXMLHttpRequest()if(window.ActiveXObject)xmlHttp=newActiveXObject(Microsoft.XMLHTTP);elseif(window.XMLHttpRequest)xmlHttp=newXMLHttpRequest();,北京传智播客教育,XMLHttpRequest的方法,北京传智播客教育,XMLHttpRequest的属性,北京传智播客教育,发送请求,利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：(1)onreadystatechange事件处理函数(2)open方法(3)send方法,北京传智播客教育,onreadystatechange:,该事件处理函数由服务器触发，而不是用户在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件,北京传智播客教育,Open方法,open(method,url,asynch,username,password)XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求。method：请求类型，类似“GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。,北京传智播客教育,Send方法,send(data)：open方法定义了Ajax请求的一些细节，但是那些请求并没有被初始化。send方法可为已经待命的请求发送指令。data：将要传递给服务器的字符串。若选用的是GET请求，则不会发送任何数据，给send方法传递null即可：request.send(null);当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.完整的Ajax的GET请求示例：,北京传智播客教育,setRequestHeader方法,setRequestHeader(header,value)当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是GET还是POST。Ajax请求中，发送首部信息的工作可以由setRequestHeader该完成。参数header：首部的名字参数value：首部的值。如果用POST请求向服务器发送数据，需要将“Content-type”的首部设置为“application/x-www-form-urlendoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。该方法必须在open()之后才能调用完整的Ajax的POST请求示例：,北京传智播客教育,接收相应,用XMLHttpRequest的方法可向服务器发送请求。在Ajax处理过程中，XMLHttpRequest的如下属性可被服务器更改：readyStatestatusresponseTextresponseXML,北京传智播客教育,readyState方法,readyState属性表示Ajax请求的当前状态。它的值用数字代表。0代表未初始化。还没有调用open方法1代表正在加载。open方法已被调用，但send方法还没有被调用2代表已加载完毕。send已被调用。请求已经开始3代表交互中。服务器正在发送响应4代表完成。响应发送完毕每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值同意设为4,北京传智播客教育,Status方法,服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。常用状态码及其含义：404没找到页面(notfound)403禁止访问(forbidden)500内部服务器出错(internalserviceerror)200一切正常(ok)304没有被修改(notmodified)在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应,北京传智播客教育,responseText方法,XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。当readyState属性值变成4时,responseText属性才可用，表明Ajax请求已经结束。,北京传智播客教育,responseXML方法,如果服务器返回的是XML，那么数据将储存在responseXML属性中。只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml,北京传智播客教育,汇总,北京传智播客教育,小结,XMLHttpRequest对象是Ajax的核心和灵魂。它的方法和属性可用于实现异步请求，令Ajax程序拥有快速的响应。使用XMLHttpRequest对象的3个步骤：创建该对象的一个实例，使其可在不同的浏览器中运行。用onreadystatechange事件处理函数,open方法，send方法对一个请求进行初始化。通过readyState,status,responseText或者responseXML来对服务器的响应进行处理,北京传智播客教育,数据格式,在服务器端AJAX是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：XMLJSONHTML,北京传智播客教育,任务,网页中的人员列表,点击连接就会显示个人的信息,北京传智播客教育,XML,XML（eXtensibleMarkupLanguage）是一种通用的标记语言，用于对数据进行描述。与其他语言的不同在于，它的标记不是事先规定的。它的文档结构需要遵循一定的规范，但是所用的词语则没有任何限制。XML是用来存储数据，而不是对数据进行操作。,XML声明。指定了文档所使用的XML版本号和字符编码,内容包含在标签内。每一对标签代表一个元素。元素的名字包含在开始标签和结束标签内。元素的值也位于开始标签和结束标签之间,北京传智播客教育,实战XML,Index.html代码,北京传智播客教育,实战XML,clearleft.css,北京传智播客教育,实战XML,andy.xml,jeremy.xml,richard.xml,北京传智播客教育,实战XML,fetchxml.js文件：getHTTPObject()grabFile(file)parseResponse(request)该函数用于服务器返回的XML，并将其转化为HTMLXML会通过HTTPRequest对象的responseXML属性获得。生成的HTML代码(这些信息放在list后的div元素中):,北京传智播客教育,XML小结,优点：XML是一种通用的数据格式。不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。利用DOM可以完全掌控文档。缺点：如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的。当浏览器接收到长的XML文件后，DOM解析可能会很复杂。,北京传智播客教育,JSON,XML的轻量级替代品，是一种基于文本的数据描述方式。XML使用开始标签和结束标签，JSON是使用的是冒号，逗号和大括号。JSON不是一种需要用JavaScript解释的数据格式：JSON本身就是JavaScript,北京传智播客教育,JSON,北京传智播客教育,JSON实战,index.html,北京传智播客教育,JSON实战,andy.js,jeremy.js,richard.js,北京传智播客教育,JSON实战,fetchjson.js文件：getHTTPObject()grabFile(file)parseResponse(request)JSON只是一种文本字符串。它被存储在responseText属性中。为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的，所以它本身是可执行的。代码实例：,北京传智播客教育,JSON小结,优点：作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧。JSON不需要从服务器端发送含有特定内容类型的首部信息。缺点：语法过于严谨代码不易读eval函数存在风险,北京传智播客教育,实战HTML,index.html,北京传智播客教育,实战HTML,andy.html,jeremy.html,richard.html,北京传智播客教育,实战HTML,fetchjson.js文件：getHTTPObject()grabFile(file)parseResponse(request)HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerHTML属性,北京传智播客教育,HTML小结,优点：从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。HTML的可读性好。HTML代码块与innerHTML属性搭配，效率高。缺点：若需要通过AJAX更新一篇文档的多个部分，HTML不合适innerHTML并非DOM标准。,北京传智播客教育,小结,从服务器端返回Ajax相应的三种数据格式：XML：广泛应用，可以通过DOM进行解析JSON：可从远程服务器读取数据HTML：可以通过innerHTML直接插入到页面中。,北京传智播客教育,实现基本的Ajax技术,完成验证在Ajax之前，基于Web的应用必须提交