zoukankan      html  css  js  c++  java
  • 自定义xhr请求

    接上一篇博客,上一篇是之前的jsonp请求方法的封装,这一篇是xhr请求的简单封装。
    原理:
    1:new一个xhr对象,命名为ajaxRequest,由于浏览器兼容性的问题,所以将获取xhr对象的方式封装为一个方法,命名为CreateRequestObject;
    2:声明一个用来发送xhr请求的方法,命名为obtainData,可以接收一些参数:url、type、timeout、contentType、data、ready、error等;
    3:将传入的参数进行处理,若某些可选参数没有传入,则赋值默认值;
    4:发送请求,并根据情况执行回调。

    /*
     * xhr 获取数据 
     * */
    var debug = true;   // 是否开启debug
    
    function CreateRequestObject() {
      var ajaxRequest;
      try {
        ajaxRequest = new XMLHttpRequest();
      } catch (e) {
        try {
          ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
            ajaxRequest = false;
          }
        }
      }
      if(!ajaxRequest) {
        console.log('您的浏览器版本过低,请更换最新版本的Chrome浏览器!');
      }
      return ajaxRequest;
    }
    
    /*
     * paramObj {
     *   url: 请求的接口url
     *   type: get/post  请求的方式,可选,默认get
     *   timeout: 设置请求超时时间,可选,默认为0,即不设置超时
     *   contentType:设置header,可选
     *   data: 要发送的数据
     *   ready: 请求结束后执行
     *   error: 请求错误
     * */
    function obtainData(paramObj) {
      var ajaxRequest = CreateRequestObject();
      if(ajaxRequest === false) {  // 如果获取ajax对象失败
        return;
      }
    
      // 默认数据的处理
      var defaultContentType = 'application/x-www-form-urlencoded; charset=UTF-8';
      // var defaultContentType = 'application/json; charset=UTF-8';
      var defaultType = 'GET';
      var defaultAsync = true;
      paramObj.contentType = paramObj.contentType || defaultContentType;
      paramObj.type = paramObj.type || defaultType;   // 默认是GET
      paramObj.async = (typeof paramObj.async === 'boolean') ? paramObj.async : defaultAsync;   // 默认是异步
      // 设置超时时间
      paramObj.timeout && Number(paramObj.timeout) ? ajaxRequest .timeout = paramObj.timeout : '';
    
      // 处理要发送的数据
      var senData = paramObj.data ? paramObj.data : "";
      if(paramObj.type === "GET") {
        senData = formatParams(senData);
      } else if(paramObj.contentType.indexOf('application/x-www-form-urlencoded') > -1) {
        senData = formatParams(senData);
      } /*else if(paramObj.contentType.indexOf('application/json') > -1) {  // 发送json格式失败
       senData = JSON.stringify(senData);
       } */else {
        // 其他请求方式的数据转换需要自己实现
      }
    
      // 发送数据
      if(paramObj.type === "GET") {
        ajaxRequest.open(paramObj.type, paramObj.url + '?' + senData, paramObj.async);
        ajaxRequest.send(null);
      } else if(paramObj.type === "POST") {   // POST
        ajaxRequest.open(paramObj.type, paramObj.url, paramObj.async);
        ajaxRequest.setRequestHeader('Content-Type', paramObj.contentType);
        ajaxRequest.send(senData);
      }
      // 监听超时事件
      ajaxRequest.ontimeout = function () {
          console.error("The request for " + paramObj.url + " timed out.");
      };
      // 处理返回函数
      ajaxRequest.onreadystatechange = function () {
        if(ajaxRequest.readyState === 4) {
          if(ajaxRequest.status === 200 || ajaxRequest.status === 304) {
            var result = ajaxRequest.responseText;
            try {
              var data = result ? JSON.parse(result) : false;  //  将json字符串转为json对象
              paramObj.ready? paramObj.ready(data): '';
            } catch (e) {
              console.error(e);
            }
          } else {
            console.error("请求错误");
            paramObj.error? paramObj.error(): '';
          }
        }
      }; // 回调函数结束
    }
    

    本文链接:https://www.cnblogs.com/xsilence/p/10795505.html

  • 相关阅读:
    POJ 3710 Christmas Game#经典图SG博弈
    POJ 2599 A funny game#树形SG(DFS实现)
    POJ 2425 A Chess Game#树形SG
    LeetCode Array Easy 122. Best Time to Buy and Sell Stock II
    LeetCode Array Easy121. Best Time to Buy and Sell Stock
    LeetCode Array Easy 119. Pascal's Triangle II
    LeetCode Array Easy 118. Pascal's Triangle
    LeetCode Array Easy 88. Merge Sorted Array
    ASP.NET MVC 学习笔记之 MVC + EF中的EO DTO ViewModel
    ASP.NET MVC 学习笔记之面向切面编程与过滤器
  • 原文地址:https://www.cnblogs.com/xsilence/p/10795505.html
Copyright © 2011-2022 走看看