ajax温习

最新推荐文章于 2024-11-07 17:56:25 发布

weixin_30404405

最新推荐文章于 2024-11-07 17:56:25 发布

阅读量83

点赞数

文章标签： json javascript 面试 ViewUI

原文链接：http://www.cnblogs.com/xwwin/p/4805993.html

版权

工作中一直有写JS，也一直有用jquery,在感受jquery便利之余，也对它产生了依赖，已至于许多功能只知使用而不知原生写法，就像ajax。

今天不小心翻看了以前学习的视频，温故了一下原生ajax写法及原理，正好捣鼓捣鼓。这也是面试经常会遇到的问题，动手封装下原生的ajax函数何乐而不为了，代码如下：

function ajaxfn(obj){
            /*传入一个json对象
             *type:为请求方式，如get,post
             *data：传输的数据
             *async:异步请求，默认为true
             *dataType：返回的数据类型
             *url:这请求地址
             *fnok:为请求成功时的回调，默认传入返回的数据
             *fnerror:为请求失败的回调，默认传入当前的服务器状态码，如500，404
            */
            var xhr=null,
                type=obj.type?obj.type.toLowerCase():"get",//默认是get
                url=obj.url,
                data=obj.data?JSON.stringify(obj.data):null,
                dataType=obj.dataType?obj.dataType.toLowerCase():"text",
                async=true;//默认是异步
                if(obj.async==false){
                    async=false;
                }
            //创建XMLHttpRequest对象
            try{
                xhr=new XMLHttpRequest();
            }catch(e){
                //兼容ie6
                xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }
            //连接服务器
            xhr.open(type,url,async);
            //发送请求
            if(type=="post"){//如果是post请求得先设置请求头，application/x-www=form-urlencoded适合绝大多数的应用场景
                xhr.setRequestHeader("content-type","application/x-www=form-urlencoded");
            }
            xhr.send(data);
            //监听过程
            xhr.onreadystatechange=function(){
                /*readyState请求状态
                 *0:请求未初始化（还没有调用open()）
                 *1:请求已经建立，但是还没有发送（还没有调用send()）
                 *2:请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
                 *3:请求处理中，通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
                 *4:响应已经完成;可以获取并使用服务器的响应了.
                */
                if(xhr.readyState==4){//请成完成
                    /*常用http状态码
                     *200：服务器成功返回网页
                     *304：未修改,使用缓存
                     *403：服务器拒绝请求
                     *404：请求的网页不存在
                     *503：服务器暂时不可用
                     *500：服务器内部错误
                    */
                    if(xhr.status==200){//返回成功                        
                        switch (dataType){
                            case "text"://接收到字符串
                                obj.fnok && obj.fnok(xhr.responseText);
                                break;
                            case "json"://接收到json字符串数据
                                obj.fnok && obj.fnok(JSON.parse(xhr.responseText));
                                break;
                            case "xml"://接收到xml格式数据
                                obj.fnok && obj.fnok(xhr.responseXML);
                                break;
                        }
                    }else{
                        obj.fnerror && obj.fnerror(xhr.status);
                    }
                }
            }
        }
    }

View Code

注：为了兼容IE6，ie7,ie8(兼容模式)支持JSON对象的stringify(),parse()方法，引入了一个json2.js文件，文件下载地址如下：https://github.com/douglascrockford/JSON-js

使用示例如下：

ajaxfn({
        type:'get',//请求方式
        url:'test.txt',//请求地址
        dataType:'text',//返回的数据类型
        fnok:function(data){//请求成功的回调
           alert(data);
        },
        fnerror:function(data){//请求失败的回调
           alert(data);
        }
});

个人知识有限，如有错误的地方，望指正，共同学习共同进步！

转载于:https://www.cnblogs.com/xwwin/p/4805993.html