美文网首页
用原生js封装ajax

用原生js封装ajax

作者: 蓝色木头 | 来源:发表于2017-12-23 10:28 被阅读0次

    // ajax操作

    /*options = {

    type : "get|post", // 请求方式,默认 "get"

    url : "xxx.php", // 请求资源的URL

    async : true, // 是否异步请求,默认为 true

    data : {}, // 向服务器传递的数据{username:"xiaoming", password:"abc", phone:"123"}

    dataType : "text|json", // 预期从服务器返回的数据格式

    success : function(data){},  // 请求成功执行的函数

    error : function(errMsg){} // 请求失败执行的函数

    }*/

    function ajax(options) {

    if (!options) // 未传递参数,结束函数执行

    return;

    // 获取请求的URL

    var url = options.url;

    if (!url) // 没有请求的服务器资源,结束函数执行

    return;

    // 获取请求方式

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

    // 是否异步

    var async = options.async;

    if (async === undefined)

    async = true;

    // 处理查询字符串

    var queryString = null;

    if (options.data) { // 有向服务器传递的数据,则连接查询字符串

    queryString = [];

    for (var attr in options.data) {

    queryString.push(attr + "=" + options.data[attr]);

    }

    queryString = queryString.join("&");

    }

    // 如果是 get 提交数据,将数据用 ? 号串联在 url 中

    if (method === "get" && queryString) {

    url += "?" + queryString;

    queryString = null;

    }

    // 创建核心对象

    var xhr;

    if (window.XMLHttpRequest)

    xhr = new XMLHttpRequest();

    else

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

    // 建立连接

    xhr.open(method, url, async);

    // 如果要像表单一样POST提交数据,则设置请求头

    if (method === "post")

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

    // 发送请求

    xhr.send(queryString);

    if (async) { // 异步

    // 处理响应

    xhr.onreadystatechange = function(){

    if (xhr.readyState === 4) {

    if (xhr.status === 200) {

    // 获取响应文本

    var data = xhr.responseText;

    // 判断预期返回的数据格式

    if (options.dataType === "json")

    data = JSON.parse(data);

    // 请求成功时数据处理业务

    options.success && options.success(data);

    } else {

    // 请求失败处理情况

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

    }

    }

    }

    } else { // 同步

    if (xhr.status === 200) {

    // 获取响应文本

    var data = xhr.responseText;

    // 判断预期返回的数据格式

    if (options.dataType === "json")

    data = JSON.parse(data);

    // 请求成功时数据处理业务

    options.success && options.success(data);

    } else {

    // 请求失败处理情况

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

    }

    }

    }

    //封装完成后,根据自身情况选择

    // 用于处理get请求

    function get(url, data, success, dataType) {

    ajax({

    type : "get",

    url : url,

    data : data,

    dataType : dataType,

    success : success

    });

    }

    // 用于处理post请求

    function post(url, data, success, dataType) {

    ajax({

    type : "post",

    url : url,

    data : data,

    dataType : dataType,

    success : success

    });

    }

    // 用于处理get请求,响应数据的格式为json格式

    function getJSON(url, data, success) {

    ajax({

    type : "get",

    url : url,

    data : data,

    dataType : "json",

    success : success

    });

    }

    相关文章

      网友评论

          本文标题:用原生js封装ajax

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