前言
Ajax（Asynchronous JavaScript and XML）是一种网页开发技术，能够在不刷新整个页面的情况下实现局部数据更新与交互。它结合JavaScript、XML及其他Web技术，与服务器异步交换数据，提升了用户体验，使得网页更加快速动态。
1.底层原理
例如，如果我们要想获取后端传输的电影列表，我们可以怎么做呢？
bash
<button id="btn">获取电影列表</button>
<ul id="list">
</ul>其实我们的html部分就两样东西，一个用作添加点击事件，一个用来接收获取信息。
xml
<script>
let btn = document.getElementById('btn')
let ul = document.getElementById('list')
btn.addEventListener('click', () => {
// 朝一个接口发请求， 获取到数据展示到页面上
// 创建一个ajax实例
let xhr = new XMLHttpRequest()
xhr.open('GET', '这里填入你所获得后端地址', true) // 配置发送的参数
xhr.send()
xhr.onreadystatechange = () => {// 监听请求的过程
if (xhr.readyState == 4 && xhr.status == 200) {// 拿到了后端返回的数据
// console.log(JSON.parse(xhr.responseText))
// 展示在页面上
const movieList = JSON.parse(xhr.responseText).movieList
for (let i = 0; i < movieList.length; i++) {
const li = document.createElement('li')
li.innerHTML = movieList[i].nm + '--' + movieList[i].star
ul.appendChild(li)
}
}
}
})
</script>我们的JavaScript部分让我来为大家详细讲解。
- 首先我们要获取列表和点击按钮。
- 然后开始绑定点击事件。
- 我们首先创建一个ajax实例。
xhr.open: 这个方法初始化一个新的HTTP请求。它属于XMLHttpRequest对象（在这里简写为xhr），这是执行Ajax操作的核心对象。'GET': 这里指定了请求的方法。GET是最常见的HTTP方法之一，用于从服务器获取资源。其他方法如POST、PUT、DELETE等也可根据需求使用。'这里填入你所获得后端地址': 这部分需要替换为你实际要请求的后端接口URL。这个URL告诉浏览器向哪个服务器地址发送请求来获取数据或进行操作。true: 这个布尔值参数表示请求是否异步。设置为true意味着这是一个异步请求，即脚本不会等待服务器响应就继续执行，这对于提升用户体验非常重要，因为用户可以在数据加载的同时继续与页面交互。如果设为false，请求会变为同步，这将阻塞浏览器直到请求完成，但现在已很少使用同步请求，因为它们会导致页面失去响应。- 然后我们发送请求。
- xhr.onreadystatechange = () => {...} 这里是给
xhr对象的onreadystatechange事件绑定一个函数。每当readyState属性改变时，这个函数就会被调用。readyState有5个可能的值（0到4），分别代表请求的不同阶段，当其变为4时，表示请求已完成（不管是成功还是失败）。 readyState -- ajax的状态 0 -- xhr 刚创建 1 -- open 执行 2 -- 请求已经发送，响应头被接收 3 -- 响应体正在接收 4 -- 解析完成 if (xhr.readyState == 4 && xhr.status == 200) {...}: 这个条件判断确保了只有当请求完成（readyState == 4）且服务器响应状态为200（即成功）时，才执行大括号内的代码。200状态码表明请求已成功被服务器处理，并返回了预期的响应。JSON.parse(xhr.responseText): 这行代码将从服务器接收到的响应文本（以字符串形式存在responseText属性中）解析成JavaScript对象。通常，Web服务会以JSON格式返回数据，因为它易于人阅读，同时也方便程序处理。- 接下来的代码处理并展示从服务器返回的电影列表数据。首先，通过
JSON.parse(xhr.responseText).movieList获取到电影列表数组。然后，使用循环遍历这个数组，为每个电影创建一个<li>元素，并将其标题（.nm）和评分（.star）信息填充进去。最后，将这些<li>元素追加到页面上的一个<ul>元素（由变量ul表示）中，从而实现将数据动态展示在页面上的效果。
我们这里的效果是这样的
2.jquery
在了解了上面的操作方法之后我们可以了解一种更为简便的方法，引入jquery库。
html部分不变，我们首先头部引入jquery库。里面提供了非常多好用的方法。
xml
<script>
let btn = document.getElementById('btn')
let ul = document.getElementById('list')
btn.addEventListener('click', () => {
$.ajax({
url: '后端传入地址',
method: 'GET',
data: {
username: '笑笑',
age: 18
},
success: function (res) {
console.log(res)
}
})
})
</script>执行过程如下
- 首先，通过
document.getElementById获取两个页面元素：按钮（btn）和无序列表（ul）。 - 然后，为按钮（btn）添加了一个点击事件监听器，当按钮被点击时，会触发匿名函数内部的代码。
- 在这个匿名函数中，使用了
$.ajax方法来发送一个Ajax请求。这是jQuery提供的一个非常便捷的方法来处理Ajax通信。 url: '后端传入地址'指定了请求的目标服务器地址，你需要将其替换为实际的后端API地址。method: 'GET'指定了请求的方法为GET。如果是向服务器提交数据，你也可以使用POST、PUT等其他HTTP方法。data: {username: '笑笑', age: 18}部分是在发送GET请求时附带的数据。虽然GET请求通常将参数附加在URL上，但jQuery会自动处理这些细节。这里的例子是模拟发送用户名"笑笑"和年龄18到服务器。success: function (res) {console.log(res)}是一个回调函数，当Ajax请求成功完成（即服务器响应状态码为2xx），这个函数会被调用。res参数包含了服务器返回的数据，在这个例子中，只是简单地将响应内容打印到控制台。
结果如下
控制台直接打印获取的对象
后端接收到了我们的传入参数
怎么样，是不是比自己手写的要更方便呢？
3.更好用的方法
jquery现在已经被很多人抛弃，有一种更为好用的官方提供的方法我介绍给大家。
xml
<script>
let btn = document.getElementById('btn')
let ul = document.getElementById('list')
btn.addEventListener('click', () => {
fetch("后端地址?username='艾总'&age=18")
.then((res) => {
// console.log(res)// 响应体
return res.json()
})
.then((data) => {
console.log(data)
})
})
</script>这里我们既不需要引入jQuery库，也不需要手写请求，怎么样，是不是更方便了呢？
执行过程如下
- 首先，通过
document.getElementById获取页面上的按钮（btn）和无序列表（ul）元素。 - 给按钮添加了一个点击事件监听器，当按钮被点击时，执行箭头函数内的代码。
- 使用
fetch函数发起一个GET请求到指定的"后端地址"。这里直接在URL后面拼接查询字符串（username='艾总'&age=18）来传递参数，这种方式适用于GET请求。 fetch返回一个Promise，该Promise在HTTP响应可用时解析（即使响应是HTTP错误状态）。第一个.then处理这个Promise的解决结果，即响应对象（res）。- 第一个
.then中，res.json()将响应体转换为JSON格式的Promise。这是必要的，因为原始的响应是一个流，而.json()方法会读取这个流并解析为JavaScript对象。 - 第二个
.then处理res.json()返回的Promise，此时的data变量就是从服务器得到并解析后的JSON数据。在这个例子中，只是简单地将这个数据打印到控制台。
我们打印结果如下
后端接受数据如下
