上一次写的这个js，实现了用javascript中的jquery来调取ajax内核来实现与服务器端的数据联通：
//定义用户名校验的方法 function verify(){ //1.获取文本框当中的内容 //document.getElementById("username"); dom的方式 //jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点 //jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法 var jqueryObj=$("#username"); var userName=jqueryObj.val(); //alert("文本框的值是:"+userName); //2.将文本中的数据发送给服务器的servlet //用javascript的话，写向服务器发数据的代码很长很痛苦，使用jquery一句话就够了 //详情查看Jquery的API帮助文档的Ajax部分 //使用jauery的XMLHTTPrequest对象get请求的封装 //get请求第一个参数是后台服务类的名称，参数二是post方式加的参数(这里用get，写成null) //第三个参数是回调函数(做异步) $.get("AjaxServer?name="+userName,null,callback); } //回调函数 function callback(data){ //3.接受服务器端返回的数据 //alert(data); //4.将服务器返回的数据动态的显示在页面上 //找到保存信息的节点 var resultObj=$("#result"); //往这个节点填充服务器返回的值 //div节点中的内容就会被改变 resultObj.html(data); }
那么，jquery内部是如何实现与服务器端的交互呢？也就是不用jquery，自己如何使用javascript本身来实现ajax的效果呢?
原理就是利用javascript的XMLHttprequest对象来实现ajax，俗称“五大步”：
我们重新写一个不引用jquery的js文件：
//用户名校验的方法 //这个方法使用AMLHttpRequest对象来进行AJAX的异步数据交互 function verify(){ //1.使用最基本的DOM_API来获取文本框中的值 //document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML //页面中的一个标签，.value可以获取一个元素节点的value属性值 // var username=document.getElementById("username").value; //2.创建XMLHttpRequest对象 var xmlhttp; //这是XMLHttpRequest对象五步使用中最复杂的一步 //这是由于各种浏览器兼容问题造成的，要使用各种库来屏蔽掉这种差异 //下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码 if(window.XMLHttpRequest){ //针对FireFox、Mozillar、Opera、Safari、IE7、IE8 xmlhttp=new XMLHttpRequest(); //修复类似Mozillar浏览器的bug if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //所有的IE中window.ActiveXObject条件都成立 //针对IE6、IE5.5、IE5(现在没人用了，可以把这条if分支删除) //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中 //排在前面的版本最新 var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<activeName.length;i++){ try{ //获取一个控件名进行创建，如果创建成功就终止循环 //如果创建失败，会抛出异常，然后就可以继续循环，继续尝试创建 xmlhttp=new ActiveXObject(activeName[i]); break; }catch(e){ //仍然不能创建，抛出异常后，给出友好提示 } } } //确认XMLHttpRequest对象创建成功 if(!xmlhttp){ alert("XMLHttpRequest对象创建失败！！"); }else{ alert(xmlhttp); } }
