怎么用原生js封装ajax函数

最新推荐文章于 2022-04-02 19:36:35 发布

liuwenguang__1207

最新推荐文章于 2022-04-02 19:36:35 发布

阅读量250

点赞数 3

分类专栏： web 文章标签： ajax

本文链接：https://blog.csdn.net/lwg910919an/article/details/64929916

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

封装函数

//要不要参数
//要：传输的方式，路径，数据，毁掉函数

function ajax(method,url,data,fnsuccess){
    //1号线：创建ajax对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }
    else{
        xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }
    //2号线：发送http请求（准备数据，正真的发送）
    if(method=='GET'&&data){
        //如果是get方式，并且有data：传数据到服务器
        url=url+'?'+data;
    }
    xhr.open(methos,url,true);
    if(method=='GET'){
        xhr.send(null);
    }
    else{
        xhr.setRequestHeader('Content','application/x-www-form-urlencoded');
        xhr.send(data);
    }
    //4号线：拿到的数据返回给调用ajax函数的地方
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                if(fnsuccess){
                    fnsuccess(xhr.responText);
            //注意这里只能接受字符串，json和html数据
                }
            }
            else{
                alert('出差了，出错状态是：'+xhr.status)  
            }
        }
    }
}

html传递函数
使用封装的函数记得写完四个参数值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');
                oBtn.onclick=function(){
                    ajax('GET','aa.txt','',function(str){
                        console.log(str);
                    });
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="btn" value="获取数据" />
        <div></div>
    </body>
</html>