JAX.pptVIP

AJAX技术入门 主讲人：刘鹏程 Ajax的基本技术 (1) DHTML 用于动态更新表单。我们将使用?div、span?和其他动态 HTML 元素来标记 HTML (2)使用DOM进行动态显示和交互 (3)使用XML和JSON进行数据交换和处理 (4)使用XMLHttpRequest进行异步数据检索 (5)使用Javascript将以上技术融合在一起 Ajax的特点 (1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交 (2)不需刷新页面就可改变页面内容，减少用户等待时间 。 (3)按需获取数据，每次只从服务器端获取需要的数据 。 (4)读取外部数据，进行数据处理整合 。 (5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作 Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写 AJAX思维方式： 我们就通过用户名校验这个简单的例子来看看传统Web应用和AJAX应用开发思维的不同之处。 这个最简单的例子需求如下：用户在页面的文本框中输入想注册的用户名，然后点击校验按钮，如果输入的用户名为“liupengcheng”，则提示用户名已经存在，请重新输入，否则提示用户名尚未存在，可以使用此用户名进行注册。 AJAX思维方式： AJAX思维方式： 在浏览器中输入用户名-点击按钮提交用户名给Servlet-浏览器转向Servlet的页面-等待Servlet处理-Servlet返回响应信息-浏览器中看到Servlet页面的响应信息，当然这其中有几个过程可能时间短暂到你没有注意，但这些过程是确实存在。 AJAX思维方式： Html页面中包含文本框和校验按钮，点击提交按钮以后，我需要通过javascript获取文本框中的数据，然后通过XMLHttprequest发送数据给servlet，此外还需要准备用于接收响应的javascript函数，接收到servlet的提示信息后，我需要将这些信息动态的写在页面上。servlet程序判断当前的用户名是否是“liupengcheng”，并给出相应的提示。 AJAX思维方式： servlet不需要返回html页面的链接了，因为我们不需要跳转到servlet表示的页面中，我们只需要获得servlet页面产生的结果 html页面中我不用表单提交数据了，我的数据通过javascript来获取，然后通过一个叫做XMLHttprequest的对象发送个servlet。而且我没有做页面跳转 我需要一个接收servlet响应信息的javascript函数，我没有进入servelt代表的页面查看响应信息，而是把servlet的响应信息接收回来，再显示在我当前的页面上。 AJAX思维方式： 当你运行上面的程序，你会发现从用户的角度来看，与传统Web应用模式的流程相比，AJAX应用模式的流程是不同的。 AJAX应用的流程是：在浏览器中输入数据-点击按钮提交请求-用户可以继续做其他事情；Servlet在处理数据，并发回数据-浏览器收到响应-浏览器中的当前页面显示响应结果，这其中仍然有些过程由于时间短暂使你忽略了它的错在，但实际上这些过程都是存在的。 AJAX思维方式： 两个流程的对比让我们看到的显而易见的差别就是AJAX应用中没有向新页面跳转，用户不需要处于无事可做的等待中。 传统的响应方式 Ajax响应方式 AJAX思维方式： Ajax核心技术 XMLHttpRequest对象 DOM与HTML DOM与XML 面向对象的Javascript XMLHttpRequest 由于XMLHttpRequest并不是W3C的标准，因此在各个浏览器的实现上也有所不同。IE“独树一帜”，仍然是以ActiveX组件的方式来创建XMLHttpRequest对象，其他浏览器则可以直接创建javascript的XMLHttpRequest对象。 XMLHttpRequest Ajax提交 Ajax提交 我们还发现和传统模式相比，文本框我们定义了id属性，而不是name属性。这是因为在AJAX模式中，我们通常在javascript代码中通过DOM获得html页面中某个节点的值，因此我们一般都定义id属性document.getElementById的作用是根据id名获得对应的节点我们这里分别用这个语句来获得div和文本框的节点；.value的作用是获得文本框的value属性值，也就是文本框中的内容。 Ajax显示 resultNode.innerHTML = 不能建立XMLHttpRequest对象; Ajax回调函数 然后我们做的工作是设置一个回调