CSDN博客

img unicorn00

JQuery入门实例

发表于2008/9/30 20:02:00  1589人阅读

分类: Ajax

  1. 1.此实例主要通过JQuery将提交到servlet,处理后将数据返回

AjaxServlet.java

  1. import javax.servlet.http.HttpServlet;
  2. import javax.servlet.http.HttpServletRequest;
  3. import javax.servlet.http.HttpServletResponse;
  4. import javax.servlet.ServletException;
  5. import java.io.IOException;
  6. import java.io.PrintWriter;
  7. public class AjaxServlet extends HttpServlet{
  8.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9.        doGet(request, response);    
  10.     }
  11.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  12.         try{
  13.                response.setContentType("text/html;charset=GB2312");
  14.                PrintWriter out=response.getWriter();
  15.                String old = request.getParameter("name");
  16.                if(old == null || old.length()==0){
  17.                    out.println("用户名不能为空!");
  18.                }else{
  19.                    String name = old;
  20.                    if(name.equals("unicorn")){
  21.                        //4.和传统应用不同之处,这步需要将用户感兴趣的数据返回,而不是将一个新的页面发送给用户
  22.                        //写法没有变化,本质发生了改变
  23.                        out.println("用户名:"+name+"已经存在");
  24.                    }else{
  25.                        out.println("用户名:"+name+"尚未存在");
  26.                    }
  27.                }
  28.            }catch(Exception e){
  29.                e.printStackTrace();
  30.            }
  31.     }
  32. }
index.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.   <title>ajax用户名校验实例</title>
  6.     <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
  7.     <script type="text/javascript" src="js/unicorn.js"></script>
  8. </head>
  9. <body>
  10.     请输入用户名:<br/>
  11.     <!-- ajax方式下不需要用form来提交数据-->
  12.     <!-- ajax方式不需要name属性,但是要有id属性-->
  13.     <input type="text" id="userName"/>
  14.     <input type="button" value="校验" onclick="verify()" />
  15.     <!-- 此div用于存放服务器返回信息,初始为空 -->
  16.     <!-- id属性定义为了用dom方式找到某节点,进行操作-->
  17. <div id="result"></div>
  18. </body>
  19. </html>

unicorn.js

  1. //JQuery方式传送数据
  2. function verify(){
  3.     $.get("AjaxServer?name="+$("#userName").val(),null,function (data){
  4.         $("#result").html(data);
  5.     });
  6. }
  7. //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交换
  8. var xmlhttp;
  9. function verify1(){
  10.     //1.使用dom的方式获取文本框中的值
  11.     alert("haha");
  12.     var userName = document.getElementById("userName").value;
  13.     //2.创建XMLHTTPRequest对象
  14.     //这是XMLHTTPRequest对象使用中最复杂的一步
  15.     //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
  16.     if(window.XmlHttpRequest){
  17.         //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
  18.         xmlhttp = new XMLHttpRequest();
  19.         //针对某些特定版本的mozillar浏览器到BUG进行修正
  20.         if(xmlhttp.overrideMimeType){
  21.             xmlhttp.overrideMimeType("text/xml");
  22.         }
  23.     }else if(window.ActiveXObject){
  24.         //针对IE6,IE5.5,IE5
  25.         //两个可以用于创建XMLHTTPRequest对象的控件名,保存在一个js的数组中
  26.         //排在前面的版本较新
  27.         var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  28.         for(var i = 0;i<activexName.length;i++){
  29.             try{
  30.                 //取出一个控件名进行创建,如果创建成功就终止循环
  31.                 //如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
  32.                 xmlhttp = new ActiveXObject(activexName[i]);
  33.                 break;
  34.             }catch(e){
  35.                 
  36.             }
  37.         }
  38.         
  39.     }
  40.     //确认XMLHTTPRequst对象创建成功
  41.     if(!xmlhttp){
  42.         alert("XMLHttpRequest对象创建失败!!");
  43.         return;
  44.     }else{
  45.         alert(xmlhttp);
  46.     }
  47.     //2.注册回调函数
  48.     //注册回调函数时,只需要函数名,不要加括号
  49.     //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
  50.     xmlhttp.onreadystatechange = callback;
  51.     //3.设置连接信息
  52.     //第一个参数表示http的请求方式,支持所有的http请求方式,主要是get和post
  53.     //第二个参数表示请求的url地址,get方式请求的参数也在url中
  54.     //第三个参数表示采用异步还是同步方式交互,true表示异步
  55.     xmlhttp.open("GET","AjaxServer?name="+userName,true);
  56.     //4.发送数据,开始和服务器端进行交互
  57.     //同步方式下,send这句话会在服务器端数据回来后才执行完
  58.     //异步方式下,send这句话会立即完成执行
  59.     xmlhttp.send(null);
  60. }
  61. //回调函数
  62. function callback(){
  63.     //判断对象的状态是否交互完成
  64.     if(xmlhttp.readyState==4){
  65.      //判断http的交互是否成功
  66.         if(xmlhttp.status==200){
  67.             //获取服务器端返回的数据
  68.             //获取服务器端输出的纯文本数据
  69.             var responseText = xmlhttp.responseText;
  70.             //将数据显示在页面上
  71.             var divNode = document.getElementById("result");
  72.             //设置元素节点中的html内容
  73.             divNode.innerHTML = responseText;
  74.         }
  75.     }
  76.     
  77. }

以上是传智的部分笔记

阅读全文
0 0

相关文章推荐

img
取 消
img