ajax原理的简单实现

最新推荐文章于 2022-05-03 10:25:45 发布

longflang

最新推荐文章于 2022-05-03 10:25:45 发布

阅读量99

点赞数

分类专栏： ajax 文章标签： Ajax IE Microsoft 浏览器

ajax 专栏收录该内容

3 篇文章

订阅专栏

Ajax的主要作用就是不刷新页面更新页面的内容，也就是异步传输。用来显示Ajax响应的div。下面就是一段使用Ajax的简单示例。

function ajaxRequest(){
	var req = false;
	if(window.XMLHttpRequest) {
		var req = new window.XMLHttpRequest();
	} else if (window.ActiveXObject) {
		var req = new window.ActiveXObject('Microsoft.XMLHTTP');
	}
	if(!req) return false;
	req.onreadystatechange = callback;
	req.open('GET','ajax/ajaxTest.txt',true);
	req.setRequestHeader('Accept-Language','zh-cn');
	req.send(null);
	function callback(){
		switch (req.readyState) {
			case 1:
				//alert('Loading');
				break;
			case 2:
				//alert('loaded');
				break;
			case 3:
				//alert('Interactive');
				break;
			case 4:
				if (req.status && req.status == 200){
					var str = req.responseText;
					document.getElementById('test').innerHTML = str;
				}
				break;
		}	
	}
}
function addEventSimple(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt,fn,false);
	}else if(obj.attachEvent){
		obj.attachEvent('on'+evt,fn);
	}
}
addEventSimple(document,'dblclick',ajaxRequest);

代码的最后部分给document添加一个双击的响应函数，当文档被双击的时候就调用ajaxRequest函数，也就是负责发送Ajax请求的函数。

ajaxRequest函数中，第一步就是创建一个XMLHttpRequest对象，代码如下，由于IE和其它浏览器支持的方式不太一样，所以会试图使用使用两个方法来创建这个对象。

	var req = false;
	if(window.XMLHttpRequest) {
		var req = new window.XMLHttpRequest();
	} else if (window.ActiveXObject) {
		var req = new window.ActiveXObject('Microsoft.XMLHTTP');
	}
	if(!req) return false;

第二步是设置XMLHttpRequest对象的状态变化响应函数。

	req.onreadystatechange = callback;

下面是发送Ajax请求了。

	req.open('GET','ajax/ajaxTest.txt',true);
	req.send(null);

最后就可以编写状态变化响应函数了：

function callback(){
 switch (req.readyState) {
  case 1:
  //alert('Loading');
  break;
  case 2:
  //alert('loaded');
  break;
  case 3:
  //alert('Interactive');
  break;
  case 4:
   if (req.status && req.status == 200){
    var str = req.responseText;
    document.getElementById('test').innerHTML = str;
   }
   break;
 }	
}

函数的作用就是将返回的字符串添加到页面开头id为test的div内。双击这个文档就可以看到效果。