Http请求
2020-12-21 本文已影响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=>{
//获取数据后的操作
})