标签 ajax 下的文章

[转]用原生JS简单封装AJAX

用原生JS仿照jquery写一个具有以上五个参数的$.ajax简单版本

首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。

var createAjax = function() {
    var xhr = null;
    try {
        //IE系列浏览器
        xhr = new ActiveXObject("microsoft.xmlhttp");
    } catch (e1) {
        try {
            //非IE浏览器
            xhr = new XMLHttpRequest();
        } catch (e2) {
            window.alert("您的浏览器不支持ajax,请更换!");
        }
    }
    return xhr;
};

写核心函数

var ajax = function(conf) {
    // 初始化
    //type参数,可选
    var type = conf.type;
    //url参数,必填 
    var url = conf.url;
    //data参数可选,只有在post请求时需要
    var data = conf.data;
    //datatype参数可选    
    var dataType = conf.dataType;
    //回调函数可选
    var success = conf.success;
                                                                                         
    if (type == null){
        //type参数可选,默认为get
        type = "get";
    }
    if (dataType == null){
        //dataType参数可选,默认为text
        dataType = "text";
    }
    // 创建ajax引擎对象
    var xhr = createAjax();
    // 打开
    xhr.open(type, url, true);
    // 发送
    if (type == "GET" || type == "get") {
        xhr.send(null);
    } else if (type == "POST" || type == "post") {
        xhr.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if(dataType == "text"||dataType=="TEXT") {
                if (success != null){
                    //普通文本
                    success(xhr.responseText);
                }
            }else if(dataType=="xml"||dataType=="XML") {
                if (success != null){
                    //接收xml文档    
                    success(xhr.responseXML);
                }  
            }else if(dataType=="json"||dataType=="JSON") {
                if (success != null){
                    //将json字符串转换为js对象  
                    success(eval("("+xhr.responseText+")"));
                }
            }
        }
    };
};

此函数的使用用法

ajax({
    type:"post",
    url:"test.jsp",
    data:"name=dipoo&info=good",
    dataType:"json",
    success:function(data){
        alert(data.name);
    }
});

 

五个参数只有url是必选的;type,dataType具有默认值,并且type的取值只能为post/get或其大写形式,dataType的取值只能为text/xml/json或其大写形式;而当type为get或者已经在url后附带参数则不用指定data;success为回调函数,按需求或写或不写。

原文链接:http://dipoo.diandian.com/post/2013-03-14/40048775665

 

 

 

评论 前端相关

关于ajax跨域问题的解决方法

参考技术:js创建动态脚本

参考资料:

url:http://www.iteye.com/topic/198581#

url:http://www.iteye.com/topic/658916

url:http://www.iteye.com/topic/901182

admin 342 条评论 前端相关

jquery.post返回的json数据不能正常使用的问题

jquery.post返回的json数据不能正常使用,今天要适用jquery的ajax,post方法来获取数据,但是明明看到返回的数据是json格式的但不知道为什么就是出错.

- 阅读剩余部分 -