美文网首页
Http请求

Http请求

作者: 衣裳云墨 | 来源:发表于2020-12-21 07:39 被阅读0次

1、AJAX封装

function ajax(method,url,params,callback) {
 //对参数进行处理
 method=method.toUpperCase()
 let post_params=null
 let get_params=''
 
 if (method==='GET') {
  if (typeof params==='object') {
   let tempArr=[]
   for (let key in params) {
    tempArr.push(`${key}=${params[key]}`)
   }
   params=tempArr.join('&')
  }
  get_params=`?${params}`
 } else {
  post_params=params
 }

 //发请求
 let xhr=new XMLHttpRequest()

 xhr.onreadystatechange=function(){
  if (xhr.readyState!==4) return
  callback(xhr.responseText)
 }

 xhr.open(method,url+get_params,false)
 if (method==='POST')
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

 xhr.send(post_params) 
}

ajax('get','https://www.baidu.com',{id:15},data=>console.log(data))

2、JSONP

function jsonp(url, params_obj, callback) {
 //创建一个供后端返回数据调用的函数名
 let funcName = 'jsonp_' + Data.now() + Math.random().toString().substr(2, 5)

 //将参数拼接成字符串
 if (typeof params==='object') {
  let temp=[]
  for (let key in params) {
   temp.push(`${key}=${params[key]}`)
  }
  params=temp.join('&')
 }

 //在html中插入<script>资源请求标签
 let script=document.createElement('script')
 script.src=`${url}?${params}&callback=${funcName}`
 document.body.appendChild(script)

 //在本地设置供后端返回数据时调用的函数
 window[funcName]=data=>{
  callback(data)

  delete window[funcName]
  document.body.removeChild(script)
 }
}

//使用方法
jsonp('http://xxxxxxxx',{id:123},data=>{
 //获取数据后的操作
})

相关文章

  • 【HTTP】HTTP请求

    1、HTTP协议通信流程: 2、HTTP请求包含内容 一个HTTP请求报文由请求行(request line)、请...

  • 动脑学院架构篇-HTTP请求、响应报文格式

    【HTTP】HTTP请求、响应报文格式 HTTP请求报文格式: HTTP请求报文主要由请求行、请求头部、请求数据3...

  • IDEA自带http请求工具

    编辑http请求文件(文件名后缀为.http) GET请求 POST请求 执行http请求 查看http结果

  • HTTP

    HTTP简介 HTTP请求格式 HTTP规定,HTTP请求由如下3部分构成 请求方法、URI和HTTP的版本 请求...

  • HTTP协议报文及Chrome Network常用功能

    HTTP协议报文 Http协议报文分为【Http请求报文】和【Http响应报文】 HTTP请求报文 Http请求报...

  • HTTP 请求

    Code=-999 错误400 ------参数错误网络请求出现Code=-1022

  • http请求

    Request 请求行。 Method+URL+Version 请求头。 字段名+字段值----+请求内容 R...

  • http请求

    ajax原生 angular rxjs

  • http 请求

  • Http请求

    首先让我们从一个问题入手,当我们在浏览器中输入http://www.baidu.com/访问百度的时候浏览器做了哪...

网友评论

      本文标题:Http请求

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