对比javascript与jquery对ajax的实现

来源：互联网发布：ios软件更新编辑：程序博客网时间：2024/05/24 02:23

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);        }    }