【ajax核心01】ajax底层原理

目录

一:XMLHttpRequest对象

二：如何使用XHR

步骤：

注意：

三：XMLHttpRequest-请求参数

1 定义：

2 案例练习

前端HTML结构：

JS代码

四：XMLHttpRequest-数据提交

核心

 五：如何赚钱

一:XMLHttpRequest对象

节选自MDN网站

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

axios函数内部采用XMLHttpRequest对象与服务器交互

二：如何使用XHR

步骤：

1. 创建XMLHttpRequest对象
2. 配置请求方法和请求url地址
3. 监听loadend事件，接收响应结果
4. 发送请求

注意：

利用底层XHR对象获取数据，返回的是对象结构的json字符串，如下图所示。要利用JSON.parse(xhr.response)将对象结构的字符串转化为JS对象

而利用axios，会将返回的数据（json字符串）转换回JS对象

三：XMLHttpRequest-请求参数

1 定义：

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

利用axios函数携带查询参数，只需要配置params属性。但是XHR对象携带查询参数，需要在配置的url后面利用拼接方式携带

其使用方式利用模板字符串为其赋值

2 “查”案例练习

需求：输入省份名字和城市名字提交给服务器后，查询到对应的地区列表