【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