当前位置：首页 > news >正文

东莞外贸网站设计网页qq邮箱登录入口官网

news 2025/9/17 0:35:13

东莞外贸网站设计,网页qq邮箱登录入口官网,网页传奇哪个最好玩,最新版wordpressXMLHttpRequest基本使用 1.XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来了的 2.用xhr发起get请求创建xhr…

XMLHttpRequest基本使用

1.XMLHttpRequest（简称xhr）是浏览器提供的 JavaScript对象，通过他它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来了的

2.用xhr发起get请求

创建xhr对象
调用xhr. open（）函数
调用xhr. send（）函数
监听xhr.onreadystatechange事件

3.使用xhr发起post请求

创建xhr对象
调用xhr. open（）函数
设置Content-Type属性（固定写法）
调用xhr.send（）函数,同时指定要发送的数据
监听xhr.onreadystatechange事件

XMLHttpRequest - 基础使用

AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理

语法：

案例：获取所有省份列表并展示到页面上

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p></p><script>// 1.创建xhr对象const xhr=new XMLHttpRequest()// 2.设置请求方法，请求urlxhr.open('get','http://hmajax.itheima.net/api/province')// 3.监听loadend事件，接收响应结果xhr.addEventListener('loadend',()=>{// 将返回的json结果转化成js数组const res=JSON.parse(xhr.response)console.log(res)// 插入p标签,在数组每个元素后加入<br>document.querySelector('p').innerHTML=res.list.join('<br>')})//4.调用方法xhr.send()</script></body>
</html>

XMLHttpRequest数据提交

<body><button class="reg-btn">注册用户</button><script>/*** 目标：使用xhr进行数据提交-完成注册功能* POST http://hmajax.itheima.net/api/register* Body 参数(application/json)* username* password*/document.querySelector('.reg-btn').addEventListener('click', () => {// 1. 创建 xhr 对象const xhr = new XMLHttpRequest()// 2. 设置请求方法和 urlxhr.open('post', 'http://hmajax.itheima.net/api/register')// 3. 监听 loadend 事件获取响应xhr.addEventListener('loadend', () => {const res = JSON.parse(xhr.response)console.log(res)})// 4. 设置请求头// 参数1: 键// 参数2: 值xhr.setRequestHeader('Content-Type', 'application/json')// 5. 发请求 -> 携带参数const user = {username: 'mrdrager123',password: '123456'}//将数据转化为json格式xhr.send(JSON.stringify(user))})</script>
</body>