ajax学习 js原生

php工程师肯定对ajax技术不会陌生。简单的说，ajax可以网页在不全部刷新的情况下，从服务器拿到数据，并且借助js可以直接改变网页，是一种很实用的技术。我一般常用的是jQuery封装好的ajax。虽然原生ajax的缺点很多，不过，先对原生js的ajax学习一下是很有必要的。下面结合一个简单的例子进行讲解。

1.兼容性

首先就要考虑到浏览器的不同，大部分浏览器是通过XMLHttpRequest对象来实现ajax的，而IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest。兼容工作一定要做好。

var xmlHttpReq = null;	//声明一个空对象用来装入XMLHttpRequest
	if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
		xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
		xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
	}

2.通过open方法取数据

在实例化成功之后就可以通过open方法提取数据了

if(xmlHttpReq != null){	//如果对象实例化成功 
		xmlHttpReq.open("GET","test.jsp",true);	//调用open()方法并采用异步方式
		xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
		xmlHttpReq.send(null);	//因为使用get方式提交，所以可以使用null参调用
	}

注意到open方法里面的第三个参数true，这是代表异步ajax。异步ajax的意思是js的其他方法不会等这个ajax运行完成之后再运行，而是和ajax同一时间运行的。ajax一般情况下都是用异步。在某些特殊情况下，比如必须要先拿到这次ajax提取的数据才能运行其他js方法的时候，就可以考虑同步ajax了。

3.将ajax取到的数据显示在界面上

function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
		if(xmlHttpReq.readyState == 4){
				if(xmlHttpReq.status == 200){
					//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
					document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
				}
		}
	}

注意，readystate代表的ajax的状态，4表示取值完成。xmlhttpreq.status 代表的是http的状态 200为正常。

这样，一个简单的原生ajax就写好了，下次讲jQuery下的ajax，$.ajax() 比原生好用多了