美文网首页
ajax 的实现

ajax 的实现

作者: 夜幕小草 | 来源:发表于2016-11-25 13:04 被阅读21次

    var $ = {};

    $.ajax = ajax;

    function json2url(json){

    var arr = [];

    //添加随机因子

    json.t = Math.random();

    for(var name in json){

    //进行编码

    arr.push(name + "=" + encodeURIComponent(json[name]));

    }

    return arr.join("&");

    }

    //options:url,type,timeout,data,success,error

    function ajax(options){

    options = options || {};

    if(!options.url){

    return ;

    }

    options.type = options.type || "get";

    options.timeout = options.timeout || 0;

    options.data = options.data || {};

    var str = json2url(options.data);

    //1 创建

    if(window.XMLHttpRequest){

    var xhr = new XMLHttpRequest();

    } else {

    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

    if(options.type == "get"){

    //2 连接 open(方式,地址,是否异步)

    xhr.open("get",options.url+"?"+str,true);

    //3 发送 send   xhr.send(null);

    xhr.send();

    } else{

    //2 连接 open(方式,地址,是否异步)

    xhr.open("post",options.url,true);

    //设置请求头

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //3 发送 send   xhr.send(null);

    xhr.send(str);

    }

    //4 接收

    xhr.onreadystatechange = function(){

    if(xhr.readyState == 4){//完成

    clearTimeout(timer);

    //http状态  [200,300) 304

    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){

    //成功

    options.success && options.success(xhr.responseText);

    } else {

    //失败

    options.error && options.error(xhr.status);

    }

    }

    };

    if(options.timeout){

    var timer = setTimeout(function(){

    alert("超时了");

    xhr.abort();//终止请求

    },options.timeout);

    }

    }

    相关文章

      网友评论

          本文标题:ajax 的实现

          本文链接:https://www.haomeiwen.com/subject/tmwipttx.html