AJAX（详细解析步骤）_ajax教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_59541478/article/details/126591011

1.AJAX的定义

它是一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互，主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

简单总结：是异步的JavaScript和XML，用于创建更好更快以及交互性更强的web应用开发技术，独立于Web服务器软件的浏览器软件技术，用于在web浏览器和web服务器之间来发送和接受数据（即前后端交互），使用异步数据传输（HTTP请求）。它的缺点是搜索引擎支持度不够，因为数据都不在页面上。

2.HTTP

通常HTTP不在脚本的控制下，当用户点击链接提交表单和输入URL时才发生

1.HTTP请求：HTTP请求方法或动作

正在请求的URL

请求头集合，其中可能包含身份验证信息

请求体（可选）

2.HTTP响应

一个数字和文本组成的返回码，用来显示请求的成功或失败

一个响应头集合

响应体

3.XMLHttpRequest使用方法

1.创建XMLHttpRequest对象

var request=new XMLHttpRequest()

2.使用open方法设置和服务器的交互信息：open(),指定请求方法get/post（主要这两个）/head/delete/put

get:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有副作用，服务器的响应可缓存。

post:用于HTML表单提交，在请求主体中包含额外数据，这些数据通常存在服务器的数据库上，相同的post请求从服务器上得到的响应可能会不同，不应该缓存使用这个方法的请求。

URL请求的主体，是相对于文档的URL，跨域请求会报错

Boolean类型的值值为false代表同步请求，send方法将被阻塞直到请求完成，参数为true或省略为异步。

request.open('get','接口地址')

3.设置requestHeader()

ajax中，需要像html表单那样post数据，要用setRequestHeader()方法来添加HTTP开头，然后在send()方法中规定需要发送的数据，setRequestHeader()方法在open()和send()方法之间调用

request.setRequestHeader(属性名称，属性值)

常用数据格式：

1.发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8')

2.发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8')

3.发送纯文本（不指定Content-type时直接默认值）

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8')

4.发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8')

4.设置发送的数据，开始和服务器端交互

send()

请求主体内容，如果没有就直接省略或者为null

request.send()

5.取得响应，注册事件

发送请求将会收到响应，XHR对象以下属性将会被填充上数据

1.responseText：作为响应体返回的文本。

2.responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

3.status：响应的 HTTP 状态。

4.statusText：响应的 HTTP 状态描述。

5.readyState：返回HTTP请求状态

6.readystatechange 请求状态改变事件当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

下面通过get有参请求举例一下获取全国各城市的天气：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./qs.js"></script>
</head>

<body>
    <!-- 输入框 -->
    <input type="text" name="" id="inp">
    <!-- 获取数据的按钮 -->
    <button onclick="getWeatherData()">获取天气数据</button>
    <script>
        // 获取用户输入的值
        var inp = document.getElementById('inp')
        var cityName;
        inp.oninput = function() {
                cityName = this.value
            }
            // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
        function getWeatherData() {
            var request = new XMLHttpRequest()
                // 第一种方式 拼接字符串
                // request.open('get','https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
                // 第二种方式 封装参数对象
            var params = {
                city: cityName,
                type: 1,
                api_key: '779d7e46708290a5'
            }

            request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
            request.send()
            request.onreadystatechange = function() {
                if (request.readyState === 4 && request.status === 200) {
                    console.log(request.responseText);
                    var res = JSON.parse(request.responseText)
                    console.log(res);
                    alert(`${cityName}的温度是${res.data.temp}`)
                }
            }
        }
    </script>
</body>

</html>

其中qs文件需要引入