《jquery与javascript各自实现ajax异步请求验证毕业论文》由会员分享，可在线阅读，更多相关《jquery与javascript各自实现ajax异步请求验证毕业论文（19页珍藏版）》请在金锄头文库上搜索。
1、jQueryjQuery 和和 JavaScriptJavaScript 分别实现分别实现 AJAXAJAX 异步请求验证异步请求验证AJAX 概述 1.什么是 Ajax？ Ajax 是由 Jesse James Garrett 创造的，是 “Asynchronous JavaScript + XML 的简写”。 2.Adaptive Path 公司的 Jesse James Garrett 这样定义 Ajax： Ajax 不是一种新技术，而是一种新的理念。实际上，它由几种蓬勃发展的技术 以新的强大方式组合而成。 Ajax 包含： 基于 XHTML 和 CSS 标准的表示； 使用 Docume
2、nt Object Model 进行动态显示和交互； 使用 XMLHttpRequest 与服务器进行异步通信； 使用 JavaScript 绑定一切。 3. 与传统的 Web 应用不同，AJAX 采用异步交互过程。 （1）.AJAX 在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程 中的处理等待处理等待缺点。 （2）.用户的浏览器在执行任务时即装载了 AJAX 引擎。 AJAX 引擎用 JavaScript 语言编写，通常藏在一个隐藏的框架中。 它负责编译用户界面及与服务器之间的交互。AJAX 引擎允许用户与应用软件之 间的交互过程异步进行，独立于用户与网络服务器间的交流。 现在，
3、可以用 Javascript 调用 AJAX 引擎来代替产生一个 HTTP 的用户动作， 内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求 可以交给 AJAX 来执行。 3.核心对象XMLHttpRequest，XMLHttpRequest 详解参考 http:/ XMLHttpRequest 是 XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用 程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每 次将数据处理的工作都交给服务器来做；这 样既减轻了服务器负担又加快了响 应速度、缩短了用户等待的时间。 一、 用户名校验服务器返回简单文本数据
4、 Ajax 实例 1. 页面代码(checkUsername.html) Html 代码 1. 2. 4. 5. 6. 用户名校验 7. / 8. t 9. 10. 11. 12. 13. 用户名： 14. 15. 16. / 17. / 18. 19. 20. 21. 22. 23. 24. 25. 2. JS 代码（checkUsername.js） Js 代码 1. 2. var xmlhttp; 3. /接收回车按键 4. function checkUsername(evt) 5. if(evt.keyCode=13) 6. verify(); 7. 8. 9. 10./这个方法将使
5、用 XMLHTTPRequest 对象来进行 AJAX 的异步数据交互 11.function verify() 12. /1.使用 dom 的方式获取文本框中的值 13. /document.getElementById(“userName“)是 dom 中获取元素节点的 一种方法，一个元素节点对应 HTML 页面中的一个标签，如果 14. /“.value“可以获取一个元素节点的 value 属性值 15. var userName = document.getElementById(“userName“).value; 16. 17. /2.创建 XMLHttpRequest 对象 18
6、. /这是 XMLHttpReuquest 对象无部使用中最复杂的一步 19. /需要针对 IE 和其他类型的浏览器建立这个对象的不同方式写不同 的代码 20. 21. if (window.XMLHttpRequest) 22. /针对 FireFox，Mozillar，Opera，Safari，IE7，IE8 23. xmlhttp = new XMLHttpRequest(); 24. /针对某些特定版本的 mozillar 浏览器的 BUG 进行修正 25. if (xmlhttp.overrideMimeType) 26. xmlhttp.overrideMimeType(“text
7、/xml“); 27. 28. else if (window.ActiveXObject) 29. /针对 IE6，IE5.5，IE5 30. /两个可以用于创建 XMLHTTPRequest 对象的控件名称，保存在 一个 js 的数组中 31. /排在前面的版本较新 32. var activexName = “MSXML2.XMLHTTP“,“Microsoft.XMLHTTP“;33. for (var i = 0; i 14. * 类功能:注册账号时，异步校验用户名是否已存在 15. * 16. */ 17.public class CheckUsername extends Htt
8、pServlet 18. 19. protected void doPost(HttpServletRequest request, 20. HttpServletResponse response) throws ServletExcepti on, IOException 21. doGet(request, response); 22. 23. 24. protected void doGet(HttpServletRequest request, 25. HttpServletResponse response) throws ServletExcepti on, IOExceptio
9、n 26. try 27. / 设置响应文件格式，这是为 text/html 28. response.setContentType(“text/html;charset=UTF-8“); 29. PrintWriter out = response.getWriter(); 30. / 1.取参数 31. String oldUserName = request.getParameter(“userName “); 32. / 2.检查参数是否有问题 33. if (oldUserName = null | oldUserName.length() = 0) 34. out.println(
10、“用户名不能为空“); 35. else 36. / 3.校验操作 37. String userName = new String(oldUserName.getByt es(“ISO8859-1“); 38. if (userName.equals(“hello“) 39. out.println(“用户名 “ + userName 40. + “已经存在，请使用其他用户名 “); 41. else 42. out.println(“用户名 “ + userName 43. + “尚未存在，可以使用该用户名注册 “); 44. 45. 46. catch (Exception e) 47.
11、 e.printStackTrace(); 48. 49. 50. 4. web.xml Xml 代码 1. 2. ? 3. 8. 9. 10. CheckUsername 11. com.ajax.CheckUsername 12. 13. 14. 15. CheckUsername 16. /checkUsername 17. 18. 19. 改写为 jQuery 代码： 第 1，3，4 不变，改写第 2 点 JS 代码如下： Js 代码 1. 2. /接收回车按键 3. function checkUsername(evt) 4. if(evt.keyCode=13) 5. /可选 ve
12、rify1()和 verify2()任意一种 6. verify2(); 7. 8. 9. 10./第一种方式:通过 jQuery 的 load()/get()/post()方法实现 11./load():默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。12.function verify1() 13. /1.获取文本框中的内容 14. /document.getElementById(“userName“); dom 的方式 15. /Jquery 的查找节点的方式，参数中#加上 id 属性值可以找到一个 节点。 16. /jquery 的方法返回的都是 jquery 的对象，可以继续在上面执行 其他的 jquery 方法 17. var jqueryObj = $(“#userName“); 18. /获取节点的值 19. var userName = jqueryObj.val(); 20. 21. /解决中文乱麻问题的方法 1，页面端发出的数据作一次 encodeURI，服务器段使用 new String(old.getBytes(“iso8859-1“), “UTF-8“); 22. /解决中
