Ajax学习总结。因为自己js的基础不是很好,学起来有点费劲,但还是基本上搞明白了,写下来分享一下。
学习Ajax注意事项
一、首先明确为什么要学习Ajax?
1) 浏览网页(不适用Ajax),当我们浏览一个网页的时候,单击之后便是空白的等待,非常的不友好。
2) 同样是浏览网页(使用Ajax),当我们在单击网页上某个元素后,不会是整个页面的刷新,页面完好,只是部分去请求服务器,然后将返回的数据以某种形式显示出来,很友好,这段时间,你可以继续浏览网页的其它元素。
何为ajax,即:ajax是一种异步交互技术。
二、使用Ajax的好处?
1)可以实现局部刷新,更友好。
2)按需取数据,减轻了服务器压力。
三、ajax的优缺点?
有点很明显。缺点就是各个浏览器创建对象的方式不同,比较麻烦。
四、ajax的应用?
引用很广,我所知道的经常用到的地方:唯一校验,无刷新页面等等。
五、学习步骤:(学习前必备,有一定的js,DOM,xml基础)
1、学习创建Ajax对象 (因为IE的垄断思维,导致了我们创建个对象都很麻烦)
浏览器大可分成两种:
一种是IE系列的浏览器(IE5 IE5.5 IE6.0 ,IE7 IE8 IE9 IE10 IE11)
一种是非IE系列的浏览器(都是按W3C标准)FF Mozilla NetScape
2、认识Ajax引擎对象的一些属性和方法
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的header标签
设置要请求的目标 URL,方法,和其他参数
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
send(content) 发送请求
setRequestHeader("label","value") 设置header并和请求一起发送
Ajax引擎对象中的属性
onreadyStatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化 M1=读取中 M2=已读取 M3=交互中 M4=完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码,如:404 ="文件未找到",200="成功"
statusText 服务器返回的状态文本信息
学习的时候,跟老师学写了一个ajax对象。大家可以保存下来,以后直接使用就行
function Ajax(recvType){
var aj =new Object(); //创建一个空对象
aj.recvType=recvType?recvType.toUpperCase():"HTML"; //HTML XML
aj.targetUrl='';
aj.sendString='';
aj.createXMLHttpRequest=function(){ //创建Ajax对象的函数
var request =false;
//window对象中有XMLHttpRequest存在就是非IE,包括(IE7、IE8)
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
if(request.overrideMimeType){
request.overrideMimeType("text/xml");
}
//window对象中有ActiveXObject属性存在就是IE
}else if(window.ActiveXObject){
var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMHTTP.6.0',
'Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
for(var i=0;i<versions.length;i++){
try{
request = new ActiveXObject(versions[i]);
if(request){ //真就返回对象
return request;
}
}catch(e){
request = false;
}
}
}
return request;
}
aj.XMLHttpRequest=aj.createXMLHttpRequest(); //创建ajax对象
aj.processHandle=function(){ //监听函数
if(aj.XMLHttpRequest.readyState == 4){
if(aj.XMLHttpRequest.status == 200){
if(aj.recvType == "HTML")
aj.resultHandle(aj.XMLHttpRequest.responseText);
else if(aj.recvType == "XML")
aj.resultHandle(aj.XMLHttpRequest.responseXML);
}
}
}
//get方法
aj.get=function(targetUrl,resultHandle){
aj.targetUrl =targetUrl;
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;//监听判断,利用回调函数
aj.resultHandle=resultHandle;
}
if(window.XMLHttpRequest){
aj.XMLHttpRequest.open("get",aj.targetUrl);
aj.XMLHttpRequest.send(null);
}else{
aj.XMLHttpRequest.open("get",aj.targetUrl,true);
aj.XMLHttpRequest.send();
}
}
//post方法
aj.post=function(targetUrl,sendString,resultHandle){
aj.targetUrl =targetUrl;
if(typeof(sendString) == "object"){
var str ="";
for(var pro in sendString){ //用 for in方法 遍历对象属性
str +=pro+"="+sendString[pro]+"&";
}
aj.sendString=str.substr(0,str.length-1);//得到一个属性请求字符串
}else{
aj.sendString=sendString;
}
if(resultHandle!=null){
aj.XMLHttpRequest.onreadystatechange=aj.processHandle;//监听判断,利用回调函数
aj.resultHandle=resultHandle;
}
aj.XMLHttpRequest.open("post",targetUrl); //打开发送地址
aj.XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
aj.XMLHttpRequest.send(aj.sendString); //发送请求内容
}
return aj;
}
在这个Ajax对象文件里,实现了创建完整对象,和ajax常用的get,和post方法。
如何使用,下面演示。
<script src="ajax.js"></script>
<script>
var ajax =Ajax();
/*
ajax.get("serv.php?username=zhangsan&email=aaa@bbb",function(data){
alert(data);
});
*/
/*
ajax.post("serv.php","username=value&aaa=bb",function(data){
alert(data);
});
*/
ajax.post("serv.php",{username:"zs",age:10,sex:"nan"},function(data){//post请求对象
alert(data);
});
</script>
封装的这个对象,使用时,直接var ajax = new Ajax() 来个对象。然后ajax.get() 和 ajax.post() 就可以了,然后注意post的两种情况(请求数据是否为对象)。
有问题,大家多多提出。