原生JavaScript封装ajax

来源：互联网发布：手机淘宝新品上架模块编辑：程序博客网时间：2024/05/17 23:30

从服务器取数据需要几步？

创建一个ajax对象；

连接到服务器；

告诉服务器要哪个东西，（发送请求）；

接收返回值；

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>GuoYu-ajax</title></head><body>    <input type="button" value="读取" id="btn1">    <script type="text/javascript">        var oBtn = document.getElementById('btn1');        oBtn.onclick = function() {            //1,创建一个ajax，IE6            //var oAjax = new ActiveXObject('Microsoft.XMLHTTP');            //1,创建一个ajax,非IE6            //var oAjax = new XMLHttpRequest();            /*                同步：一件一件来                异步：多个事情一起做，ajax天生就为异步而生，除非你网速快的很，同步也可以            */            /*                js中：                1，用没有定义的变量  -- 报错；                2，用没有定义的属性  --  undefined；                所以，有时候为了避免报错，使用window.做前缀。            */            if (window.XMLHttpRequest) {                var oAjax = new XMLHttpRequest();            } else {                var oAjax = new ActiveXObject('Microsoft.XMLHTTP');            }            //2,连接服务器,open(方法, 文件名, 同步/异步);            oAjax.open('GET', './zepto.js');            //3，发送请求            oAjax.send();            /*4,接收返回的东西，ajax发送请求后，干其他的事去了,                等到返回了以后再处理，返回后以事件的形式来处理数据,                onreadystatechange就是跟服务器交互的时候发生的事件            */            /*                reayState:                0：未初始化，还没调用open()方法；                1：载入，已经调用open()方法，正在发送请求；                2：载入完成，send()方法完成，浏览器已经收到全部响应内容（数据可能是加密的，压缩的，ajax还没法用）；                3：解析，正在解析响应内容（解析的是服务端返回的数据）；                4：完成，响应内容解析完成，可以在客户端调用了。完成不代表成功，比如读取出错了，文件不存在等等                怎么进一步判断是成了还是败了呢，status:状态码！            */            oAjax.onreadystatechange = function() {                //我怎么知道跟服务器交互的过程完没完呢？readyState:浏览器和服务器交互到哪一步了                if (oAjax.readyState == 4) {                    if (oAjax.status == 200) {                        alert('success');                        alert(oAjax.responText);//弹出zepto.js文件内容                    } else {                        alert('failed');                        alert(oAjax.status);                    }                }            };        };    </script></body></html>

zepto.js是真实存在于本目录中的，会alert出success，如果换成个不存在的文件，比如zepto1.js，则会弹出failed和404

ajax.js

以上的代码要封装成一个ajax函数以供调用，每次要读的文件肯定不同，不可能都是zepto.js，所以这是一个参数，每个人读到文件要做的事情不一样，所以，需要一个success的回调，把oAjax.responseText返回数据传进去，失败了，error，需要因为什么原因失败了，所以，oAjax.status当参数传递一下

function params(data) {    var arr = [];    for(var i in data) {        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));    }    return arr.join('&');}function ajax(obj) {    var xhr = new XMLHttpRequest();    // obj.url = obj.url + '?rand='+Math.random();    obj.data = params(obj.data);    if (obj.type === 'get') {        obj.url += obj.url.indexOf('?')==-1 ? '?'+obj.data : '&'+obj.data;    }    alert(obj.url);    if(obj.async === true) {        xhr.onreadystatechange = function() {            if(xhr.readyState == 4) {                if(xhr.status == 200) {                    obj.success(xhr.responseText);                } else {                    console.error('errNumber: '+xhr.status+', errMessage: ' + xhr.statusText);                }            }        };   }    xhr.open(obj.type, obj.url, obj.async);    if (obj.type === 'post') {        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        xhr.send(obj.data);    } else {        xhr.send(null);    }    if(obj.async === false) {        if(xhr.status == 200) {            obj.success(xhr.responseText);        } else {            console.error('errNumber: '+xhr.status+', errMessage: ' + xhr.statusText);        }    }}

0 0