脚本化http(一)

最新推荐文章于 2023-05-22 09:16:32 发布

F2E前端爱好者

最新推荐文章于 2023-05-22 09:16:32 发布

阅读量614

点赞数

分类专栏： javascript 文章标签： http javascript

本文链接：https://blog.csdn.net/laike1355/article/details/50830963

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中实现HTTP请求的方法，包括HTTP协议的基础知识、XMLHttpRequest的兼容写法、同步和异步获取数据、GET和POST请求的封装及数据编码方式，特别是JSON编码在POST请求中的应用。

摘要由CSDN通过智能技术生成

http协议概述

这里写图片描述

兼容的XMLHttpRequest写法

//为了兼容低版本的ie浏览器我们需要这样来写兼容代码
if(window.XMLHttpRequest === undefined){
     window.XMLHttpRequest = function(){
        try{
            return new ActiveObject('Msxml2.XMLHTTP.6.0');
        }catch(error){
            try{
                 return new ActiveObject('Msxml2.HTTP.3.0');
            }catch(error){
                 throw new Error('XMLHttpRequest is not supported!');
            }
        }
     }
}

获取纯文本和强制同步获取

//关于http 函数的封装问题
function getText(url,callback){
    var request = new XMLHttpRequest();
    request.open('GET',url);
    request.onreadystatechange = function(){
        if(request.readyState ===4 && request.status ===200){
           var type = request.getResponseHeader('Content-Type');
           if(type.match(/^text/)){
              callback(request.responseText);
           }
        }
    }
    request.send(null);
}
//进行强制同步
function getTextNotAsyn(url){
    var request = new XMLHttpRequest();
    request.open('GET',url,false);
    request.send(null);
    if(request.status !== 200){ throw new Error(request.statusText)}
    var type = request.getResponseHeader('Content-Type');
    if(!type.match(/^text/)){
        throw new Error('Expected textual response got:'+type);
    }
    return request.responseText;
}

封装get函数

//编写一个可以进行请求同时也能够对返回的内容进行解析
function get(url,callback){
     var rq = new XMLHttpRequest();
     rq.open('GET',url);
     rq.onreadystatechange = function(){
         if(rq.readyState === 4 && rq.status ===200){
             var type = rq.getResponseHeader('Content-Type');
             if(type.indexOf('xml') && rq.responseXML){
                 callback(rq.responseXML);
             }else if(type ==='application/json'){
                 callback(JSON.parse(rq.responseText));
             }else{
                 callback(rq.responseText);
             }

         }
     }
}

对数据进行编码

function encodeFormData(data){
  if(!data) return;
  var pairs = [];
  for(var name in data){
    if(!data.hasOwnProperty(name)){ continue;}
    if(typeof data[name] === 'function') continue;
    var value = data[name];
    name = encodeURIComponent(name.replace('%20',"+"));
    value = encodeURIComponent(value.replace('%20','+'));
    pairs.push(name+'='+value);
  }
}

使用表单编码数据发起一个http post请求

//使用表单编码数据发起一个http post请求
function postData(url,data,callback){
  var request = new XMLHttpRequest();
  request.open('POST',url);
  request.onreadystatechange = function(event){
    event = event || window.event;
    if(request.readyState ===4 && callback){
         callback(request);
    }
  }
  request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  request.send(encodeFormData(data));
}

使用表单编码数据发起一个get请求

function getData(url,data,callback){
  var request = new XMLHttpRequest();
  request.open("GET",url+"?"+encodeFormData(data));
  request.onreadystatechange = function(){
    if(request.readyState ===4 && callback){
       callback(request);
    }
  }
  request.send(null);

}

使用json编码的请求发送http post 请求

function postJSON(url,data,callback){
    var request = new XMLHttpRequest();
    request.open("POST",url);
    request.onreadystatechange = function(){
      if(request.readyState === 4 && callback){
         callback(request);
      }
    }
    request.setRequestHeader('Content-Type','application/json');
    request.send(JSON.stringify(data));
}