AJAX(4)——XMLHttpRequest

XMLHttpRequest

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

关系：axios内部采用XMLHttpRequest与服务器交互

使用XMLHttpRequest

步骤：

创建XMLHttpRequest对象
配置请求方法和请求URL地址
监听loadend事件，接收响应结果
发起请求

<body><script>const xhr = new XMLHttpRequest()//配置请求地址xhr.open('GET', 'http://hmajax.itheima.net/api/province')//监听loadend，接收响应结果xhr.addEventListener('loadend', () => {console.log(xhr.response);   获取响应数据const data = JSON.parse(xhr.response)    //转换为对象console.log(data.list);})//发起请求xhr.send()</script>

查询参数

语法：

http://xxx.com/xxx/xxx?参数名=值1&参数名=值2

    const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')xhr.addEventListener('loadend', () => {console.log(xhr.response);})xhr.send()

XMLHttpRequest数据提交

请求头设置Content-Type:application/json

请求体携带JSON

    //XHR数据提交document.querySelector('.btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response);})//设置请求头xhr.setRequestHeader('Content-Type', 'application/json')const obj = {username: 'itheima908',password: '765421'}const str = JSON.stringify(obj)//设置请求体,发送请求xhr.send(str)})