首页 > 代码库 > ajax详细讲解和封装包括HTTP状态码
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字开头:代表服务器错误
希望能帮助需要的朋友,帮助它人也是帮助自己!
ajax详细讲解和封装包括HTTP状态码