<script>
function ajax(options){
// 定义一个操作对象
var pramas = {
url:'',
type: 'get',
data: {},
success: function (data) {},
error: function (err) {},
}
// 对象属性覆盖
options = Object.assign(pramas, options)
// 传入了要请求的地址才会开始做其他的事情
if(options.url){
// 拿到请求对象
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
var url = options.url, // htpp://www.baidu.com
type = options.type.toUpperCase(), // GET
data = options.data, // {name:"kk",age:12}
dataArr = []; // []
// 遍历data对象
for(let key in data){
let value = key + '='+ data[key]
dataArr.push(value)
}
// dataArr = ["name=kk","age=12"]
// 判断是否为get方式请求
if(type === "GET"){
url = url + "?" + dataArr.join('&')
// url = http://www.baidu.com?name=kk&age=12
// 初始化请求
xhr.open(type, url, true)
// 发送请求
xhr.send()
}
// 判断是否为post请求方式
if(type === "POST"){
// 初始化一个请求
xhr.open(type,url, true)
// 设置请求头
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 发送请求
xhr.send(dataArr.join('&'))
}
// 监听后台返回过来的数据
xhr.onreadystatechange = function(ev){
// console.log(ev)
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
// 如果请求成功之后,回调我们的success函数
options.success(xhr.responseText)
}else {
// 如果请求失败之后,回调我们的error函数
options.error(xhr.responseText)
}
}
}
}
ajax({
url: "https://easy-mock.com/mock/5cb68c827ccf7c060b2270da/api/newgoods",
success:function(res){
console.log("这里是ok的")
console.log(res)
}
})
</script>
网友评论