比较完整的原始ajax写法

originalityAjax.html代码如下：

Html代码  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>最原始的ajax写法</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9. <script type="text/javascript">
  10. //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
  11. var xmlHttpRequest;
  12. //用户名校验的方法
  13. function verify() {
  14. var success = createXMLHTTPRequest();
  15. if (!success) {
  16. return;
  17. }
  18. var userName = document.getElementById("userName").value;//获取用户名字
  19. //2.注册回调函数
  20. //注册回调函数时，之需要函数名，不要加括号
  21. //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
  22. xmlHttpRequest.onreadystatechange = callback;
  23. //3。设置连接信息
  24. //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
  25. //第二个参数表示请求的url地址，get方式请求的参数也在url中
  26. //第三个参数表示采用异步还是同步方式交互，true表示异步
  27. //记住在url后面加上时间戳
  28. //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);
  29. //POST方式请求的代码
  30. xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);
  31. //POST方式需要自己设置http的请求头
  32. xmlHttpRequest.setRequestHeader("Content-Type",
  33. "application/x-www-form-urlencoded");
  34. //POST方式发送数据
  35. xmlHttpRequest.send("username=" + userName);
  36. //4.发送数据，开始和服务器端进行交互
  37. //同步方式下，send这句话会在服务器段数据回来后才执行完
  38. //异步方式下，send这句话会立即完成执行
  39. //xmlHttpRequest.send(null);
  40. }
  41. //回调函数
  42. function callback() {
  43. //alert(xmlHttpRequest.readyState);
  44. //5。接收响应数据
  45. //判断对象的状态是交互完成
  46. if (xmlHttpRequest.readyState == 4) {
  47. //判断http的交互是否成功
  48. if (xmlHttpRequest.status == 200) {
  49. //获取服务器器端返回的数据
  50. //获取服务器段输出的纯文本数据
  51. var responseText = xmlHttpRequest.responseText;
  52. //将数据显示在页面上
  53. //通过dom的方式找到div标签所对应的元素节点
  54. var divNode = document.getElementById("result");
  55. //设置元素节点中的html内容
  56. divNode.innerHTML = responseText;
  57. } else {
  58. alert("出错了！！！");
  59. }
  60. }
  61. }
  62. //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
  63. function createXMLHTTPRequest() {
  64. //1.创建XMLHttpRequest对象
  65. //这是XMLHttpReuquest对象无部使用中最复杂的一步
  66. //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
  67. if (window.XMLHttpRequest) {
  68. //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
  69. xmlHttpRequest = new XMLHttpRequest();
  70. //针对某些特定版本的mozillar浏览器的BUG进行修正
  71. if (xmlHttpRequest.overrideMimeType) {
  72. xmlHttpRequest.overrideMimeType("text/xml");
  73. }
  74. } else if (window.ActiveXObject) {
  75. //针对IE6，IE5.5，IE5
  76. //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
  77. //排在前面的版本较新
  78. var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  79. for ( var i = 0; i < activexName.length; i++) {
  80. try {
  81. //取出一个控件名进行创建，如果创建成功就终止循环
  82. //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
  83. xmlHttpRequest = new ActiveXObject(activexName[i]);
  84. break;
  85. } catch (e) {
  86. }
  87. }
  88. }
  89. //确认XMLHTtpRequest对象是否创建成功
  90. if (!xmlHttpRequest) {
  91. alert("XMLHttpRequest对象创建失败!!");
  92. return false;
  93. } else {
  94. //0 - 本地响应成功
  95. //alert(xmlhttp.readyState);
  96. return true;
  97. }
  98. }
  99. </script>
  100. </head>
  101. <body>
  102. 请输入要验证的用户名字(输入admin试试)：<br/>
  103. <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
  104. <div id="result"></div>
  105. </body>
  106. </html>

和servlet交互的，OriginalityAjaxAction.java代码如下：

Java代码  

  1. package web.action;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. //对原始的ajax页面请求的控制器
  9. public class OriginalityAjaxAction extends HttpServlet {
  10. private static final long serialVersionUID = 1978049925174268801L;
  11. public void doGet(HttpServletRequest request, HttpServletResponse response)
  12. throws ServletException, IOException {
  13. this.doPost(request, response);
  14. }
  15. public void doPost(HttpServletRequest request, HttpServletResponse response)
  16. throws ServletException, IOException {
  17. request.setCharacterEncoding("UTF-8");
  18. String username = request.getParameter("username");
  19. response.setCharacterEncoding("UTF-8");
  20. PrintWriter out = response.getWriter();
  21. //将数据返回给页面
  22. if(username.equals("admin")){
  23. out.print("用户：[admin]已经被使用了");
  24. }else{
  25. out.print("用户：[" + username + "]可以使用");
  26. }
  27. }
  28. }

