【Ajax技术】Ajax技术回顾与XHR对象的创建

上一次写的这个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、IE8xmlhttp=new XMLHttpRequest();//修复类似Mozillar浏览器的bugif(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);}}

上面的代码实现了获取XMLHttpRequest的功能，下一篇总结我们写使用XHR对象发送和接受数据。

转载请注明出处：http://blog.csdn.net/acmman/article/details/47667067