码迷,mamicode.com
首页 > 编程语言 > 详细

好程序员web前端教程分享前端 javascript 练习题Ajax封装

时间:2019-11-28 09:25:13      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:http   case   The   end   enc   change   text   java   for   

好程序员web前端教程分享前端javascript练习题Ajax封装
ajax的基本封装 ----必须掌握
function ajax(url,fn){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("get",url,true);
xhr.send();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var data = xhr.responseText;
            fn(data);
        }
    }
}}

ajax的完整封装
function ajax(obj){
//obj -> type url data success
var str = "";
for(var key in obj.data){
str += key+"="+obj.data[key]+"&";
}
//str = str.substring(0,str.length-1);
str = str.replace(/&$/,"");

if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if(obj.type.toUpperCase()=="GET"){
    if(obj.data){
        var url = obj.url + "?" + str;
    }else{
        var url = obj.url;
    }

    xhr.open("get",url,true);
    xhr.send();
}
if(obj.type.toUpperCase()=="POST"){
    xhr.open("post",obj.url,true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(str);
}

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var data = xhr.responseText;
            obj.success(data);
        }
    }
}

好程序员web前端教程分享前端 javascript 练习题Ajax封装

标签:http   case   The   end   enc   change   text   java   for   

原文地址:https://blog.51cto.com/14573321/2454202

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!