ajax兼容源代码

本案例是ajax原始写法，没有使用框架，并使用java服务器响应返回，代码如下：

originalityAjax.html代码如下：

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

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

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

 web.xml的servlet配置如下：

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

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

相关文章
liferay portal集成extjs框架 导致样式冲突不兼容的解决方法javascript调用iframe父子页面的兼容方法javascript添加删除事件监听兼容的工具代码javascript图片上传前生成预览兼容所有浏览器ajax兼容源代码ajax创建xmlhttprequest对象ajax的作用ajax使用流程ajax教程ajax介绍ajax加载json案例ajax响应状态readystateajax回调responsetextajax发送请求sendphp 文本处理 正则表达式 兼容 perl php openssl 函数 输出一个 pkcs#12 兼容的证书存储文件php openssl 函数 将 pkcs#12 兼容证书存储文件导出到变量php yaf request http 是否为ajax请求javascript ajax 原生兼容写法javascript代码复制内容到剪切板 兼容IE,谷歌chrome,safari浏览器
关注编程学问公众号