ajax学习 js原生

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

1.兼容性

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

var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequestif (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() 比原生好用多了