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

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代码 1. 2. 4. 5. 6. 用户名校验7. 8. 9. 10. 11. 12. 13. 用户名：14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 用户名校验 用户名： 2. JS代码（checkUsername.js） Js代码 1. 2. varxmlhttp; 3. /接收回车按键 4. functioncheckUsername(evt) 5. if(evt.keyCode=13) 6. verify(); 7. 8. 9. 10. /这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互 11. functionverify() 12. /1.使用dom的方式获取文本框中的值 13. /document.getElementById(userName)是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果 14. /.value可以获取一个元素节点的value属性值 15. varuserName=document.getElementById(userName).value; 16. 17. /2.创建XMLHttpRequest对象 18. /这是XMLHttpReuquest对象无部使用中最复杂的一步 19. /需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 20. 21. if(window.XMLHttpRequest) 22. /针对FireFox，Mozillar，Opera，Safari，IE7，IE8 23. xmlhttp=newXMLHttpRequest(); 24. /针对某些特定版本的mozillar浏览器的BUG进行修正 25. if(xmlhttp.overrideMimeType) 26. xmlhttp.overrideMimeType(text/xml); 27. 28. elseif(window.ActiveXObject) 29. /针对IE6，IE5.5，IE5 30. /两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中 31. /排在前面的版本较新 32. varactivexName=MSXML2.XMLHTTP,Microsoft.XMLHTTP; 33. for(vari=0;iactivexName.length;i+) 34. try 35. /取出一个控件名进行创建，如果创建成功就终止循环 36. /如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建 37. xmlhttp=newActiveXObject(activexNamei); 38. break; 39. catch(e) 40. 41. 42. 43. /确认XMLHTtpRequest对象创建成功 44. if(!xmlhttp) 45. alert(XMLHttpRequest对象创建失败!); 46. return; 47. 48. 49. /3.注册回调函数 50. /注册回调函数时，之需要函数名，不要加括号 51. /我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的 52. xmlhttp.onreadystatechange=callback; 53. 54. /4.设置连接信息 55. /第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post 56. /第二个参数表示请求的url地址，get方式请求的参数也在url中 57. /第三个参数表示采用异步还是同步方式交互，true表示异步 58. varurl=checkUsername?userName=+userName; 59. /xmlhttp.open(GET,url,true); 60. 61. /POST方式请求的代码 62. xmlhttp.open(POST,url,true); 63. /POST方式需要自己设置http的请求头,这句话不能去，否则得不到数据。确保服务器知道请求体中有参数。 64. xmlhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 65. 66. /5.发送数据，开始和服务器端进行交互 67. /同步方式下，send这句话会在服务器段数据回来后才执行完 68. /异步方式下，send这句话会立即完成执行 69. /GET/POST方式发送数据 70. xmlhttp.send(null); 71. 72. /POST方式还可这样发送数据，这时上面的url只为：checkUsername 73. /xmlhttp.send(userName=+userName); 74. 75. 76. /回调函数 77. functioncallback() 78. /6.接收响应数据 79. /判断对象的状态是交互完成 80. if(xmlhttp.readyState=4) 81. /判断http的交互是否成功 82. if(xmlhttp.status=200) 83. /获取服务漆器端返回的数据 84. /获取服务器段输出的纯文本数据 85. varresponseText=xmlhttp.responseText; 86. /将数据显示在页面上 87. /通过dom的方式找到div标签所对应的元素节点 88. varspanNode=document.getElementById(result); 89. /设置元素节点中的html内容 90. spanNode.innerHTML=responseText; 91. else 92. alert(error！); 93. 94. 95. var xmlhttp;/接收回车按键function checkUsername(evt)if(evt.keyCode=13)verify();/这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互function verify() /1.使用dom的方式获取文本框中的值 /document.getElementById(userName)是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果 /.value可以获取一个元素节点的value属性值 var userName = document.getElementById(userName).value; /2.创建XMLHttpRequest对象 /这是XMLHttpReuquest对象无部使用中最复杂的一步 /需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 if (window.XMLHttpRequest) /针对FireFox，Mozillar，Opera，Safari，IE7，IE8 xmlhttp = new XMLHttpRequest(); /针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType(text/xml); else if (window.ActiveXObject) /针对IE6，IE5.5，IE5 /两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中 /排在前面的版本较新 var activexName = MSXML2.XMLHTTP,Microsoft.XMLHTTP; for (var i = 0; i activexName.length; i+) try /取出一个控件名进行创建，如果创建成功就终止循环 /如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建 xmlhttp = new ActiveXObject(activexNamei); break; catch(e) /确认XMLHTtpRequest对象创建成功 if (!xmlhttp) alert(XMLHttpRequest对象创建失败!); return; /3.注册回调函数 /注册回调函数时，之需要函数名，不要加括号 /我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的 xmlhttp.onreadystatechange = callback; /4.设置连接信息 /第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post /第二个参数表示请求的url地址，get方式请求的参数也在url中 /第三个参数表示采用异步还是同步方式交互，true表示异步var url = checkUsername?userName=+ userName; /xmlhttp.open(GET,url,true); /POST方式请求的代码xmlhttp.open(POST,url,true); /POST方式需要自己设置http的请求头,这句话不能去，否则得不到数据。确保服务器知道请求体中有参数。 xmlhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded); /5.发送数据，开始和服务器端进行交互 /同步方式下，send这句话会在服务器段数据回来后才执行完 /异步方式下，send这句话会立即完成执行/GET/POST方式发送数据 xmlhttp.send(null);/POST方式还可这样发送数据，这时上面的url只为：checkUsername /xmlhttp.send(userName= + userName);/回调函数function callback() /6.接收响应数据 /判断对象的状态是交互完成 if (xmlhttp.readyState = 4) /判断http的交互是否成功 if (xmlhttp.status = 200) /获取服务漆器端返回的数据 /获取服务器段输出的纯文本数据 var responseText = xmlhttp.responseText; /将数据显示在页面上 /通过dom的方式找到div标签所对应的元素节点 var spanNode = document.getElementById(result); /设置元素节点中的html内容 spanNode.innerHTML = responseText; else alert(error！); 3. Servlet代码(CheckUsername.java) Java代码 1. 2. packagecom.ajax; 3. 4. importjavax.servlet.http.HttpServlet; 5. importjavax.servlet.http.HttpServletRequest; 6. importjavax.servlet.http.HttpServletResponse; 7. importjavax.servlet.ServletException; 8. importjava.io.IOException; 9. importjava.io.PrintWriter; 10. 11. /* 12. *authorSeany 13. * 14. *类功能:注册账号时，异步校验用户名是否已存在 15. * 16. */17. publicclassCheckUsernameextendsHttpServlet 18. 19. protectedvoiddoPost(HttpServletRequestrequest, 20. HttpServletResponseresponse)throwsServletException,IOException 21. doGet(request,response); 22. 23. 24. protectedvoiddoGet(HttpServletRequestrequest, 25. HttpServletResponseresponse)throwsServletException,IOException 26. try 27. /设置响应文件格式，这是为text/html 28. response.setContentType(text/html;charset=UTF-8); 29. PrintWriterout=response.getWriter(); 30. /1.取参数 31. StringoldUserName=request.getParameter(userName); 32. /2.检查参数是否有问题 33. if(oldUserName=null|oldUserName.length()=0) 34. out.println(用户名不能为空); 35. else 36. /3.校验操作 37. StringuserName=newString(oldUserName.getBytes(ISO8859-1); 38. if(userName.equals(hello) 39. out.println(用户名+userName 40. +已经存在，请使用其他用户名); 41. else 42. out.println(用户名+userName 43. +尚未存在，可以使用该用户名注册); 44. 45. 46. catch(Exceptione) 47. e.printStackTrace(); 48. 49. 50. package com.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;/* * author Seany * * 类功能:注册账号时，异步校验用户名是否已存在 * */public class CheckUsername extends HttpServlet protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException doGet(request, response);protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException try / 设置响应文件格式，这是为text/htmlresponse.setContentType(text/html;charset=UTF-8);PrintWriter out = response.getWriter();/ 1.取参数String oldUserName = request.getParameter(userName);/ 2.检查参数是否有问题if (oldUserName = null | oldUserName.length() = 0) out.println(用户名不能为空); else / 3.校验操作String userName = new String(oldUserName.getBytes(ISO8859-1);if (userName.equals(hello) out.println(用户名 + userName+ 已经存在，请使用其他用户名); else out.println(用户名 + userName+ 尚未存在，可以使用该用户名注册); catch (Exception e) e.printStackTrace();4. web.xml Xml代码 1. 2. 3. 8. 9. 10. CheckUsername11. com.ajax.CheckUsername12. 13. 14. 15. CheckUsername16. /checkUsername17. 18. 19. CheckUsernamecom.ajax.CheckUsernameCheckUsername/checkUsername改写为jQuery代码： 第1，3，4不变，改写第2点JS代码如下： Js代码 1. 2. /接收回车按键 3. functioncheckUsername(evt) 4. if(evt.keyCode=13) 5. /可选verify1()和verify2()任意一种 6. verify2(); 7. 8. 9. 10. /第一种方式:通过jQuery的load()/get()/post()方法实现 11. /load():默认使用GET方式-传递附加参数时自动转换为POST方式。 12. functionverify1() 13. /1.获取文本框中的内容 14. /document.getElementById(userName);dom的方式 15. /Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点。 16. /jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 17. varjqueryObj=$(#userName); 18. /获取节点的值 19. varuserName=jqueryObj.val(); 20. 21. /解决中文乱麻问题的方法1，页面端发出的数据作一次encodeURI，服务器段使用newString(old.getBytes(iso8859-1),UTF-8); 22. /解决中文乱麻问题的方法2，页面端发出的数据作两次encodeURI，服务器段使用URLDecoder.decode(old,UTF-8) 23. varurl=checkUsername?userName=+encodeURI(encodeURI(userName); 24. url=convertURL(url); 25. 26. /2.将文本框中的数据发送给服务器段的servelt 27. /使用jquery的XMLHTTPrequest对象get请求的封装 28. /$.get(url,null,function(data) 29. /$(#result).html(data); 30. /); 31. 32. /使用jquery的XMLHTTPrequest对象post请求的封装 33. $.post(url,null,callback); 34. 35. 36. /回调函数 37. functioncallback(data) 38. /alert(服务器段的数据回来了！); 39. /3.接收服务器端返回的数据 40. /alert(data); 41. /4.将服务器段返回的数据动态的显示在页面上 42. /找到保存结果信息的节点 43. varresultObj=$(#result); 44. /动态的改变页面中span节点中的内容 45. resultObj.html(data); 46. 47. 48. /给url地址增加时间戳，骗过浏览器，不读取缓存 49. functionconvertURL(url) 50. /获取时间戳 51. vartimstamp=(newDate().valueOf(); 52. /将时间戳信息拼接到url上 53. if(url.indexOf(?)=0) 54. url=url+&t=+timstamp;/适用于已有参数时，url=checkUsername?username=+userName; 55. else 56. url=url+?t=+timstamp;/适用于没有参数时，url=checkUsername; 57. 58. returnurl; 59. 60. 61. /第二种方式：通过jQuery的ajax()方法实现 62. functionverify2() 63. $.ajax( 64. type:POST,/HTTP请求方式 65. url:checkUsername,/请求URL 66. async:false,/(默认:true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 67. data:userName=+encodeURI(encodeURI($(#userName).val(),/封装请求参数 68. dataType:html,/预期服务器返回的数据类型 69. success:function(data) 70. $(#result).html(data); 71. 72. ); 73. /接收回车按键function checkUsername(evt)if(evt.keyCode=13)/可选verify1()和verify2()任意一种verify2(); /第一种方式:通过jQuery的load()/get()/post()方法实现/load():默认使用GET方式 - 传递附加参数时自动转换为 POST 方式。function verify1() /1.获取文本框中的内容 /document.getElementById(userName); dom的方式 /Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点。 /jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 var jqueryObj = $(#userName); /获取节点的值 var userName = jqueryObj.val(); /解决中文乱麻问题的方法1，页面端发出的数据作一次encodeURI，服务器段使用new String(old.getBytes(iso8859-1),UTF-8); /解决中文乱麻问题的方法2，页面端发出的数据作两次encodeURI，服务器段使用URLDecoder.decode(old,UTF-8) var url = checkUsername?userName= + encodeURI(encodeURI(userName); url = convertURL(url); /2.将文本框中的数据发送给服务器段的servelt /使用jquery的XMLHTTPrequest对象get请求的封装/ $.get(url,null,function(data)/ $(#result).html(data);/);/使