对比javascript与jquery对ajax的实现

jquery是对javascript很好的封装，而且很轻量级，可以近似的将其称其为框架，下面就来对比javascript与jquery对ajax的实现，以突出jquery对其封装后，在实现方便的简易性，而且不仅如此，用jquery代替javascript来实现一些功能对于浏览器的兼容性也会带来意想不到的好处；

首先也一个简单的页面端：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>用户名校正的ajax实例</title>
<script type="text/javascript" src="jslib/verifyown.js"></script>
</head>
<body>
      用户名校正的ajax实例,请输入用户名：<br/>

     <input type ="text" id="userName"/><span id="result"></span> <br/><div id="result"></div>

<input type="button"  value="检验" onclick="verify()"/>

</body>
</html>

页面端定义了一个单击事件onclick = "verify()";即点击按钮后调用事件方法verify()；
这里我们首先用javascript来实现整个ajax

//用户校验的方法
//这个方法将使用XMLHttpRequest对象进行AJAX的异步交互
var xmlhttp;//设定全局变量，使回调函数也能使用它
function verify(){
      //1.dom的方法获文本框中的值方法
      // document.getElementById("username")是dom获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input>
    //value可以获取一个元素节点的value属性值
    var userName=document.getElementById("userName").value
    //2.创建XMLHTTPRequest对象
    //这是XMLHTTPRequest对象使用中最复杂的一步
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
    if(window.XMLHttpRequest){
        //针对firefox Mozillor Opera Safari,IE7,IE8
        xmlhttp=new XMLHttpRequest();
        //针对某些特定版本的 Mozillor 的浏览器的bug进行修正
            if(xmlhttp.overrideMimeType){    
               xmlhttp.overrideMimeType("text/xml");
            }
    }else if(window.ActiveXObject){
       //针对IE6 IE5.5 IE5
        //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中
        //排在前面的版本较新
        var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for( var i = 0;i < activexName.length;i++){
        try{
            //取出一个创建名进行创建，如果创建成功就终止循环
            //如果创建失败，会抛出异常，然后可以继续循环，继续尝试连接
            xmlhttp=new ActiveXObject(activexName[i]);
            break;
        }catch(e){
            
        }
    }

    }
   //确认XMLHttpRequest创建成功
    if(!xmlhttp){
        alert("XMLHttpRequest创建失败！");
        return;
    }else{
        alert(xmlhttp.readyState);
    }
  //2.注册回调函数
    //该处注册函数时，只需函数名，不需加括号
    //我们需要将函数名注册，如果加上括号，就会把函数返回值注册上，这是错误的
  xmlhttp.onreadystatechange=callback;
      //3.设置连接信息
    //第一个参数表示Http的请求方式，支持所有的Http请求方式，主要使用get和post。
    //第二个参数表示请求的URL地址，get方式请求的参数也在URL中，
    //第三个参数表示采用同步还是异步，true表示采用异步
    xmlhttp.open("GET","AjaxServer?name="+userName,true);
    
    /*post方式的请求
        xmlhttp.open("POST","AJAXServer",true);
       post方式需要自己设置http的请求头
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
       xmlhttp.send("name"+username);                           */
    
   //4.发送信息，和服务器端交互
    //同步方式下，send这句话会在服务器端的数据回来后才执行完
    //异步方式下，send这句话会立即执行完
    xmlhttp.send(null);
}
function callback(){
     alert(xmlhttp.readyState); //测试  readyState 的不同时间的状态 ,
    //判断对象的状态是交互完成
    if(xmlhttp.readyState==4){
        //判断http的交互是否成功
        if(xmlhttp.status==200){ //最好不要将两个if条件写一起，因为开始readyState会有0，1，2，3的过程，此时都会调用回调函数，此是就不满足判断的条件了
           // 获取服务器端返回的数据
            //获取服务器端输出的纯文本数据
           var responseText=xmlhttp.responseText;
            //将数据显示在页面上
           // 通过dom方式找到div标签所对应的元素的节点
           var divNode=document.getElementById("result");
            //设置元素节点中html的内容
            divNode.innerHTML = responseText;

        }
    }


}

