如何使用这个XMLHttpRequest?

ajax含义:async javascript and XML;是异步的JS和XML;是实现页面局部刷新的技术(是一门独立的技术)。

为什么在js内能够使用呢?是因为ajax在浏览器内内置了一个核心对象,--》XMLHttpRequest(低版本的IE浏览器没有)

步骤(背用):

1.实例化核心对象

let xhrs = new XMLHttpRequest(); //对核心对象进行实例化

//2.建立链接

//有5个参数--》ajax是异步的,

xhrs.open(请求方式,请求链接地址,同步/异步,用户名,密码)

3.发送请求

xhrs.send(请求参数),

4.获取ajax返回的数据--监听

xhrs.onreadystatechange = function() {

// 状态值=4表示成功

// console.log('改变', xhrs.readyState);

if (xhr.readystate == 4 && xhr.status == 200) {

//JSON.parse是字符串转为对象或数组的其他形式。 JSON.stringIfy是其他形式 去转换为字符串

console.log(JSON.parse(xhr.response).message);

}

}

axios 封装实例: axios fetch 基于ajax和promise进行的封装

function axios(params) {

//和上面

return new Promise((resolve, reject) => {

let xhrs = new XMLHttpRequest(); //对核心对象进行实例化

// 2.建立链接

// 有5个参数

xhrs.open(params, methods, params, url)

//3.发送请求

xhrs.send(params, data)

xhrs.onreadystatechange = function() {

// 状态值=4表示成功 // console.log('改变', xhrs.readyState);

if (xhr.readystate == 4 && xhr.status == 200) {

// JSON.parse是 console.log(JSON.parse(xhr.response).message);

resolve(JSON.parse(xhr.response))

}

}

})

}

//调用axios方法:

axios({

methods: 'get',

url: 'http://localhost:3000/api/get',

}).then(res => {

console.log(res);

})

相关推荐
福兮说5 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
凤城老人6 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)6 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan7 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_7 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
yivifu9 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
weixin_448290259 小时前
书庐开发实战教学
javascript·css·html
默_笙9 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
一木 之林10 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript
朔北之忘 Clancy10 小时前
青少年软编等考七级题解目录
开发语言·c++·青少年编程·gesp·csp·信奥赛·noi