js-ajax的简单实例

刚接触ajax,需要把原理性的东西先弄懂,然后再去使用封装比较高级的js框架,才能更加得心应手。

html代码:

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

 

 

ajax的核心重要组件XMLHttpRequest

XmlHttp是什么?

      最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

XmlHttp对象的属性:
技术分享
XmlHttp对象的方法:
技术分享

如何发送一个简单的请求?
      最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
      ● 为得到XmlHttpRequest对象实例的一个引用,可以创建一个新的XmlHttpRequest的实例。
      ● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
         onreadystatechange属性设置为指向JavaScript的指针.
      ● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
      ● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。