传智播客--AJAX知识点和实用练习总结

通过两天高负荷的学习,对 JavaScript 有了个全新的认识和掌握.不紧对 JavaScript 的各个知识点有了全面的了解,还做了很多实用的练习.我相信这些练习,在今后的工作中会经常碰到了.所以做的时候相对的认真.两天的学习,内容很多.有一 些个别的地方不能马上理解,和一些练习没有做完.在今天休息的时候,到班级上了一天的自习.对 AJAX 有做了一个全面的回归和总结.今天虽然是放假,平时的课程虽然很紧,但今天的来上自习的人不少.大家都很安静.学习的效率很高.有了不少的思考和新的收 获.

1.什么是 AJAX
不用刷新整个页面便可与服务器通讯的办法
不过它也是有 缺点的
1)由 Javascript 和 AJAX 引擎导致的浏览器的兼容
2)页面局部刷新，导致后退等功能失效。
3) 对流媒体的支持没有FLASH、Java Applet好。
4)一些手持设备（如手机、PDA等）支持性差。

2.Ajax的工作原理图


3.创建 XMLHttpRequest 对象
function getXmlHttpRequest(){
                var xhr = false;               
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }               
                return xhr;
            };

4. 利用 XMLHttpRequest 发送请求
1)每次 readyState 属性的改变都会触发 readystatechange 事件
2)open(method, url, asynch)
3)send(data)

5.  XMLHttpRequest 接受相应信息
1) readyState 表示 Ajax 请求的当前状态
2) status 状态码是服务器发送的响应中最重要的首部信息
3) responseText 包含了从服务器发送的数据
4) responseXML 如果服务器返回的是 XML,那么数据将储存在 responseXML 属性中

6.AJAX 常用的三种数据格式
1)XML
2)JSON
3)HTML

7.练习题总结
1)点击超链接,利用 AJAX, 在不刷新页面的前提下,显示姓名和网址.
这 里练习了,运用了三种不同是数据格式. 要想在不同的情况下选择好不同传输方式就要了解到他们的优缺点.
①HTML: 优点:从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。 HTML 的可读性好。 HTML 代码块与 innerHTML 属性搭配，效率高。缺点:若需要通过 AJAX 更新一篇文档的多个部分， HTML 不合适 ;innerHTML 并非 DOM 标准。
②XML: 优点： XML 是一种通用的数据格式。不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。利用 DOM 可以完全掌控文档。缺点:如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂
③JSON优点:作为一种数据传输格式， JSON 与 XML 很相似，但是它更加灵巧。 JSON 不需要从服务器端发送含有特定内容类型的首部信息。缺点:语法过于严谨 ; 代码不易读 ;eval 函数存在风险.
总结:
在知道了他们在那些方面擅长,那些方面不擅长,运用起来就自如多了. 若应用程序不需要与其他应用程序共享数据的时候,使用 HTML 片段来返回数据时最简单的 ; 如果数据需要重用,JSON 文件是个不错的选择,其在性能和文件大小方面有优势 ; 当远程应用程序未知时,XML 文档是首选,因为 XML 是 web 服务领域的"世界语".

2)验 证日期
在页面上给出输入日期的标准格式,在获取焦点之后,对内容的更改进行监控,输入正确的日期后在页面中用绿色提示输入正确 ; 输入错误格式,用红色显示错误的提示信息.
总结:
在这个练习中,不只用到了上面的三个知识,还用到了正则表达式. 这项技术也是程序员基本技能之一. 不过这个日期的验证的正则表达式很复杂,不能自己写出来,这就锻炼了我们另一项技能. 在网上搜索资料,解决问题的能力. 在网上不难找到相关的正则表达式,并用到我们的程序里,来解决问题. 提高了效率还锻炼了能力. 除了这些,还有三个新的内容在这个练习里,锻炼了. 我们知道 jQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON(). 在这个练习里,我们就用到了在公司中经常能用到的,其中几种方法. 进行了练习. $.ajax(),load(), $.get(), $.getJSON(); 再加上上面的三种传输方式. 现在对 AJAX 的理解更加透彻了.

3)动态加载列表框
这个练习比上面两个练习更加真实和复杂. 练习到的知识点也多了不少. 不只用到了,这两天学习的 AJAX, 还用到了前几天学习的 struts 和 Oracle 数据库. 这个练习刚做的时候没有什么头绪. 当时在课上老师讲过了,没有马上理解. 今天休息,又看了一遍上课时候的视频,并复习了相关的知识. 最后圆满的做完了这个. 信心大增,很高兴. 心情一好,晚上多吃了不少. 哈哈. 每当做不出东西的时候,总是吃不下睡不好的. 做出自己满的东西时就高兴的不得了. 太情绪化了.

在不断的学习中,体验着别人感觉不到的快乐. 对未来程序员的道路充满了信心.