神马是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);
}
});