ajax详细讲解和封装包括HTTP状态码

AJAX(异步的JavaScript和XML，用异步的形式去操作xml)

主要的作用：数据交互

  好处：

              1.节省用户的操作时间

              2.提高用户体验

              3.减少数据请求（传输获取数据）

function ajax(method，url, data, success){

//第一步：创建ajax对象

var xhr=null;

//这判断主要是为了兼容IE6，IE6没有XMLHttpRequest这个对象，所以前面要写上window，防止报错。

//还有一种写法是用try{尝试执行的代码如果有错误，则会执行catch里面的}catch(e){}

if(window.XMLHttpRequest){

//标准浏览器的对象（包括IE7-IE8）

xhr=new XMLHttpRequest();

}else{

//IE6下是这个对象

xhr=ActiveXObject('Microsoft.XMLHTTP');

}

//如果当前方法为get并且有数据的情况下

if(mothod=='get'&& data){

url+='?'+data;

}

//第二步：提交前的准备工作

open方法里面3个参数

1.用什么方式提交（get或者post）

2.请求地址

3.是否异步

区别：

get方式：把数据名称和数据值用=连接，如果有多个的话。那么他会把多个数据组合用&进行连接，然后把数据放到URL？后面传到指定页面，URL有长度限制，会被缓存。用户安全比较差些。

post方式：通过请求头发送的，理论上无限制大小，不会被缓存，安全性要好些。

true（异步）：前面代码没执行完不会影响后面的代码执行

false（同步）：前面的代码没执行完，后面的代码不会执行

xhr.open(method,url,true)；

第三步：提交发送请求

//如果是空的代表是post

if(method=='get'){

xhr.send();

}else{

//设置请求头文档类型

xhr.setRequstHeader('content-type','application/x-www-form-urlencoded');

xhr.send(data);

}

第四步：等待服务器返回内容

//responseText:  ajax请求返回的内容

//readystate属性：请求状态

//onreadystatechang:当状态发生改变时触发

xhr.onreadystatechange=function(){

//请求状态等于4，代表响应内容解析完成。可以在客户端调用了

if(xhr.readystate==4){

//当服务器状态码等于200的时候，代表服务器返回成功

if(xhr.status==200){

//回调函数

success && succss(xhr.responseText);

}else{

alert('出错了，Err:'+xhr.status);

}

}

}

}

调用：

ajax('get' , '1.php', '' ,function(data){

console.log(data);

})

HTTP状态码：总共分为5种类型

1字开头：代表消息类型

2字开头：代表成功类型

3字开头：代表重定项类型

4字开头：代表错误类型

5字开头：代表服务器错误

希望能帮助需要的朋友，帮助它人也是帮助自己！