<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>
ajax 封装原生请求
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- W3C官方文档 https://www.w3school.com.cn/ajax/index.aspMDN htt...
- 前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页...
- 原生ajax写法-原生ajax请求-原生ajax实例 下面是来自百度百科的理解: Ajax 即“Asynchron...