Javascript实例【四】自己写的Ajax

最新推荐文章于 2024-10-30 19:10:39 发布

寂寞的烟客

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量1k

点赞数

分类专栏： Javascript 文章标签： javascript function xmlhttprequest ajax 服务器

本文链接：https://blog.csdn.net/yunsense/article/details/7754778

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个很基础，但很实用，转载过来，对新手很有帮助

自己写的个简单的ajax文件，使用方法很简单，将下面的代码复制粘贴到一个js文件去，重命名为ajax.js，然后包含该文件就可以调用，别急么我下面会讲怎么使用的，先把自己写的代码贴上

function ajax(url,fnSucceed,fnFaild){
    //1、创建对象
    var oAjax = null ;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveObject('Microsoft.XMLHTTP');
    }
    //2、打开服务器文件
    oAjax.open("GET",url,true);
    //3、发送请求到服务器
    oAjax.send();
    //4、接收数据
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){//服务器有响应
            if(oAjax.status==200){
                fnSucceed(oAjax.responseText);
            }else if(oAjax.status==404){
                alert('请求的地址：'+url+'不存在！')
            }else{
                if(fnFaild)fnFaild();  
            }
        }  
    }  
}

下面是使用方法：
1、把上面的代码copy后粘贴到一个js文件去，就叫ajax.ja吧；
2、调用的湿乎乎使用ajax()即可；
3、参数说明：url:要请求的文件地址；
fnSucceed:请求成功后执行的函数，这里可以带参，带的参数就是服务器响应后返回的数据，可以是json，也可以是字符串，也可以说js代码（用下eval()就可以还原成js代码了），也可以是其他的数字等；
fnFaild:可选参数，执行失败后执行的函数，这个你就看着办！
下面还是把我自己使用的例子弄出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language='javascript' src='ajax.js'></script>
<script>
window.οnlοad=function(){
    var oBtn = document.getElementById("btn");
        var oTs  = document.getElementById("ts");
    oBtn.οnclick=function(){
          ajax('server.php',
            function(str){
              oTs.innerHTMT='这个是您请求的数据：'+str;  
            },function(){
              oTs.innerHTMT='<img src="loading.gif" />';//这个是随便，我就然后用户看到服务器还在请求的状态       
            }
          )
    }  
}
</script>
</head>
<body>
<input type="button" id="btn"  value="请求数据"/><span id='ts'></span>
</body>
</html>