Acticle 10:javascript技术：ajax的封装函数

最新推荐文章于 2022-04-16 06:20:28 发布

颜洁

最新推荐文章于 2022-04-16 06:20:28 发布

阅读量208

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/amytun_yu/article/details/52840503

版权

js基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

                                    JS：ajax封装函数的编写方法

1.下面是关于ajax对象的使用小例子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById('btn');
                oBtn.onclick=function(){
                    //1.创建ajax对象
                    //a.非ie6浏览器下创建Ajax对象
                    //var oAjax=new XMLHttpRequest();
                    //b.ie6浏览器下创建Ajax对象
//                  var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   
//                  alert(oAjax);
                    //兼容性处理
                    if(window.XMLHttpRequest)
                    {
                        var oAjax=new XMLHttpRequest();
                    }
                    else
                    {
                        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    //2.连接服务器
                    //open(方法，文件名，异步传输)
                    //get方法用于获取数据，post方法用于上传数据
                    oAjax.open('GET','read.txt',true);
                    //3.发送请求
                    oAjax.send();


                    //4.接收返回值
//                  onreadystatechanges事件：请求监控状态
//                  请求状态监控
//                  onreadystatechange事件
//                  readyState属性：请求状态
//                  0    （未初始化）还没有调用open()方法
//                  1    （载入）已调用send()方法，正在发送请求
//                  2    （载入完成）send()方法完成，已收到全部响应内容
//                  3    （解析）正在解析响应内容
//                  4    （完成）响应内容解析完成，可以在客户端调用了
//                      status属性：请求结果
//                      responseText
                    oAjax.onreadystatechange=function(){
                        //oAjax.readyState//浏览器和服务器，进行到第几步了
                        if(oAjax.readyState==4){//读取完成
                            if(oAjax.status==200)
                            {
                                alert('成功：'+oAjax.responseText);
                            }
                            else
                            {
                                alert('失败：'+oAjax.status);
                            }
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        <input type="button" name="btn" id="btn" value="获取ajax" />
    </body>

</html>

2.在小例子的的里面，为了更好的使用ajax的特性，下面加上ajax的封装函数，以后用的话直接调用已经封装好的函数就好了


//关于ajax的封装函数
function ajax(url,fnSucc,fnFaild){
//-----------------------------------------

                /*  ajax(url, fnSucc, fnFaild)函数参数介绍：
                    url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名）
                    fnSucc:成功返回信息
                    fnFaild：失败返回信息*/

//-----------------------------------------
                    //1.创建ajax对象
                    //a.非ie6浏览器下创建Ajax对象
                    //var oAjax=new XMLHttpRequest();
                    //b.ie6浏览器下创建Ajax对象
//                  var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   
//                  alert(oAjax);
                    //兼容性处理
                    if(window.XMLHttpRequest)
                    {
                        var oAjax=new XMLHttpRequest();
                    }
                    else
                    {
                        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    //2.连接服务器
                    //open(方法，文件名，异步传输)
                    //get方法用于获取数据，post方法用于上传数据
                    oAjax.open('GET',url,true);
                    //3.发送请求
                    oAjax.send();


                    //4.接收返回值
//                  onreadystatechanges事件：请求监控状态
//                  请求状态监控
//                  onreadystatechange事件
//                  readyState属性：请求状态
//                  0    （未初始化）还没有调用open()方法
//                  1    （载入）已调用send()方法，正在发送请求
//                  2    （载入完成）send()方法完成，已收到全部响应内容
//                  3    （解析）正在解析响应内容
//                  4    （完成）响应内容解析完成，可以在客户端调用了
//                      status属性：请求结果
//                      responseText
                    oAjax.onreadystatechange=function(){
                        //oAjax.readyState//浏览器和服务器，进行到第几步了
                        if(oAjax.readyState==4){//读取完成
                            if(oAjax.status==200)
                            {
                                fnSucc(oAjax.responseText);
//                              alert('成功：'+oAjax.responseText);
                            }
                            else
                            {
                                if(fnFaild)
                                {
                                    fnFaild(oAjax.status);
                                }
//                              alert('失败：'+oAjax.status);
                            }
                        }
                    }
}