web.xml的servlet配置如下：

Xml代码  

  1. <servlet>
  2. <servlet-name>OriginalityAjaxAction</servlet-name>
  3. <servlet-class>web.action.OriginalityAjaxAction</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>OriginalityAjaxAction</servlet-name>
  7. <url-pattern>/OriginalityAjaxAction</url-pattern>
  8. </servlet-mapping>

以上简单的页面和servlet交互，返回一个字符串结果。

下面进行扩展，解析servlet返回的xml数据，为了保证代码的完整性，下面列出完整代码：

originalityAjaxXml.html

Html代码  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>最原始的ajax解析xml数据写法</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  9. <script type="text/javascript">
  10. //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
  11. var xmlHttpRequest;
  12. //读取后台xml数据的方法
  13. function readxml() {
  14. var success = createXMLHTTPRequest();
  15. if (!success) {
  16. return;
  17. }
  18. //2.注册回调函数
  19. //注册回调函数时，之需要函数名，不要加括号
  20. //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
  21. xmlHttpRequest.onreadystatechange = callback;
  22. //3。设置连接信息
  23. //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
  24. //第二个参数表示请求的url地址，get方式请求的参数也在url中
  25. //第三个参数表示采用异步还是同步方式交互，true表示异步
  26. //POST方式请求的代码
  27. xmlHttpRequest.open("POST", "OriginalityAjaxXmlAction", true);
  28. //POST方式需要自己设置http的请求头
  29. xmlHttpRequest.setRequestHeader("Content-Type",
  30. "application/x-www-form-urlencoded");
  31. //POST方式发送数据
  32. //4.发送数据，开始和服务器端进行交互
  33. //同步方式下，send这句话会在服务器段数据回来后才执行完
  34. //异步方式下，send这句话会立即完成执行
  35. xmlHttpRequest.send(null);
  36. }
  37. //回调函数
  38. function callback() {
  39. //5。接收响应数据
  40. //判断对象的状态是交互完成
  41. if (xmlHttpRequest.readyState == 4) {
  42. //判断http的交互是否成功
  43. if (xmlHttpRequest.status == 200) {
  44. //获取服务器器端返回的数据
  45. //获取服务器段输出的纯文本数据
  46. var rootNode = xmlHttpRequest.responseXML;;
  47. //利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
  48. var productNodes = rootNode.getElementsByTagName("product");
  49. //将获取到的内容解析成表格显示
  50. for(var i=0;i<productNodes.length;i++){//创建行数
  51. var product = document.createElement("TR");
  52. //每行8的td标签
  53. var name = document.createElement("TD");
  54. name.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("name") [0].firstChild.nodeValue));//给name赋值
  55. var description = document.createElement("TD");
  56. description.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("description")[0].firstChild.nodeValue));
  57. var price = document.createElement("TD");
  58. price.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("price")[0].firstChild.nodeValue));
  59. var image = document.createElement("TD");
  60. image.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("image")[0].firstChild.nodeValue));
  61. var series = document.createElement("TD");
  62. series.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("series")[0].firstChild.nodeValue));
  63. var triband = document.createElement("TD");
  64. triband.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("triband")[0].firstChild.nodeValue));
  65. var camera = document.createElement("TD");
  66. camera.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("camera")[0].firstChild.nodeValue));
  67. var video = document.createElement("TD");
  68. video.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("video")[0].firstChild.nodeValue));
  69. //将所有的td依附到tr上去
  70. product.appendChild(name);
  71. product.appendChild(description);
  72. product.appendChild(price);
  73. product.appendChild(image);
  74. product.appendChild(series);
  75. product.appendChild(triband);
  76. product.appendChild(camera);
  77. product.appendChild(video);
  78. document.getElementById("productBody").appendChild(product);
  79. }
  80. } else {
  81. alert("出错了！！！");
  82. }
  83. }
  84. }
  85. //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
  86. function createXMLHTTPRequest() {
  87. //1.创建XMLHttpRequest对象
  88. //这是XMLHttpReuquest对象无部使用中最复杂的一步
  89. //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
  90. if (window.XMLHttpRequest) {
  91. //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
  92. xmlHttpRequest = new XMLHttpRequest();
  93. //针对某些特定版本的mozillar浏览器的BUG进行修正
  94. if (xmlHttpRequest.overrideMimeType) {
  95. xmlHttpRequest.overrideMimeType("text/xml");
  96. }
  97. } else if (window.ActiveXObject) {
  98. //针对IE6，IE5.5，IE5
  99. //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
  100. //排在前面的版本较新
  101. var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  102. for ( var i = 0; i < activexName.length; i++) {
  103. try {
  104. //取出一个控件名进行创建，如果创建成功就终止循环
  105. //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
  106. xmlHttpRequest = new ActiveXObject(activexName[i]);
  107. break;
  108. } catch (e) {
  109. }
  110. }
  111. }
  112. //确认XMLHTtpRequest对象是否创建成功
  113. if (!xmlHttpRequest) {
  114. alert("XMLHttpRequest对象创建失败!!");
  115. return false;
  116. } else {
  117. //0 - 本地响应成功
  118. //alert(xmlhttp.readyState);
  119. return true;
  120. }
  121. }
  122. </script>
  123. </head>
  124. <body>
  125. 读取服务器的xml数据:
  126. <input type="button" value="读取" onClick="readxml()"/><br/>
  127. 解析xml数据为表格的形式：<br/>
  128. <table border="1" id="productTable">
  129. <tbody id="productBody">
  130. <tr>
  131. <td>name</td>
  132. <td>description</td>
  133. <td>price</td>
  134. <td>image</td>
  135. <td>series</td>
  136. <td>triband</td>
  137. <td>camera</td>
  138. <td>video</td>
  139. </tr>
  140. </tbody>
  141. </table>
  142. </body>
  143. </html>

