码迷，mamicode.com
首页 > Web开发 > 详细

js-ajax的简单实例

时间：2015-04-28 20:52:09      阅读：237      评论：0      收藏：0      [点我收藏+]

标签：

刚接触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()方法将请求发送到目标资源.

js-ajax的简单实例

标签：

原文地址：http://www.cnblogs.com/excited/p/4463747.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！