对比javascript与jquery对ajax的实现
2012-04-19 11:05
351 查看
jquery是对javascript很好的封装，而且很轻量级，可以近似的将其称其为框架，下面就来对比javascript与jquery对ajax的实现，以突出jquery对其封装后，在实现方便的简易性，而且不仅如此，用jquery代替javascript来实现一些功能对于浏览器的兼容性也会带来意想不到的好处；
首先也一个简单的页面端：
页面端定义了一个单击事件onclick = "verify()";即点击按钮后调用事件方法verify()；
这里我们首先用javascript来实现整个ajax
代码中已经包含了详细的注释了，我这里就不进行解释了；
下面采用jquery来实现上面的代码：
大家发现了吧，用jquery来实现，出去注释以后代码不足10行，可见jquey已经帮我们做了大量的基础工作了
为了将整个过程展示下，我现在将后台的操作类AjaxServer.java也进行实现，我这里为了简单起见就不使用框架了，直接用servlet进行实现：
大家在上面的代码时可以看到这里对缓存的处理，其实我们在时间应用中很少会这样处理，这里我只是为了就这个问题而写了上面的代码，我们一般情况下是不希望浏览器
去读取缓存的，所有我们为了骗过浏览器，就会在Ajax请求的地址中加上一个参数时间戳，这样就能保证每次请求的地址都不一样的了；
具体的使用大家可以去看：/article/4765588.html
还有就是基于Ajax的两种交互方式：/article/4765589.html
我们这边实现的是基于HTML交互的；
首先也一个简单的页面端：
<!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请求的地址中加上一个参数时间戳，这样就能保证每次请求的地址都不一样的了；
具体的使用大家可以去看：/article/4765588.html
还有就是基于Ajax的两种交互方式：/article/4765589.html
我们这边实现的是基于HTML交互的；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对比javascript与jquery对ajax的实现
- 原生 JavaScript 代码和Jquery实现对比
- Ajax-JavaScript&JQuery实现方式
- 详解原生JavaScript实现jQuery中AJAX处理的方法
- 黑马程序员_学习日记73_725ASP.NET（禁用Cookie、ASP.NET中的重要对象、JavaScript实现AJAX、两种Json格式的序列化方法、JQuery中实现ajax的五种方法）
- 传统的JavaScript实现的Ajax 与 JQuery封装的Ajax
- javascript和jQuery实现网页实时聊天的ajax长轮询
- Ajax，jQuery实现页面无跳转与对比
- javascript和jQuery实现网页实时聊天的ajax长轮询
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- 【JAVASCRIPT】jquery实现ajax无刷新评论
- 有了html页面，进行二次显示，通过html、JavaScript、jQuery的ajax三种技术，我可以实现任何界面效果
- [Javascript][jQuery]jQuery + json 实现的简易Ajax调用
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- 原生javascript 实现jQuery代码效果对比
- JQuery与Ajax常用代码实现对比
- 不用JQuery，原生Javascript实现Ajax功能及相关知识点
- 普通javascript的，jquery的，Extjs的ajax实现与比较