ajax简单的异步交互,可以先从get方式开始说起
那么创建一个Ajax与服务器端的异步请求,需要完成三个
步骤1、XMLHttpRequest对象的创建
if(window.XMLHttpRequest){//针对IE7以上 以及标准浏览器 var xhr=new XMLHttoRequest(); }else if(window.ActiveXObject){ var xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
步骤2、注册回调函数
xhr.onreadystatechange=callback; 或者xhr.onreadystatechange=function(){ //codes here }
步骤3、设置连接信息
xhr.open("GET",url,true)//其中true表示为异步交互
步骤4、发送数据
xhr.send(null);
ps:同步方式下:send会在服务器返回数据后才执行
异步方式下:send会立即完成执行
function callback(){//注册回调函数 //判断对象的状态是否交互完成 if(xhr.readyState==4){ //判断http请求是否成功 if(xhr.status==200){ //获取服务器端返回的数据 var response=xhr.responseText; //可以显示在前台特定的地方 } } }
最后注意一个问题,也是当初测试时候遇到的问题,这种写好的代码要在服务器端环境下运行,要将写好的东西,部署在本机服务器环境下,通过localhost来访问,方可看到效果,否则会报错!
第二部分,如果是发送ajax的post异步请求
xmlHttp.onreadystatechange = callback; xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xmlHttp.send(parameter);
注意以上几点,必须要设置一个请求的头文件,send里面发送一些我们需要的参数