您的位置: 首页  >  文章  >  Ajax原理

Ajax原理

分类: 文章 • 2024-01-05 12:27:46

本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。

传统方式：

[java] view plaincopyprint?
  1. <%@pagelanguage="java"contentType="text/html;charset=ISO-8859-1"
  2. pageEncoding="ISO-8859-1"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
  7. <title>Inserttitlehere</title>
  8. </head>
  9. <body>
  10. <formaction="SayHello.jsp">
  11. name:<inputtype="text"name="name"/>
  12. <inputtype="submit"name="submit"/>
  13. </form>
  14. <%
  15. if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
  16. out.print("Hello"+request.getParameter("name"));
  17. %>
  18. </body>
  19. </html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form action="SayHello.jsp"> name:<input type="text" name="name"/> <input type="submit" name="submit"/> </form> <% if(request.getParameter("name")!=null&&request.getParameter("name").length()>0) out.print("Hello "+request.getParameter("name")); %> </body> </html>

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

[java] view plaincopyprint?
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
  7. <title>SayHello</title>
  8. <scripttype="text/javascript">
  9. //创建XMLHttpReques对象
  10. functioncreateXMLHttpRequest(){
  12. if(window.XMLHttpRequest){
  13. //Mozilla浏览器
  15. XMLHttpReq=newXMLHttpRequest();
  16. }else{
  18. //IE浏览器
  19. if(window.ActiveXObject){
  20. try{
  21. XMLHttpReq=newActionXObject("Msxm12.XMLHTTP");
  22. }catch(e){
  23. try{
  24. XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
  25. }catch(e){}
  26. }
  27. }
  28. }
  29. }
  30. //处理服务器响应结果
  31. functionhandleResponse(){
  32. //判断对象状态
  33. if(XMLHttpReq.readyState==4){
  34. //信息已经成功返回，开始处理信息
  35. if(XMLHttpReq.status==200){
  36. varout="";
  37. varres=XMLHttpReq.responseXML;
  38. varresponse=res.getElementsByTagName("response")[0].firstChild.nodeValue;
  39. //5.解析服务器返回的信息,更新用户界面
  40. document.getElementById("Hello").innerHTML=response;
  41. }
  42. }
  43. }
  44. //发送客户端的请求
  45. functionsendRequest(url){
  46. //1.创建XMLHttpRequest
  47. createXMLHttpRequest();
  48. //2.设置回调函数
  49. XMLHttpReq.onreadystatechange=handleResponse;
  50. //3.初始化XMLHttpRequest组建并发送请求
  51. XMLHttpReq.open("GET",url,true);
  52. //发送请求
  53. XMLHttpReq.send(null);
  54. }
  55. //开始调用Ajax的功能
  56. functionsayHello()
  57. {
  58. varname=document.getElementById("name").value;
  59. //发送请求
  60. sendRequest("SayHell?name="+name);
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <fontsize="1">
  66. name:<inputtype="text"id="name"/>
  67. <inputtype="button"value="提交"onclick="sayHello()"/>
  68. <divid="Hello"></div>
  69. </font>
  70. </body>
  71. </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>SayHello</title> <script type="text/javascript"> //创建XMLHttpReques对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //Mozilla浏览器 XMLHttpReq=new XMLHttpRequest(); }else{ //IE浏览器 if(window.ActiveXObject){ try{ XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP"); }catch(e){ try{ XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } } } //处理服务器响应结果 function handleResponse() { // 判断对象状态 if (XMLHttpReq.readyState == 4) { // 信息已经成功返回，开始处理信息 if (XMLHttpReq.status == 200) { var out = ""; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName("response")[0].firstChild.nodeValue; //5. 解析服务器返回的信息,更新用户界面 document.getElementById("Hello").innerHTML = response; } } } //发送客户端的请求 function sendRequest(url){ //1.创建XMLHttpRequest createXMLHttpRequest(); //2.设置回调函数 XMLHttpReq.onreadystatechange=handleResponse; //3.初始化XMLHttpRequest组建并发送请求 XMLHttpReq.open("GET",url,true); //发送请求 XMLHttpReq.send(null); } //开始调用Ajax的功能 function sayHello() { var name=document.getElementById("name").value; //发送请求 sendRequest("SayHell?name="+name); } </script> </head> <body> <font size="1"> name:<input type="text" id="name"/> <input type="button" value="提交" onclick="sayHello()"/> <div id="Hello"></div> </font> </body> </html>

代码解析：

1.创建XMLHttpRequest

2.设置回调函数

3.初始化XMLHttpRequest组建并发送请求

4.服务器返回响应信息

5.解析服务器返回的信息,更新用户界面

详细调用过程如下

Ajax原理

最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求，在得到服务器的返回的处理结果以后，文本框中的用户输入信息依然存在，使用Ajax只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。

本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。

传统方式：

[java] view plaincopyprint?
  1. <%@pagelanguage="java"contentType="text/html;charset=ISO-8859-1"
  2. pageEncoding="ISO-8859-1"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
  7. <title>Inserttitlehere</title>
  8. </head>
  9. <body>
  10. <formaction="SayHello.jsp">
  11. name:<inputtype="text"name="name"/>
  12. <inputtype="submit"name="submit"/>
  13. </form>
  14. <%
  15. if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
  16. out.print("Hello"+request.getParameter("name"));
  17. %>
  18. </body>
  19. </html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form action="SayHello.jsp"> name:<input type="text" name="name"/> <input type="submit" name="submit"/> </form> <% if(request.getParameter("name")!=null&&request.getParameter("name").length()>0) out.print("Hello "+request.getParameter("name")); %> </body> </html>

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

[java] view plaincopyprint?
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1">
  7. <title>SayHello</title>
  8. <scripttype="text/javascript">
  9. //创建XMLHttpReques对象
  10. functioncreateXMLHttpRequest(){
  12. if(window.XMLHttpRequest){
  13. //Mozilla浏览器
  15. XMLHttpReq=newXMLHttpRequest();
  16. }else{
  18. //IE浏览器
  19. if(window.ActiveXObject){
  20. try{
  21. XMLHttpReq=newActionXObject("Msxm12.XMLHTTP");
  22. }catch(e){
  23. try{
  24. XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
  25. }catch(e){}
  26. }
  27. }
  28. }
  29. }
  30. //处理服务器响应结果
  31. functionhandleResponse(){
  32. //判断对象状态
  33. if(XMLHttpReq.readyState==4){
  34. //信息已经成功返回，开始处理信息
  35. if(XMLHttpReq.status==200){
  36. varout="";
  37. varres=XMLHttpReq.responseXML;
  38. varresponse=res.getElementsByTagName("response")[0].firstChild.nodeValue;
  39. //5.解析服务器返回的信息,更新用户界面
  40. document.getElementById("Hello").innerHTML=response;
  41. }
  42. }
  43. }
  44. //发送客户端的请求
  45. functionsendRequest(url){
  46. //1.创建XMLHttpRequest
  47. createXMLHttpRequest();
  48. //2.设置回调函数
  49. XMLHttpReq.onreadystatechange=handleResponse;
  50. //3.初始化XMLHttpRequest组建并发送请求
  51. XMLHttpReq.open("GET",url,true);
  52. //发送请求
  53. XMLHttpReq.send(null);
  54. }
  55. //开始调用Ajax的功能
  56. functionsayHello()
  57. {
  58. varname=document.getElementById("name").value;
  59. //发送请求
  60. sendRequest("SayHell?name="+name);
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <fontsize="1">
  66. name:<inputtype="text"id="name"/>
  67. <inputtype="button"value="提交"onclick="sayHello()"/>
  68. <divid="Hello"></div>
  69. </font>
  70. </body>
  71. </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>SayHello</title> <script type="text/javascript"> //创建XMLHttpReques对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //Mozilla浏览器 XMLHttpReq=new XMLHttpRequest(); }else{ //IE浏览器 if(window.ActiveXObject){ try{ XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP"); }catch(e){ try{ XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } } } //处理服务器响应结果 function handleResponse() { // 判断对象状态 if (XMLHttpReq.readyState == 4) { // 信息已经成功返回，开始处理信息 if (XMLHttpReq.status == 200) { var out = ""; var res = XMLHttpReq.responseXML; var response= res.getElementsByTagName("response")[0].firstChild.nodeValue; //5. 解析服务器返回的信息,更新用户界面 document.getElementById("Hello").innerHTML = response; } } } //发送客户端的请求 function sendRequest(url){ //1.创建XMLHttpRequest createXMLHttpRequest(); //2.设置回调函数 XMLHttpReq.onreadystatechange=handleResponse; //3.初始化XMLHttpRequest组建并发送请求 XMLHttpReq.open("GET",url,true); //发送请求 XMLHttpReq.send(null); } //开始调用Ajax的功能 function sayHello() { var name=document.getElementById("name").value; //发送请求 sendRequest("SayHell?name="+name); } </script> </head> <body> <font size="1"> name:<input type="text" id="name"/> <input type="button" value="提交" onclick="sayHello()"/> <div id="Hello"></div> </font> </body> </html>

代码解析：

1.创建XMLHttpRequest

2.设置回调函数

3.初始化XMLHttpRequest组建并发送请求

4.服务器返回响应信息

5.解析服务器返回的信息,更新用户界面

详细调用过程如下

Ajax原理

最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求，在得到服务器的返回的处理结果以后，文本框中的用户输入信息依然存在，使用Ajax只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。

相关推荐