jquery中的ajax（异步xml和javascript通信）

jquery是对javascript的一种封装，把程序员从繁琐的javascript代码中解救了一把。

jquery有2种常用用法，一种是ajax，一种是界面特效。

      jquery中ajax是通过xmlhttprequest对象与服务端进行通信，服务端通常为servlet，由于struts2的action是返回页面，所以不能做到不刷新页面而更新数据。servlet则可以返回文本，xml，json等数据格式。所以浏览器中的xmlhttprequest对象和服务端的servlet进行数据交换从而达到不刷新页面而更新数据的效果。

 

     jquery提供了ajax（），get（），post（）方法与服务端进行交互数据，如果要用javascript实现这些效果，则代码比较复杂。

例如：用jquery的post（）方法与服务端进行数据的异步交互。（注意：在jquery中，$是jquery的别名，当其它js文件中有$别名时，注意冲突的解决。）

 

//this is the valify code
function valify(){
 //alert("ok");
 //获取文本框中的内容
 //document.getElementById("userName");获取dom节点
 /*jquery查找节点的方式如下；参数由#+id
  * 得到的是，一个jquery对象，它封装了dom节点对象
  */
 var jqueryObj=$("#userName")
 var userName=jqueryObj.val();
   //将文本框中的内容发给服务端servlet
 $.get("ajaxServer?userName="+userName,null,callback);
}
//回调函数
function callback(data){
 //接收服务端返回的数据
 var getRespObj=$("#getResp");
 //将接收到内容显示在页面上
 getRespObj.html(data);
}

 

上面代码的简写：

function valify(){
   $.get("ajaxServer?userName="+$("#userName").val(),null,function(data){$("#getResp").html(data);});
   $.get("ajaxServer?passwd="+$("#passwd").val(),null,function(data){$("#getResp").html(data);});
}

自己用javascript代码实现异步通信代码如下：

//用户校验的方法
//这个方法使用xmlhttprequest对象进行Ajax异步数据交互
var xmlhttp=null;
function valify(){
 //使用dom方式获得对应元素的值
 var userName=document.getElementById("userName").value;
 //1.创建xmlhttprequest对象
 //这是使用xhr最复杂的一步
 //需要针对不同的浏览器写不同的代码
 
 if(window.XMLHttpRequest){
  xmlhttp=new XMLHttpRequest();
  //针对某些特定的浏览器进行修正
  if(xmlhttp.overrideMimeType){
   xmlhttp.overrideMimeType("text/xml");
  }
 }else if(window.ActiveXObject){
  //针对ie5，ie5.5，ie6
  var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for(var i=0;i<activexName.length;i++){
   try{
    xmlhttp=new ActiveXObject(activexName[i]);
    break;
   }catch (e) {}
  }
 }
//确认xmlhttp对象创建成功
 if(!xmlhttp){
  alert("xmlhttprequest 创建失败！");
 }else{
  alert(xmlhttp);
 }
 
 //2.注册回调函数
 //注册回调函数时，只要函数名，不要括号，如果加括号就是调用函数，把返回结果进行注册。
     xmlhttp.onreadystatechange=callback;
     //设置连接信息
     /**
      * 第一个参数表示请求方式，支持所有的http请求方式，主要用get和post
      * 第二个参数表示请求的url地址，get方式的请求参数也在其中
      * 第三个参数表示采用异步还是同步方式，true表示异步
      */
     xmlhttp.open("GET", "ajaxServer?userName="+userName, true);
    
     //发送数据，开始和服务器交互
     /**
      * 同步方式执行到这儿需要等待，而异步交互执行到这儿不需要等待。
      */
     xmlhttp.send(null);
}
function callback(){
 //判断与服务器是否交互完成
     if(xmlhttp.readyState==4){
      //判断与服务器是否交互成功
      if(xmlhttp.status==200){
    //获取服务器端返回的数据
    //获取服务器端的纯文本数据
       var resText=xmlhttp.responseText;
       var divNode=document.getElementById("getResp");
       //将数据显示在页面上。
         divNode.innerHTML=resText;
      }
    
     }
}

 

jquery也提供了许多用于做出绚丽页面的函数：

下面是myeclipse8.5下写的5个例子程序：

http://download.csdn.net/source/3027419