程序博客网 > 安装阿里云的yum源

javascript中Ajax的简单应用

来源：互联网发布：安装阿里云的yum源编辑：程序博客网时间：2024/06/07 11:07

一、ajax是浏览器与服务器之间的一个异步通信机制，用来无刷新的读取数据

二、在这个demo中，我用到的服务器是wamp，大家可以自己下一个64位/32位，具体配置过程百度。

三、最后跑之前要把html和js文件放进wamp安装目录下的www文件夹中，并运行wamp，然后打开你写的index.html

四、在浏览器中F12中的Network下查看ajax的读取。如果上一步的wamp没打开，就会报错

五、此demo比较简陋，多次点击会多次读取，因为没有写缓存的部分，请自行补充判断是否加载。或者参考另一篇文章jQ的ajax

以下是代码,具体步骤见注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax的使用</title>
<script src="js/oAjax.js">

</script>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
ajax('a.txt?t='+new Date().getTime(),function(str){
alert(str);
});
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="读取文件" />
</body>
</html>

-------------------js-----------------------

function ajax(url,funSuccess,funFail){//三个参数url,成功时的回调函数，失败回调函数
//step1:创建一个ajax对象
if(window.XMLHttpRequest)//非ie6
{
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//ie6
}

//step2:打开连接（连接到服务器）
oAjax.open('GET',url,true);

//step3:发送请求
oAjax.send();

//step4:接收返回值
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){//成功
//成功时执行操作,以函数作为参数
//responseText请求读取的文件
funSuccess(oAjax.responseText);
}else{
//失败时执行操作
//alert(oAjax.status);
if(funFail){
{
funFail(oAjax.status);
}
}
}
}
}
};

阅读全文

0 0

安装阿里云的yum源

安装阿里云的yum源

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子怎样学唱简谱中音萨克斯简谱回家简谱萨克斯二胡简谱入门简单电子琴简谱幼儿园钢琴简谱我们举杯简谱格桑梅朵简谱离别的秋天简谱送别电子琴简谱生生世世爱简谱因为爱情简谱歌谱下一个天亮简谱欢乐女神简谱世纪春雨简谱虫儿飞简谱钢琴谱我心永恒简谱歌谱简单双手简谱两只老虎简谱钢琴简谱软件儿童歌曲简谱歌谱大全一吻天荒简谱儿歌简谱双手小星星简谱歌谱简谱入门知识回家简谱歌谱生日快乐简谱双手爱的眼泪简谱后来钢琴简谱我要的飞翔简谱蓝精灵简谱歌谱天堂简谱歌谱衣食父母简谱钢琴初级简谱小镇姑娘简谱哈巴狗儿歌简谱幼儿儿歌简谱歌谱大全流行曲钢琴简谱我们荡起双桨简谱青春修炼手册简谱虫儿飞钢琴谱简谱