首页 > 代码库 > Ajax入门笔记+服务器配置
Ajax入门笔记+服务器配置
认识Ajax:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
页面局部刷新
在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
使用Ajax:
可以单独封装,方便多个文件调用。
----------------------------------------------------------------------------------------------------
function ajax(url, fnSucc, fnFaild){ //文件地址,成功调取文件返回的内容,失败时执行的程序
//1.创建Ajax对象,判断兼容性
var oAjax=null;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
oAjax.open(‘GET‘, url, true);
“ 关于Ajax缓存问题,已经成功调用过Ajax文件后,服务器端源文件更再次改,客户端不会实时刷新,而是再次调用
先前缓存的文件。解决办法,就是在文件名上动脑筋了:
oAjax.open(‘GET‘,‘text.txt?t=‘+new date() .getTime() ,true); <注意问号>
根据实际需求来确定多久更新, 毫秒、秒、分...”
//3.发送请求
oAjax.send();
//4.接收服务器的返回
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status==200){
if(oAjax.responseXML && oAjax.responseXML.childNodes.length>0){ //判断是纯文本文件还是XML文件
var outMsg = getText(oAjax.responseXML.getElementByTagName(‘p‘)[0]);
/* 可以使用js中的getElementByTagName() 来获取XML里的元素 */
}else{
var outMsg = oAjax.responseText;
}
fnSucc(outMsg);
function getText(inval){ //判断获取的节点里面,是否有文本内容
if(inval.textContent){
return inval.textContent;
}
return inval.text;
}
}else{ //发生错误时
if(fnFaild){
fnFaild(oAjax.status);
}
}
};
}
------------------------------------------------------------------------------------------------------------
调用:
<script src="http://www.mamicode.com/ajax.js"></script> //引入文件
<script>
window.onload=function (){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function (){
//ajax能且仅能 从服务器读取文件
//参数可以略写 文件名,成功调取文件返回的内容,失败时执行的程序
ajax(‘abc.txt?t=‘+new Date().getTime(), function (str){
alert(str);
/* 成功获取文件内容后,执行代码写在这里 */
}),;
};
};
</script>
---------------------------------------------------------------------------------------------------------