ajax简单理解:
数据交互,实现异步请求(界面无刷新技术)
同步:一次一个,前一个没完后一个不能开始
异步:一次一堆,前一个没完后一个也能开。
Ajax的原理:
简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。其中的核心就是是JavaScript对象XmlHttpRequest。
ajax封装:
ajax函数ajax({url:'',data:{},type:'',timeout:*,success:fn,error:fn);
ajax({
url:'post.php',
data:{
a:12,
b:3
},
type:'post',
timeout:5000,
success:function(res){
alert(res);
},
error:function(){
alert('失败了');
}
})
ajax技术实现
1.创建ajax对象
try{
var oAjax=new XMLHttpRequest();
}catch(e){
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
- 使用ajax对象
五步走:
1、 创建ajax对象
2、 初始化设置 请求方式get/post 请求地址url
ajax.open(请求方式,请求地址);
3、 发起请求
ajax.send(请求数据);
4、 接收响应
ajax.readyState ajax通信状态码 5种状态码 对应 5步走
0:创建了ajax对象,但还未初始化(实例化对象,还未调用open方法)
1:已经初始化,但还未发送请求(调用open方法,还未调用send方法)
2:已经发送请求,但还未收到响应(调用send方法)
3:已经收到部分响应,数据还未齐备
4:已经接收所有响应数据
ajax.status HTTP响应状态码
200 : 成功
304 : 引用缓存
404 : 页面未找到(请求地址有问题)
500 : 服务器内部错误
ajax.onreadystatechange 事件属性 ajax状态码改变事件
ajax状态码共有5种,请问该事件触发几次,4次。
如果要获取响应内容,要符合两个条件:
ajax状态码为4时 获取响应内容
http状态码为200时 获取响应内容
条件表达式: ajax.readyState==4 && ajax.status==200
5、 使用响应数据
ajax.responseText 这个属性保存了响应的文本内容
用ajax技术获取时间功能案例
封装post get请求的ajax函数:
function getAjax(request,DataType,url,reqData,func){
//封装post get请求的ajax函数
//request 请求类型 post?get
//DataType 数据类型?text/json/xml
//url 地址
//reqDate 请求带回后台的数据
//func 执行函数 在该函数里面做逻辑判断
var xhr;
//ajax兼容IE和w3c浏览器,并创建xhr对象
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//给事件改变绑定一个监听事件//并且将传进来的函数调用起来 func()
xhr.onreadystatechange=function (){
if(xhr.readyState==4&&xhr.status==200){
if(DataType=='json'){
func(JSON.parse(xhr.responseText));
}else if(DataType=='xml'){
func(xhr.responseXML);
}else{
func(xhr.responseText);
}
}
}
if(request=='get'){ //判断是否为get提交? 以确实reqData值的位置
var urlP=url+'?'+reqData;
//建立一个get请求的http
xhr.open(request,urlP,true);
//发送http请求
xhr.send(null);
}else if(request=='post'){ //判断是否为post提交
//建立一个post请求的http
xhr.open(request,url,true);
//post请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送http请求
xhr.send(reqData);
}
}
网友评论