Ajax课件

1浏览器的同步

1.1说明

1、这是一个非常典型的浏览器同步交互图 2、步骤如下： 1、客户发出HTTP请求 2、服务器接受客户的请求并处理客户的请求 3、服务器相应客户的请求，返回客户所需要的页面 3、缺点： 3.1、每一次客户提交请求的时候，提交的是整个页面。也就是说不管这个页面的数据量大小，都要经过网络的传输。这样给网络造成了数据的压力。 3.2、在每次客户提交请求的时候，因为要提交整个数据，所以就要刷心整个页面。这样情况对于用户的交互性来说是很不好的。因为一提交以后用户当前的页面就成了白班，用户所做的事情只能是等待等待再等待。 3.3、在每次进行提交请求的时候，用户有可能让服务器处理的数据很少，比如163邮件系统的登陆，服务器端实际上只需要用户名和密码就可以了，没有必要把其他数据也传输到服务器上。但是同步是做不到这点的。 3.4、特别是在管理系统中，这些系统对客户界面的友好型要求是比较高的，而同步交互是不满足这样的特点的。

2 浏览器的异步交互

2.1说明

1、这是一个非常典型的浏览器异步交互图 2、从图上可以看出来，客户端没有再发送http请求，而是用JavaScript调用一个叫Ajax engine来发送数据，所以不用提交整个页面。 3、从返回来看，返回的也不再是客户需要的页面，而是客户需要的数据 4、优点： 1、不用提交整个页面，而是用JavaScript提交具体的数据，这样就使一些没有必要在网络上传输的数据不用传输了。 2、因为只提交数据，所以每天提交请求的数据库不是很大，这样可以减轻网络传输数据的压力。 3、由于不用刷新整个页面，所以即便提交以后，展现在客户面前的页面还是不会消失的，这样对于客户的交互性特别好。

2.2web2.0应用

2.2.1 www.bjbus.com

3 Ajax

3.1ajax产生

Ajax(Asynchronous JavaScript and Xml). 现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XMLXMLHttpRequest.

•服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。 •XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择 •XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现； •DOM（Document Object Model,文档对象模型）实现动态显示和交互； •使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取 •使用JavaScript绑定和处理所有数据

3.2ajax的核心XmlHttpRequest

该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词. 该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

3.2.1XmlHttpRequest对象的初始化

3.2.2XmlHttpRequest对象的方法 3.2.3XmlHttpRequest对象的属性 3.2.4发送请求的方法和属性介绍 利用XmlHttpRequest让客户端与服务器之间进行通信，包含以下3个关键部分：

1、onreadystatechange事件处理函数 2、open方法 3、send方法

3.2.4.1onreadystatechange方法

1、该事件处理函数由服务器触发，而不是用户触发 2、在ajax执行过程中，服务器会通知客户端当前的通信状态。因为在web2.0的应用中，客户端的界面没有刷新，这样你就必须得告诉用户服务器端的各种状态，但是这种情况再web1中不存在，因为在web1中如果能返回页面那就是执行成功了，如果不能返回页面那执行失败。而web2.0的这种情况是靠服务器端更新XMLHttpRequest对象的readyState来实现的。改变readyState的属性时服务器端连接客户端的一种操作方式。 3、每次readyState属性的改变都有触发readystatechange事件。

3.2.4.2 open(method,url,asynch)

1、XmlHttpRequest对象的open方法允许程序员用一个ajax调用向服务器发送请求。 2、method表示请求类型。最常用的有get和post请求。如果不向服务器端发送数据，只是请求服务器端的数据，这个时候可以用get方法。如果要向服务器端发送数据用post方法。 3、在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存到同一个URL。所以应该把能识别这次请求的标示加到URL后面，最常用的就是时间戳的方式。这样做能够保证url的唯一性。从而避免浏览器的缓存结果。  4、url指向服务器的那个地址。 5、asynch表示请求是否要异步传输。默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

3.2.4.3send(data)