代码中已经包含了详细的注释了，我这里就不进行解释了；
下面采用jquery来实现上面的代码：

//定义用户名校正的方法
function verify(){
    //首先测试下页面的按钮按下，可以调用这个方法
    //使用javascript里的alert方法，显示个弹出提示框
   // alert("按钮被按下"); 测试是否已进到了js内


    //1获取到文本框中的内容
   // document.getElementById("username") dom的获取方法
    //jquery查找节点的方式，参数中的#加id参数值可以找到一个节点
    //jquery的方法返回的都是jquery的对象，可以在上面继续执行其他的jquery方法
    
   var jqueryObj= $("#userName")
    //获取节点的值
   var userName=jqueryObj.val();
   // alert(userName);测试是否得到username
    //2.将文本框的数据发送给服务器端的servlet
    //使用jquery的XMLHttprequest对象get请求的封装

 $.get("AjaxServer?name="+userName,null,callback);
}
//回调函数,data为服务器端返回的数据
function callback(data){
   //alert("服务器端的数据回来了");测试与服务器端的交互
     //3.接受服务器端返回的数据
  // alert(data); 测试data
    //4.将服务器端返回的数据动态的显示在页面上
  // 找到保存数据的节点
    var resultObj=$("#result");
    //动态的改变页面中div的内容
    resultObj.html(data);
   
}

大家发现了吧，用jquery来实现，出去注释以后代码不足10行，可见jquey已经帮我们做了大量的基础工作了

为了将整个过程展示下，我现在将后台的操作类AjaxServer.java也进行实现，我这里为了简单起见就不使用框架了，直接用servlet进行实现：

package com.xidian.ajax;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
public class AjaxServer extends HttpServlet {
        protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
                throws ServletException, IOException {
            try{
              httpServletResponse.setContentType("text/html;charset=utf-8"); 
              PrintWriter out= httpServletResponse.getWriter();
                
               Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用来测试缓存的；在IE下如果多次请求的地址相同，则他不会再去服务器端交互读数据，而是直接读取缓存
                  int temp=0;
                if(inte==null){
                    temp=1;
                }else{
                    temp=inte.intValue()+1;
                }
                   httpServletRequest.getSession().setAttribute("total",temp);
               //1.取参数
           String old =httpServletRequest.getParameter("name");
               // String name=new String(old.getBytes("iso8859-1"),"utf-8"); //处理中文乱码1，需和前台js文件中的encodeURI配合
               String name= URLDecoder.decode(old,"utf-8"); //处理中文乱码2
              //2.检查参数是否有问题
          if(old==null||old.length()==0){
              out.println("用户名不能为空！");
          } else{
              //String name=old;
              //3.校验操作
              if(name.equals("123")){
                    //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端
                  //写法没有改变，本质变化了
                  out.println("用户名【"+name+"】已经存在，请使用其他的用户名！,"+temp);
              } else{
                  out.println("用户名【"+name+"】未存在，您可以使用该用户名！,"+temp);
              }
          }
        }catch(Exception e){
               e.printStackTrace();
            }
        }

        protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
            throws ServletException, IOException {
           doGet(httpServletRequest,httpServletResponse);
        }
    }

大家在上面的代码时可以看到这里对缓存的处理，其实我们在时间应用中很少会这样处理，这里我只是为了就这个问题而写了上面的代码，我们一般情况下是不希望浏览器
去读取缓存的，所有我们为了骗过浏览器，就会在Ajax请求的地址中加上一个参数时间戳，这样就能保证每次请求的地址都不一样的了；

具体的使用大家可以去看：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456758.html

还有就是基于Ajax的两种交互方式：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456800.html

我们这边实现的是基于HTML交互的；

posted on 2012-04-19 11:05 发表是最好的记忆阅读(4349) 评论(0) 编辑收藏举报