神马是Ajax?
Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术。
http请求
首先要了解http请求的方法(GET和POST)。
GET用于获取数据。GET是在URL中传递数据,她的安全系数低,容量相对来说也低了不少。
POST用于上传数据。POST安全性相对较高,容量几乎无限。
Ajax请求
Ajax请求分为四步:(与把大象装进冰箱类似):
1.创建Ajax对象:
在创建对象的时候有些兼容问题:
var oAjax = new XMLHttpRequest(); // 兼容ie6以上版本 var oAjax = ActiveXObject('Microsoft.XMLHTTP'); // 兼容ie6
合并以上代码:
var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject('Microsoft.XMLHTTP'); }
2.链接服务器:
这里会用到open()方法。open()方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。
oAjax.open('GET', url , true);
3.发送请求:
这里会用到send()方法。
oAjax.send();
4.接收返回值:
onreadystatechange事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState:请求状态,返回的是整数(0-4)。
0(未初始化):还没有调用 open() 方法。
1(载入):已调用 send() 方法,正在发送请求。
(载入完成):send() 方法完成,已收到全部响应内容。
(解析):正在解析响应内容。
(完成):响应内容解析完成,可以在客户端调用。
status:请求结果,返回 200 或者 404。
responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。
oAjax.onreadystatechange = function(){ if(oAjax.readyState == 4){ if(oAjax.status == 200){ fnSucc(oAjax.responseText); }else{ if(fnFaild){ fnFaild(); } } } };
我们将以上代码,进行封装:
function ajax(url, fnSucc, fnFaild){ //1.创建对象 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 oAjax.open('GET', url, true); //open(方法, url, 是否异步) //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function(){ //OnReadyStateChange事件 if(oAjax.readyState == 4){ //4为完成 if(oAjax.status == 200){ //200为成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } }; }
下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装:
var createAjax = function(){ var xhr=null; try { xhr=new ActiveXObject("microsoft.xmlhttp"); // IE系列浏览器 } catch(e1) { try{ xhr=new XMLHttpRequest(); // 非IE浏览器 } catch(e2) { window.alert("您的浏览器不支持ajax,请更换!"); } } return xhr; }; var ajax=function(conf){ var type=conf.type; // type参数,可选 var url=conf.url; // url参数,必填 var data=conf.data; // data参数可选,只有在post请求时需要 var dataType=conf.dataType; // datatype参数可选 var success=conf.success; // 回调函数可选 if (type == null) { type="get"; // type参数可选,默认为get } if (dataType == null){ dataType="text"; // dataType参数可选,默认为text } var xhr = createAjax(); xhr.open(type,url,true); if (type=="GET" || type=="get") { xhr.send(null); } else if (type=="POST" || type=="post") { xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange=function(){ if ((xhr.readyState == 4) && (xhr.status == 200)) { if (dataType=="text" || dataType=="TEXT"){ if (success != null){ success(xhr.responseText); // 普通文本 } } else if(dataType=="xml" || dataType=="XML"){ if (success != null){ success(xhr.responseXML); // 接收xml文档 } } else if (dataType=="json" || dataType=="JSON"){ if (success != null) { success(eval("("+xhr.responseText+")")); //将json字符串转换为js对象 } } } }; };
该方法使用也很简单,和jquery的$.ajax方法一样,不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下:
ajax({ type:"post",//post或者get,非必须 url:"test.jsp",//必须的 data:"name=dipoo&info=good",//非必须 dataType:"json",//text/xml/json,非必须 success:function(data){//回调函数,非必须 alert(data.name); } });