首页 > Web开发 > 详细

原生js的AJAX

时间:2014-03-27 08:25:14      阅读:793      评论:0      收藏:0      [点我收藏+]

和jQuery的$.ajax()的效果是一样一样哒!

bubuko.com,布布扣
//原生AJAX
var fxAJAX = function (el) {
    //el :初始化 参数
    //get请求方式会产生缓存,post请求方式则没有。。。
    var el = {
        url: el.url,//必填
        type: el.type == undefined ? "get" : el.type,//string 可选,默认为"get"
        data: el.data == undefined ? null : el.data,//可选,默认为空,只有type==post请求的的时候需要, user=user&name=name....
        dataType: el.dataType == undefined ? "text" : el.dataType,//string 可选,默认为“text”
        success: el.success//可选,回调函数
    };
    //创建XMLHttpRequest对象
    var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    //传参数,打开对象
    xmlHttp.open(el.type, el.url, true);
    //选择发送方式
    //因为get请求的参数是在url里,所以send(null);
    el.type.toString().toLocaleLowerCase() == "get" ? xmlHttp.send(null) : xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(el.data);
    //if (el.type.toString().toLocaleLowerCase() == "get") { xmlHttp.send(null) } else { xmlHttp.send(el.data) }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            if (el.dataType.toString().toUpperCase() == "TEXT") {
                //普通文本
                if (el.success != null) { el.success(xmlHttp.responseText); }
            } else if (el.dataType.toString().toUpperCase() == "XML") {
                //接收xml文档
                if (el.success != null) { el.success(xmlHttp.responseXML); }
            } else if (el.dataType.toString().toUpperCase() == "JSON") {
                //将josn字符串转换为js对象
                if (el.success != null) { el.success(eval("(" + xmlHttp.responseText + ")")); }
            }
        }
    }
}
bubuko.com,布布扣

 如何调用?

bubuko.com,布布扣
fxAJAX({
    url: "?action=del",
    type: "post",
    data: "Id=" + id,
    success: function (msg) {//执行成功之后运行到这里
        //console.log(‘成功‘)!
    }
});
bubuko.com,布布扣

原生js的AJAX,布布扣,bubuko.com

原生js的AJAX

原文:http://www.cnblogs.com/zentree/p/3626167.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!