Ajax程序设计(第九讲).ppt

1、Web Ajax程序设计,第8讲,第6章 Hello World!分析 主要内容 XMLHttpRequest对象详解; 搭建基本的Ajax开发框架;,6.1 XMLHttpRequest对象详解 try var xmlhttp = new XMLHttpRequest(); catch(e) var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); xmlhttp.open(GET,hello_world.php,true); xmlhttp.onreadystatechange = function() if(xmlhttp.readyStat

2、e = 4 ,1. 初始化请求 使用XMLHttpRequest对象的open方法初始化请求; xmlhttp.open(GET, service/hello_world.php, true); open方法的3个参数 GET: 定义请求的方法为get方法; service/hello_world.php: 定义了请求的目标地址; true: 定义了请求为异步请求（常省略）; 完整的open方法原型 oXMLHttpRequest.open( strMethod, strUrl, boolAsync, strUser, strPassword); 各参数如表6-1所示（下页）,表6-1 ope

3、n方法参数列表,2. 设置请求HTTP头信息 oXMLHttpRequest.setRequestHeader( strHeader, strValue); 参数说明 strHeader： 字符串型，头名称; strValue: 字符串型，值; 注意 若已存在已命名的HTTP头，则被覆盖; 此方法必须在open方法后调用; 常见用法 提交post方法时，设置编码类型 oXMLHttpRequest.setRequestHeader( “Content-Type”, application/x-www-form-urlencoded);,提交XML oXMLHttpRequest.setRequ

4、estHeader( “Content-Type”, text/xml); 提交COOKIE: oXMLHttpRequest.setRequestHeader( “COOKIE”, cookiename=cookievalue) 一个例子 HelloWorld(HelloWorld.html) 3. 发送请求 XMLHttpRequest对象初始化之后,调用send()方法将请求发送到指定的HTTP服务器; oXMLHttpRequest.send(varBody); varBody: variant型, 可以是字符串,DOM树,或其他任意数据流,同步请求,则要等请求完成之后或超时后才返回;

5、期间页面程序中断执行,没有任何响应; 异步请求,则立即返回,页面程序不会中断; 发送数据为字符串时,回应数据编码为utf-8,可以在文档类型头设置charset的字符类型; 发送数据为XML DOM object时, 回应数据编码,为XML中指定的编码,若没有指定,则默认为utf-8; 使用get请求时,或不要发送数据时,用send(null)或send()即可. EX: HelloWorld(AsyncTest.html) 4. 获取请求的当前状态 XMLHttpRequest对象的生命周期中的5个状态: 0(未初始化): 对象已创建,但未调用open方法初始化; 1(初始化): 对象已经初

6、始化,但未调用send()方法; 2(发送数据): send方法已调用,但HTTP状态和HTTP头未知;,3(数据传送中): 已经开始接收数据.但响应数据和HTTP头信息不全,此时尝试获取数据会出现错误; 4(完成):数据接收完毕; EX: HelloWorld(AsyncTest.html) 5. 指定请求状态改变时的事件处理句柄 XMLHttpRequest对象的readyState发生变化时，会触发readystatechange事件; 注册事件处理函数 通过给XMLHttpRequest对象的readystatechange属性赋值的方法，指定状态处理函数; 6. 获取HTTP请求的状

7、态码 访问XMLHttpRequest对象的status属性获取，只读的整型的值; HTTP状态码：表6-4（p178）;,常用的HTTP状态码 200：OK，请求成功返回; 400：Bad Request，请求失败; 401：Unauthorized, 请求未被授权; 403：Forbidden，请求被禁用; 404：Not Found，请求数据源不存在; 408：Request Timeout，请求超时; 503：Service Unavailable, 请求的服务不可用; 7. 获取HTTP Header信息 oXMLHttpRequest.getResponseHeader(属性名);

8、 获取指定的Header信息; 8. 获取所有Header信息 oXMLHttpRequest.getAllResponseHeaders(); 获取所有的Header信息。 EX: HelloWorld(GetHeader.html);,9.取得返回的数据 通过XMLHttpRequest对象的responseText或responseXML属性来获取返回的数据。 responseText：将返回数据作为字符串格式; responseXML:将返回数据格式化为XML文档返回，要求服务器输出的是一个有效的XML文档; 10. 取消当前请求 oXMLHttpRequest.abort();/使对

9、象重新回到未初始化状态; 6.2 搭建基本的Ajax开发框架 1. 创建XMLHttpRequest对象 由于浏览器对XMLHttpRequest对象的支持不同，所以有必要对不同的浏览器提供不同的创建方法。,function getTransport() var versions = function() return new XMLHttpRequest(); , function() new ActiveXObject(Microsoft.XMLHTTP); , function() new ActiveXObject(Microsoft.XMLHTTP); ;,var request;

10、for(var i = 0; i versions.length; i +) var lambda = versionsi; try request = lambda(); break; catch(e) return request; 2. 发送请求和回调函数 源代码：ajaxRequest.js,3. 一个封装好的基本Ajax应用程序开发框架 将前两个封装的函数进行应用测试; HelloWorld(AjaxRequest.html) 第8章 调试技巧 8.1 深入解析Firebug的调试功能 1. 检查常规错误 可以点击红色的错误图标或按F12打开Firebug的调试窗口。 Example

11、8-1.html 8.2 完善log的功能 1. console.log 在控制台输出信息; 格式：console.log(msg1,msg2,msgn); log()还支持占位符输出;,log支持的4种占位符 %s: 字符串; %d,%i: 整数; %f: 浮点数; %o: 对象; 注：占位符只能在log()的第一个参数中使用; Example8-2.html 2. console.debug console.debug()与console.log()功能相同，也可以接收多个参数; console.debug()输出的信息后会自动添加一个链接，点击链接会自动跳到相应视图; 参数为DOM对象或

12、JavaScript对象时，自动转到DOM查看器显示对象的详细信息;,参数为HTML结点时，自动转到HTML查看器并定位到元素结点上; 参数为函数（方法），自动转到方法定义所在的行; 参数为数组时，自动判断元素的类型，并添加相应的链接; 参数为基本数据类型时，不添加任何链接; Example8-3.html 3. () 与console.debug功能相同，不同的是输出的信息前面加上一个表示注意信息的小图标。 Example8-4.html 4. console.warn() 与console.debug功能相同，不同的是在输出信息前面加上一个表示警告的图标，并将背景设

13、置为绿色。,Example8-5.html 5. console.error 与console.debug功能相同，所不同的在输出的信息前加上表示错误的图标，并在浏览器右下解提示错误。 Example8-6.html 6. console.assert 格式： console.assert(条件表达式,提示信息); 功能： 当表达式为false时，输出提示信息; Example8-7.html 7. console.dir 可以直接将对象或HTML元素的详细信息输出到Firebug中; Example8-8.html,8. console.dirxml 将HTML或XML节点的源代码输出到控制

14、台中; Example8-9.html 9. console.trace 通过在方法体内添加console.trace()语句，可以在Firebug的控制台中输出函数被调用的信息及调用者。 Example8-10.html 10. console.group和console.groupEnd 二者配合使用，对log()信息进行分组; Example8-11.html 11. console.time和console.timeEnd(计算时间) 格式： console.time(计时器名); console.timeEnd(计时器名);,Example8-12.html 12. console.

15、profile和fileEnd 与console.time和console.timeEnd类似，不同的是可以给出所包含代码的性能测试数据。 Example8-13.html 13. console.count 功能 统计自身执行的次数; 格式 console.count(信息标题); Example8-14.html 8.1.3 控制台的命令行功能 直接在控制台下面的输入框中输入JavaScript代码; 命令行快捷方法（下页）;,表8-2 命令行快捷方法,表8-2 命令行快捷方法,8.1.4 断点、单步执行和变量信息 1. 在程序中使用debugger关键字 Examp

16、le8-15.html 2. 使用脚本查看器添加断点 只需要在script中显示的脚本行号前单击鼠标即可; 8.1.5 在其他浏览器中使用Firebug的控制台 step1: 在上下载以下文件： 见图3. step2: 编辑firebug-lite-compressed.js文件，搜索 更改为 http:/localhost/项目目录/firebug-lite.css，保存; 在需要使用控制台的页面中引用firebug-lite.js文件; 标签中必须将debug属性设置为true,否则每次都必须通过F12打开Firebug面板.,图1 通过链接找到下载位置,图2 单击链接,图3 Firebu

17、g 需下载的文件,Example8-15.html 8.1.6 屏蔽测试代码 发布项目时,除删除测试代码外,还可以用以下代码将测试代码屏蔽. var names=log, debug, info, warn, error, assert, dir, dirxml, group, groupEnd, time, timeEnd, count, trace, profile, profileEnd; window.console=; for (var i=0; inames.length; i+) window.consolenamesi=function() 原理: 将console对象的各种方

18、法,设置为空函数;,8.2 使用aptana的集成调试功能 8.2.1 配置集成调试开发环境 在编辑区内右单击，选择“Debug”，打开调试配置窗口； 一般情况下，使用默认配置即可； 或指定Base URL为localhost; 8.2.2 启动调试 直接单击工具栏上的调试按钮即可。 8.2.3 断点，单步执行和变量信息 添加断点 使用debugger关键字，添加断点； 在编辑区左侧行号前双击左键即可，或右键单击该区域，选择“切换断点”； 认识几具常用调试按钮,Step into:单步进入； step over：单步跳过； step out: 单步返回； 8.2.4 使用console.log

19、和dump输入文本信息 Example8-16.html 8.2.5 使用aptana.trace输出调用堆栈信息 aptana.trace(信息标题); Example8-17.html 8.2.6 使用断言 表8-3 Aptana assert API,Example8-18.html,8.2.7 屏蔽测试代码 var names=log, trace, assert, assertEquals, assertNotEquals, assertGreater, assertNotGreater, assertLess, assertNotLess, assertContains, asse

20、rtNotContains, assertTrue, assertFalse, assertNull, assertNotNull, assertUndefined, assertNotUndefined, assertInstanceOf, assertNotInstanceOf, assertTypeOf, assertNotTypeOf; window.aptana=; for (var i=0; inames.length; i+) window.consolenamesi=function() window.dump=function() window.console=window.

21、aptana;,第9章 常见问题 主要内容 编码的处理 控制缓存 选择合适的请求方式 控制多个Ajax请求； Ajax请求的安全性,9.1 编码处理 1. 文件编码与声明编码 中文操作系统中，编码存储编码是gb2312，而一般传输采用的编码是Utf-8，若两者采用的不一致，则会出现乱码； 例如：页面存储使用的是gb2312,而在标签中声明的是utf-8，则在打开页面时，会出现乱码； 解决：使用保存与声明编码一致； 2. Ajax请求乱码 原因：主要是因为XMLHttpRequest使用的解码格式与服务器发送的数据编码不一致； 解决方法： 将后台编码设置为utf-8; 后台输出数据之前，在hea

22、der中指定采用的编码格式,header(“Content-type:text/html;charset=gb2312”); 例子 HelloWorld(RequestTime.java) 9.1.3 发送数据乱码 原因 Ajax post请求发送数据的编码格式是utf-8，若后台页面采用的不是utf-8编码，则会产生乱码； 解决 在接收数据处理之前，先对数据进行转换，转换成需要的编码格式即可； 发送数据前，对所发送数据进行强制转换成uft-8: utf8Str=encodeURIComponent(str); 所有乱码总的解决办法 让程序的前后使用的编码一致，均采用utf-8编码；,9.2 控制缓存 现象 在IE中使用Ajax发送GET请求同一URL地址时，会发现第一次请求的后续请求中，返回的数据没有更新。 HelloWorld(requestTime.html) 原因 由于IE的缓存引起的。由于GET请求时，如果URL地址没有变化，则会直接读取缓存中的数据，而不是重新请求页面。 解决 给每次请求打上时间戳 request.open(“GET”,”cache.php?timeStamp=“ +new