//封装Ajax
(function(){
//这里是自调用匿名函数的代码区
//通过ID得到对象
var $ =function (id){
return document.getElementById(id);
};
//实例化Ajax,用$的init
$.init = function(){
//尝试生成
try{
return new XMLHttpRequest();
}catch(e){
}
try{
}catch(e){
return new ActiveXObject('Microsoft.XMLHTTP');
}
//如果两种方法都创建Ajax对象失败则提示
alert("创建Ajax对象失败");
};
/* Ajax用get传输数据
* @param1 url,数据传到的处理文件,一般PHP
* @param2 data,要传送的数据
* @param3 callback,回调函数,数据接收完成并且返回200时候处理的代码
* @param4 tyep,Ajax想要接收回来的数据的类型,决定着用哪个接收方式传给callback
*/
$.get=function (url,data,callback,type){
var xhr =$.init();
//url增加时间戳防止缓存demo.php?_=
var url = url+"?_="+ new Date().getTime();
//如果不用传递数据
if(data!=null){
url = url +"&"+data
}
//初始化Ajax
xhr.open("get",url);
//Ajax的状态码变更的处理
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//数据接收完整是readyState==4,相应头正确返回的状态码是200,xhr.status==200
if(type==null){
//type的默认值,用文本接收
type="text";
}
//用TEXT接收的处理方式
if(type=="text"){
callback(xhr.responseText);
}
//用XMl接收的处理方式
if(type=="xml"){
callback(xhr.responseXML);
}
//用TEXT接收的处理方式
if(type=="json"){
callback(eval("("+xhr.responseText+")"));
}
}
};
//Ajax发送数据
xhr.send(null);
};
/* Ajax用post传输数据
* @param1 url,决定着用哪个接收方式传给callback
*/
$.post=function (url,type){
var xhr =$.init();
//初始化Ajax
xhr.open("post",url);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Ajax的状态码变更的处理
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//数据接收完整是readyState==4,相应头正确返回的状态码是200,xhr.status==200
if(type==null){
//type的默认值,用文本接收
type="text";
}
//用TEXT接收的处理方式
if(type=="text"){
callback(xhr.responseText);
}
//用XMl接收的处理方式
if(type=="xml"){
callback(xhr.responseXML);
}
//用TEXT接收的处理方式
if(type=="json"){
callback(eval("("+xhr.responseText+")"));
}
}
};
//Ajax发送数据
xhr.send(data);
};
//windon引用,闭包
window.$=$;
})();
一、Ajax对象
编写Ajax程序,必须首先创建一个Ajax对象,这个对象名:XMLHttpRequest
1、 创建Ajax对象
在不同的浏览器下创建Ajax对象的方式不同
IE:
varxhr=new ActiveXObject(‘Microsoft.XMLHTTP’);
w3c:
varxhr=new XMLHttpRequest();
第一种创建方式适用于IE浏览器
第二种创建方式适用于W3C浏览器,同时也适应用于IE的高版本浏览器(8.0)
1、 Ajax对象的相关属性和方法
相关方法:
lopen(method,url[,async])
初始化Ajax对象
method:请求方式 主要有两种:get和post
url:请求地址
[async]:是否异步请求 主要有个值:true和false 默认:true
lsetRequestHeader(header,value)
设置请求头信息
header:请求头
value:请求头信息
lsend(content)
发送请求,只有执行到ajax对象的send方法时,才会真正发送请求
content:参数,如果是get请求,这里直接写null
相关属性:
lreadyState :状态码
Ajax对象从创建到初始化到发送请求到接收数据时,它的状态码会发生改变
0:表示对象已建立,但未初始化
1:表示对象已初始化,但未发送
2:已调用send方法进行请求
3:正在接收数据(接收到一部分)
4:接收完成
lonreadystatechange :当Ajax对象的状态码发生改变时所触发的回调函数
lstatus :http的响应状态码
lstatusText :http的响应状态文本
lreponseText :服务器端返回的数据(字符串形式)
lresponseXML :服务器端返回的数据(xml形式)
如果服务器返回的是普通字符串,使用responseText属性进行取值
如果服务器返回的是xml文档数据,使用responseXML属性进行取值
一、解决缓存问题
在ie浏览器下,每次ajax的请求的结果会被浏览器缓存下来,保存在浏览器的临时文件夹下,如:
第一次访问时把这个文件的处理结果缓存到本地,下次发送ajax请求时,如果还是与上次的url完全相同,那么浏览器会自动找到之前的缓存文件,并且使用
1、 随机数
var url=”demo.php?_=”+Math.random();
这种解决方式会在客户端产生大量的缓存文件
从概率上讲,随机可能会重复
2、 时间戳
var url=”demo.php?_”+new Date().getTime();
这种解决方式会在客户端产生大量的缓存文件
3、 设置请求头
lsetRequestHeader("If-Modified-Since","0");
Ajax请求时如果之前有缓存文件,本次的请求url与之相同,会直接使用缓存文件
我们可以设置If-Modified-Since请求头,这样一来,ajax就会重新发生http请求。
这种解决方法会在客户端产生一个缓存文件。
4、 禁用缓存
lheader("Cache-Control:no-cache,must-revalidate");
header功能:向http响应头中写数据
第四种方法从根本上禁止了缓存
二、Ajax的post请求
1、 get和post的区别
get是将参数附加到url的后面
post是将参数放在请求空白行的后面
get请求传参最大大小:2k
post请求传参最大大小:无限制,一般服务器会做限制
get只能传输字符串数据
post可以传输字符串和二进制数据
get请求头:
post请求:
2、 post请求语法
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
ajax的post请求在ie下不会产生缓存问题
1、 js解析dom
lvar xml=xhr.responseXML;
lnode=xml.getElementsByTagName(“TagName”);
lnode[0].childNodes[0].nodeValue;
1、 Ajax中json的使用
1) 在php程序中生成json字符串并输出
2) 在js程序中对字符串进行解析
语法:
var data=eval( ‘(‘ + xhr.responseText + ’)’);
var book = data.book; (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|