后台的catalog.xml数据代码：

Xml代码  

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <catalog>
  3. <product productId="1">
  4. <name>Nokia 6010中文的哈</name>
  5. <description>Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more</description>
  6. <price>99.99</price>
  7. <image>Nokia_6010.gif</image>
  8. <series>6000</series>
  9. <triband>false</triband>
  10. <camera>false</camera>
  11. <video>false</video>
  12. <highlight1>MMS</highlight1>
  13. <highlight2>Large color display</highlight2>
  14. <qtyInStock>2</qtyInStock>
  15. </product>
  16. <product productId="2">
  17. <name>Nokia 3100 Blue</name>
  18. <description>Light up the night with a glow-in-the-dark cover - when it‘s charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-onâ„¢ gaming cover*, you‘ll get luminescent light effects in time to the gaming action.</description>
  19. <price>139</price>
  20. <image>Nokia_3100_blue.gif</image>
  21. <series>3000</series>
  22. <triband>true</triband>
  23. <camera>false</camera>
  24. <video>false</video>
  25. <highlight1>Glow-in-the-dark</highlight1>
  26. <highlight2>Flashing lights</highlight2>
  27. <qtyInStock>1</qtyInStock>
  28. </product>
  29. <product productId="3">
  30. <name>Nokia 3100 Pink</name>
  31. <description>Light up the night with a glow-in-the-dark cover - when it‘s charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-onâ„¢ gaming cover*, you‘ll get luminescent light effects in time to the gaming action.</description>
  32. <price>139</price>
  33. <image>Nokia_3100_pink.gif</image>
  34. <series>3000</series>
  35. <triband>true</triband>
  36. <camera>false</camera>
  37. <video>false</video>
  38. <highlight1>Glow-in-the-dark</highlight1>
  39. <highlight2>Flashing lights</highlight2>
  40. <qtyInStock>7</qtyInStock>
  41. </product>
  42. <product productId="4">
  43. <name>Nokia 3120</name>
  44. <description>Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
  45. <price>159.99</price>
  46. <image>Nokia_3120.gif</image>
  47. <series>3000</series>
  48. <triband>true</triband>
  49. <camera>false</camera>
  50. <video>false</video>
  51. <highlight1>Multimedia messaging</highlight1>
  52. <highlight2>Animated screensavers</highlight2>
  53. <qtyInStock>15</qtyInStock>
  54. </product>
  55. <product productId="5">
  56. <name>Nokia 3220</name>
  57. <description>The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
  58. <price>159.99</price>
  59. <image>Nokia_3220.gif</image>
  60. <series>3000</series>
  61. <triband>false</triband>
  62. <camera>true</camera>
  63. <video>false</video>
  64. <highlight1>MIDI tones</highlight1>
  65. <highlight2>Cut-out covers</highlight2>
  66. <qtyInStock>5</qtyInStock>
  67. </product>
  68. </catalog>