1、 open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令 2、data：将要传递给服务器的字符串。 3、若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null); 4、当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null. 3.2.4.4setRequestHeader(header,value) 1、当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息，这些首部信息是一系列描述请求的元数据。首部信息用来声明一个请求时get还是post. 2、在ajax请求中，发送首部信息的工作可以由setRequestHeader完成。 3、参数header:首部的名字 参数value:首部的值 4、如果用post请求向服务器发送数据，需要将”Content-type”的首部设置为”application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合url编码了。

3.2.5接收请求的方法和属性的介绍 用XMLHttpRequest的方法可向服务器发送请求。在ajax的处理中，XMLHttpRequest的如下属性可被服务器更改： readyState status responseText responseXML

3.2.5.1readyState 1、readyState表示ajax请求的当前状态。它的值用数字代表：

0表示未初始化，还没有调用open方法。 1表示正在加载，open方法已经被调用，但send方法还没有被调用 2代表已经加载完毕。Send已被调用。请求已经开始。 3代表交互中。服务器正在发送响应。 4代表完成，响应发送完毕。

3.2.5.2status

1、服务器发送的每一个响应也带有头部信息，三位数的状态码是服务器发送的响应中最重要的信息。并且属于超文本传输协议中的一部分。 2、常见状态码及含义： 404 没有找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal server error) 200 一切正常(OK) 304 没有被修改 3、在XMLHttpRequest对象中，服务器发送的状态码都保存在了status属性里。通过这个值和200或者304做比较，可以确保服务器是否发送了一个成功的响应。

3.2.5.3responseText

1、XMLHttpRequest的属性responseText包含了从服务器端发送过来的数据，它是一个HTML,XML或者普通文本。这取决于服务器发送的内容。 2、当readyState属性值为4时，responseText属性才可用。表明ajax请求已经结束。

3.2.5.4responseXML 1、如果服务器返回的是XML,那么数据将储存在responseXML属性中。 2、只有向服务器发送了带有正确的首部信息的数据时，responseXML属性才是有用的。MIME类型必须为text/xml类型

3.3Ajax开发步骤

1、对象初始化 2、打开连接 3、发送请求 4、服务器接受 5、服务器返回 6、客户端接受 7、修改客户端页面内容 大致内容和web1类似，只不过这个过程是异步的。

3.3.1初始化XMLHttpRequest对象 3.3.2指定响应处理函数 指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋值给XMLHttpRequest对象的onreadystatechange属性就可以了。比如： XMLHttpRequest.onreadystatechange=processResponse. 3.3.3发送 请求 向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。http_request.open(‘GET’, ‘http://www.example.org/some.file‘, true)。http_request.send(null) 按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。 注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下： http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); 这时资料则以查询字符串的形式列出，作为send的参数，例如： name=value&anothername=othervalue&so=on

3.3.4处理服务器返回信息 处理响应处理函数都应该做什么。 　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下： if (http_request.readyState == 4) { // 信息已经返回，可以开始处理 } else { // 信息还没有返回，等待 } 　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。 if (http_request.status == 200) { // 页面正常，可以开始处理信息 } else { // 页面有问题 }

3.4返回数据格式

在ajax的编程中，从服务器端返回客户端的数据格式只接受三种： XML JSON HTML

3.4.1XML 优点： •XML 是一种通用的数据格式。 •不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。 •利用 DOM 可以完全掌控文档。 缺点： •如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。 •当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂

3.4.2JSON JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。 规则如下:

1）映射用冒号（“：”）表示。名称:值 2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2 3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2} 4） 并列数据的集合（数组）用方括号(“[]”)表示。 [ {名称1:值,名称2:值2}, {名称1:值,名称2:值2} ] 5 ) 元素值可具有的类型：string, number, object, array, true, false, null

3.4.3解析JSON JSON 只是一种文本字符串。它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

3.4.4 JSON小结 优点： • 作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。 • JSON 不需要从服务器端发送含有特定内容类型的首部信息。 缺点： • 语法过于严谨 • 代码不易读