AJAX技术是由王兴魁老师讲解的，王老师对AJAX相关技术(html、css、xml、javascript)，AJAX开发框架，尤其是JQuery有深入的理解。由于学员大部分时间接触的是JAVA相关的东西，所以一开始就讲AJAX的基本理论效果并不是太好。因此王老师在这套视频中先做了一些简单应用然后再讲述基本的理论，最后做了一些比较实用的应用。王老师所用的开发工具是IntelliJ，所以首先安装了IntelliJ和介绍了AJAX的基本概念。
什么是AJAX(Asynchronous JavaScript And XML)，即异步的JavaScript 和 XML，它不是什么新的技术，而是原来就有的技术的融合。具体表现就是，AJAX使用XHTML和CSS的基于标准的表示技术、使用DOM进行动态显示与交互、使用XML和XSLT进行数据交换和处理、使用XMLHtppRequest进行异步数据检索，最关键的就是AJAX使用JavaScript将以上技术融合在一起。传统应用是随着时间的推移，客户端浏览器发出请求，服务器接收请求并处理，然后将结果发送给客户端，浏览器收到结果后，再一次发出请求，如此循环往复，客户端的页面才从一个页面跳转到另外一个页面。这种应用的一个缺点是浏览器发出请求后，等待响应结果这一段时间是空闲状态的。而AJAX则是通过XMLHtppRequest对象与服务器交互，不会中断用户的体验，页面不会刷新。因此，AJAX是老技术，新思想，它的常见好处有改善表单验证方式，不再需要打开新页面，也不需要将整个页面数据提交；不需要刷新页面就可以改变页面内容，减少用户等待时间；按需获取数据，每次只从服务器端获取需要的数据；读取外部数据，进行数据处理整合；异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作等等。
对AJAX有了初步的认识，下面就用Jquery实现一个简单应用来与传统的应用比较一下。首先建立一个传统的web应用，一个index的HTML页面里有一个用户名字段，然后一个检验按钮，提交的对象是一个传统的Servlet，在该Servlet中进行不能为空和不能等于某个特定的字符串验证，最后将结果返回给页面。正如前面提到的那样，在这个模拟应用中，用户时需要等待服务器的验证结果，并需要刷新网页。以下就是用AJAX技术实现时的代码片断：
<body>
itcast.cn用户名校验的ajax实例，请输入用户名： <br/>
<input type="text" id="userName" />
<input type="button" value="校验" οnclick="verify()"/>
<div id="result"></div>
</body>
上面代码示例就是body标签内的内容，首先需要改变的内容就是因为AJAX方式下不需要使用表单来进行数据提交，因此不用写表单标签，这与平常应用的form必填表单是有着根本的区别的。第二个改变的是AJAX方式的input标签中不需要name属性，需要一个id的属性。最后再添加一个用于存放服务器段返回的信息的div标签，同样需要定义id属性，和前面定义id属性的原因一样，都是为了利用DOM的方式找到某一个节点，然后进行相关的操作。在今后的代码中，经常要用到div和span标签。这两个标签在直观上的差异是div中的内容独占一行，span中的内容和前后其他内容相处良好，不会导致换行的发生。虽然浏览器的容错性比较好，但是写这些代码时注意要养成一个好的习惯，基于标准的一些好习惯有如下一些，首先标签名要小写，其次标签必须关闭，第三属性名必须是小写的，第四属性值必须位于双引号中。
在这个简单例子中并不是用XML格式传输数据，所以服务器端的Servlet其实没什么变化，和传统的是一样的。虽然写法没有变化，但是本质却改变了，在AJAX技术的实现中，返回的是用户感兴趣的数据，而不是将一个新的页面发送给用户。下面就是AJAX中最重要的内容——JavaScript代码的编写。首先是在页面上引入JQuery的库并且引入自己编写的JavaScript文件。例如：
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
在verify.js文件中定义了如下的用户名校验的方法：
function verify(){
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
$.get("AJAXServer?name=" + userName,null,callback);
}
function callback(data) {
var resultObj = $("#result");
resultObj.html(data);
}
如上所示，用JQuery写的JS代码相当的少，这就是JQuery库的作用。首先是通过美元操作函数来查找节点对象：$("#userName")，这和DOM方式中的document.getElementById("userName")效果一样，但是JQuery中返回不是DOM中的节点对象，而是JQuery的对象，所以可以继续在上面执行其他的JQuery方法。第二步就是获取节点的值，然后将用JQuery的XMLHTTPrequest对象的get请求封装的文本框中的数据发送给服务器端的Servelt。在这个方法中，需要一个回调函数，用来接受并处理服务器端返回的数据。所以在回调函数中接受数据，查找需要显示数据的节点，最后将数据显示在该节点处。这样就实现了没有刷新页面就和服务器完成了交互。
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