OriginalityAjaxXmlAction.java代码如下：

Java代码  

  1. package web.action;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import org.dom4j.Document;
  10. import org.dom4j.DocumentException;
  11. import org.dom4j.io.SAXReader;
  12. //对原始的ajax页面请求的控制器
  13. //返回xml格式的数据
  14. public class OriginalityAjaxXmlAction extends HttpServlet {
  15. private static final long serialVersionUID = 1978049925174268801L;
  16. public void doGet(HttpServletRequest request, HttpServletResponse response)
  17. throws ServletException, IOException {
  18. this.doPost(request, response);
  19. }
  20. public void doPost(HttpServletRequest request, HttpServletResponse response)
  21. throws ServletException, IOException {
  22. request.setCharacterEncoding("UTF-8");
  23. response.setContentType("text/xml;charset=utf-8");
  24. response.setHeader("Cache-Control", "no-cache");
  25. String path  = request.getSession().getServletContext().getRealPath("/") + "catalog.xml";
  26. PrintWriter out = response.getWriter();
  27. SAXReader saxReader = new SAXReader();
  28. Document document = null;
  29. try {
  30. document = saxReader.read(new File(path));
  31. } catch (DocumentException e) {
  32. e.printStackTrace();
  33. }
  34. String xml = document.asXML();
  35. System.out.println(xml);
  36. out.print(xml);
  37. }
  38. }
时间： 2024-11-08 23:45:46

比较完整的原始ajax写法的相关文章

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

完整的 AJAX 写法(支持多浏览器)

代码如下: <script type="text/javascript"> var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,IE8,FireFox,其它 xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { //针对某些特定版本的mozillar浏览器的BUG进行修

原生ajax写法 （ajax状态值）

1.ie5 .6 使用ActiveX (window.ActiveXObject) 版本:  MSXML2.XmlHttp.6.0 MSXML2.XmlHttp.3.0 2.其他主流浏览器: 内置构造函数 (window.XMLHttpRequest) 创建适用于所有浏览器的对象 function createXmlHttpRequest()      {           if(window.XMLHttpRequest)           {                var oHt

原生Ajax写法

//创建XMLHttp对象 function CreateXmlHttp() { //非IE浏览器创建XmlHttpRequest对象 if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return null; } //IE浏览器创建XmlHttpRequest对象 if (window.ActiveXObject) { try { return new ActiveXObject("Microsoft.XMLH

加载loading的ajax写法

ajaxStart()与ajaxStop():当Ajax请求开始时,会触发ajaxStart()方法的回调函数.当Ajax请求结束时,会触发ajaxStop()方法的回调函数.这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们. 有时候页面需要加载一些图片,可能速度回比较慢,如果在加载过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信息. 此时,我们就需要为网页添加一个提示信息,常用的提示信息是“加载中...”,

JavaWeb网上图书商城完整项目--day02-6.ajax校验功能之页面实现

1 .现在我们要在regist.js中实现ajax的功能,使用用户名到后台查询是否注册,邮箱是否到后台注册,验证码是否正确的功能 我们来看regist.js的代码 //该函数在html文档加载完成之后会调用 $(function() { /* * 变量所有的错误信息,调用一个方法来决定是否显示错误信息 * */ $(".errorClass").each(function() { showError($(this));//$(this)表示当前遍历的对象 }); //切换注册按钮的图片

ajax写法

$.ajax({ type:'post', url:'<%=path%>/login', cache:false, dataType:'json', success:function(data){ }, error:function(){ alert("系统错误"); } });

原生的AJAX写法，可以直接复制过来套用

方法一: function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 var xmlHttpRequest; if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlHttpRequest = new XMLHttpR

WebAPI AJAX写法

1. $(function () { var dataJSON = {Id:1,Title:'标题测试'}; console.log(JSON.stringify(dataJSON)); $.ajax({ url: "http://localhost:53620/api/values", type: "Post", data: JSON.stringify(dataJSON), contentType: 'application/json; charset=utf-