jQuery与JavaScript各自实现AJAX异步请求验证.doc

HYPERLINK /blog/505248 jQuery和JavaScript分别实现AJAX异步请求验证 AJAX概述 1.什么是Ajax？ Ajax是由Jesse James Garrett创造的，是 “Asynchronous JavaScript + XML的简写”。 2.Adaptive Path公司的Jesse James Garrett 这样定义Ajax： Ajax不是一种新技术，而是一种新的理念。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax包含： 基于XHTML和CSS标准的表示； 使用Document Object Model进行动态显示和交互； 使用XMLHttpRequest与服务器进行异步通信； 使用JavaScript绑定一切。 3. 与传统的Web应用不同，AJAX采用异步交互过程。 （1）.AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。 （2）.用户的浏览器在执行任务时即装载了AJAX引擎。 AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。 它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。 现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 3.核心对象—XMLHttpRequest，XMLHttpRequest详解参考 /xmldom/dom_http.asp XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这 样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 一、 用户名校验服务器返回简单文本数据Ajax实例 1. 页面代码(checkUsername.html) Html代码 ? ?? !DOCTYPE?HTML?PUBLIC?-//W3C//DTD?HTML?4.01?Transitional//EN ?? ????????/TR/html4/loose.dtd?? html?? head?? ??title用户名校验/title?? ??meta?http-equiv=content-type?content=text/html;?charset=utf-8?/?? ??script?type=text/javascript?src=checkUsername.js/script?? /head?? body?? ????!--基于标准的一些好习惯，首先标签名要小写，其次标签必须关闭，第三属性名必须是小写的，第四属性值必须位于双引号中--?? ?? ????用户名：?br/?? ????!--ajax方式下不需要使用表单来进行数据提交，因此不用写表单标签--?? ????!--ajax方式不需要name属性，需要一个id的属性--?? ????input?type=text?id=userName?onkeypress=checkUsername(event)?/?? ????input?type=button?value=定位文本框，按Enter校验?/?? ????!--这个span用于存放服务器段返回的信息，开始为空--?? ????!--id属性定义是为了利用dom的方式找到某一个节点，进行操作--?? ????span?id=result/span?? ?? ????!--div和span的直观差异，div中的内容独占行，span中的内容和前后其他内容在同一行中--?? /body?? /html?? ??? 2. JS代码（checkUsername.js） Js代码 ??? ?? var?xmlhttp; ?? //接收回车按键 ?? function?checkUsername(evt){ ?? ????if(evt.keyCode==13){ ?? ????????verify(); ?? ????} ?? } ?? ?? //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互 ?? function?verify()?{ ?? ????//1.使用dom的方式获取文本框中的值 ?? ????//document.getElementById(userName)是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，