【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、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);
}

}

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

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