据说每个大牛、小牛都应该有自己的库——Ajax

简介:

蹉跎到今天终于要写Ajax部分了,平时工作中除了选择器我用jQuery的最多的就是ajax,所以这部分在自己的框架中必不可少。

XMLHttpRequest

我以为对每个使用过Ajax的人来说XMLHttpRequest对象肯定是如雷贯耳,可是在和公司小伙伴儿的讨论中我意识到,这个对象对有些已经使用Ajax很久的人来说仍然很陌生,jQuery等类库把XMLHttpRequest对象封装的太好了,以至于我们都不知道自己在使用它。关于JavaScript原生的Ajax之前写过一篇Ajax初步理解的博客,为了方便下面书写,在这里再介绍一下几个重点概念。

Ajax的核心是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。该对象有两个重要方法open与send

调用send()方法,请求被发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

1. responseText:作为响应主体被返回的文本

2. responseXML:如果响应内容的类型是”text/xml”或”application/xml”,这个属性将保存包含着相应数据的XML文档

3. status:响应的HTTP状态(200,404,500等)

4. statusText:HTTP状态说明

XHR对象有一个readyState属性,该属性表示请求/响应过程中的当前活动阶段,每当readyState值改变的时候都会触发一次onreadystatechange事件。

浏览器兼容的创建XHR对象方法

大家都懂得,IE总会制造些麻烦,看看浏览器兼容的创建XHR对象方法,具体过程可以看看Ajax初步理解中的说明

复制代码
function __createXHR(){
                var xhr = null;
                try {
                    // Firefox, Opera 8.0+, Safari,IE7+
                    xhr = new XMLHttpRequest();
                }
                catch (e) {
                    // Internet Explorer 
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {
                            xhr = null;
                        }
                    }
                }
                return xhr;
            }
复制代码

封装

其实看看第一段关于XHR对象的说明就明白为什么jQuery等类库会对XHR做如此彻底的封装了,这个对象实在是太复杂了,参数的设置都要有时机问题,所以我也走上了封装之路。

复制代码
ajax: function(configs) { 
                    var settings = { 
                        "url": "",  //请求地址
                        "method": "post", //请求使用方法
                        "user": "", //用户名
                        "password": "", //密码
                        "data": null, //参数(text/json)
                        "responseType": "text", //返回值获取方式 text/xml 
                        "headers": {}, //自定义的HttpHeader
                        "enableCache":true, //是否使用缓存
                        "onSucceed": null, //成功句柄
                        "onClientError": null, //客户端错误句柄
                        "onServerError": null //服务器端错误句柄
                    }; 
                    for (s in settings) { 
                        settings[s] = configs[s] ? configs[s] : settings[s];  //应用自定义配置
                    } 
                    var xhr = _createXHR();  //创建XHR对象
                    xhr.onreadystatechange = function() { 
                        if (xhr.readyState == 4) {  //请求完成,响应就绪
                            var result = settings["responseType"] == "text" ? xhr.responseText : xhr.responseXML; //返回值类型
                            if (((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) && typeof settings['onSucceed'] == 'function') { //成功
                                settings['onSucceed'](result, xhr.status); 
                            } else if (xhr.status >= 400 && xhr.status < 500) { //客户端出错,404啊神马的
                                settings['onClientError'](result, xhr.status); 
                            } else if (xhr.status >= 500) { //服务器端出错
                                settings['onServerError'](result, xhr.status); 
                            } 
                        } 
                    } 
                    xhr.open(settings['method'], settings['url'], settings['user'], settings['password']); //发送请求
                  
                    if (typeof settings['headers'] == 'object') { //设置自定义headers
                        var headers = settings['headers']; 
                        for (h in headers) { 
                            xhr.setRequestHeader(h, headers[h]); 
                        } 
                    } 
                    if(!settings['enableCache']){ //禁用缓存
                        xhr.setRequestHeader("If-Modified-Since","0");
                        }
                    
                    if (settings["method"].toLowerCase() == "post") { //post请求
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); 
                        var data="";
                        if(typeof settings["data"]=='object')
                        {
                            for(d in settings["data"]){
                                data+=(d+'='+settings["data"][d]);
                                }
                          }else{
                            data=settings["data"];
                              }
                        xhr.send(data); //传递参数
                    } else { 
                        xhr.send(); //get请求
                    } 
                }
复制代码

最后

这样一个简单的Ajax封装就完成了,使用的时候和jQuery类似

复制代码
ssLib.ajax({ 
            "url": "testajax.php",
            "data":{"name":"Byron"},
            "onSucceed": function(result) {
                alert(result);
            } 
        });
复制代码

看起类不错,不过没实际使用过呢还,希望大家多给意见。



    本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/3327187.html,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
50 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
31 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
34 4
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
前端开发 API
uni-ajax网络请求库使用
uni-ajax网络请求库使用
|
前端开发
AJAX ------ axios (最热门的AJAX工具库)
AJAX ------ axios (最热门的AJAX工具库)
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
64 1