好贷网好贷款

jquery中的ajax(异步xml和javascript通信)

发布时间:2016-12-5 4:35:31 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jquery中的ajax(异步xml和javascript通信)",主要涉及到jquery中的ajax(异步xml和javascript通信)方面的内容,对于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

上一篇:iPhone/Mac Objective-C 内存管理教程和原理剖析
下一篇:JQuery应用案例--自动增加行

相关文章

相关评论