【关于AJAX】

纵有千堆雪与长街 2022-09-23 07:40:15 阅读数:190

CSDNajaxtechnology-development

前言

浏览器输入网页以后是需要向谁获取网页资源呢?当然是向服务器了。那当浏览器渲染了页面以后,我们还想要获取更多的网页信息,那这时页面是不是又要重新刷新一次,重新渲染了,那当然是了。那如果我们不想让网页重新渲染,有办法吗?

什么是Ajax?

既然用户想要获取新的网页信息,怎么告诉浏览器这个需求呢?那肯定是操作页面来实现的,比如我们滚动页面,点击页面按钮之类的事件。那这些事件又是通过什么来设置的呢?那肯定就是我们的JS了,毕竟JS是用来操控网页的。也就是我们通过JS代码触发事件告诉浏览器我们的需求。那是不是我们就只通过JS来和服务器取得联系的呢?那不行,毕竟JS本身没有网络通讯能力。那谁有网络通讯能力,当然是浏览器了,要不然为什么会用浏览器来上网呢?那浏览器总有个规范让我们知道如何与服务器取得联系吧?那当然有的,这个规范就是内建的XMLHttpRequest构造函数,那我们就可以通过JS来操控XMLHttpRequest。XMLHttpRequest是构造函数,XMLHttpRequest就可以创建新的实例对象,XMLHttpRequest构造的对象也有自己的属性方法。我们就可以通过JS来操控XMLHttpRequest以表示新的网页请求,这样就可以和服务器进行网络沟通了。那XMLHttpRequest有很多属性和方法,既然是浏览器和服务器之间的通讯,那就涉及他们之间的协议了,也就是HTTP。知道是和HTTP相关的,也就是说有关发送和请求。那XMLHttpRequest肯定有个发送的方法,这个方法就是send()方法,这个send()方法的参数是填请求体的,我们也不能就这样发送吧,我们还需要知道请求的地址吧,也就是URL,我们也总得知道如何请求这个地址吧,比如GET还是POST。XMLHttpRequest就提供了另外一个功能,open()方法。open()方法除了接受请求类型和 URL两个参数以外,第三个参数还可以确定我们是否是异步请求。true是异步请求,false是同步请求。当然我们为了不阻塞一般就使用异步,除非你为了网页测试使用同步。定义了请求并且发送请求以后是不是就可以了。这样是不是就可以了。回答是可以也不可以。如果这样网页没有反应我们该怎么办呢?我们也确实不知道问题出在了哪里,还好http协议里面有规定状态码来表示响应的状态,也就是200,304,404这些。这些是服务器反馈过来的数字。那浏览器这边也会有类似的数字吗?那当然不甘示弱了,XMLHttpRequest有一个叫做readyState的属性,这个属性会用来记录请求响应时处于哪个过程,0表示未调用open()方法,1表示调用了open()方法,但未调用send()方法;2表示发送请求,但未收到响应;3表示收到了部分响应;4表示响应都接收完了。那有了readyState和响应状态码以后就跟能知道了问题出现在哪,而且大家知道readyState属性的数字是从头到尾在变化的,而响应状态码则是当次请求而响应的数字。那我们为了获取网页的内容,肯定是需要请求和响应成功的,也就是readyState的属性值为4的时候我们就可以把响应内容显示在页面上了。那谁来告诉我readyState的属性值什么时候为4呢?readyState属性值的变化会触发readystatechange事件,换句话说,我们可以用onreadystatechange来监视readystate属性值的变化。当获取返回的数据,再利用JS对DOM的操作实现局部页面刷新。这样就完成了。这就是Ajax的基本流程了。它并不是单一的编程语言,主要作用是可以部分刷新页面,而不用重新刷新整个网页。
在这里插入图片描述
简而言之:
Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

同步与异步的区别:
同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。
异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

如何构建Ajax?

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js" defer></script>
</head>
<body>
<p></p>
</body>
</html>
const p = document.querySelector('p');
let xhr = new XMLHttpRequest();
xhr.open('get', 'test.txt', true);
xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

p.innerHTML = xhr.responseText;
}
}
};
xhr.send(null)

我们现在就用JS来编写Ajax的过程,首先我们获取一下p标签,这样待会可以用来触发事件。JS自身没有网络沟通能力,因此我们需要创建由浏览器提供的xhr,也就是new 一下XMLHttpRequest。接着我们定义一下请求,也就是用open方法填写请求类型,URL和是否异步,这里的text.txt是我本地文件,相当于我的电脑现在是服务器。接下来监听readyState属性值的变化,当然用的是onreadystatechange了,如果readyState等于4就代表收到了所有响应了,因此我们先做if判断。虽然我们收到了所有响应,但并不代表就成功接收了文件,因为有可能文件已经没有了,但是还是属于收到了响应,我们就接着进行状态码的判断,利用xhr.status,常见的200就是表示成功,如果成功的时候我们就把p标签的内容改为接受的文本内容,responseText就表示响应返回的文本。最后只需要发送请求就好了。使用send()方法,因为在这里不需要发送请求体,所以在参数里面填写null。保存一下文件,浏览器就自动刷新了内容了。也就是只刷新了p标签里面的内容,其他都没有变化。
在这里插入图片描述

用Promise封装

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js" defer></script>
</head>
<body>
<a>点击获取图片</a>
<img>
</body>
</html>
const button = document.querySelector('a');
const image = document.querySelector('img');
function ajaxPromise() {

let promise = new Promise((resolve, reject) => {

let xhr = new XMLHttpRequest();
xhr.open('get', 'apple.gif', true);
xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304)
//状态码如果大于等于200并且小于不等于300的时候是表示成功的。状态码等于304是从浏览器缓存里获取资源也是可以接受的
{

resolve(xhr.responseURL)
} else {

reject(new Error(xhr.statusText));
}
}
}
xhr.send(null)
});
return promise;
};
button.addEventListener('click', () => {

ajaxPromise().then(responseURL => {

image.src = responseURL;
}).catch(statusText => {

console.log(statusText);
})
})

总结:

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

  • 创建XMLHttpRequest对象,即创建一个异步调用对象.
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  • 设置响应HTTP请求状态变化的函数.
  • 发送HTTP请求.
  • 获取异步调用返回的数据.
  • 使用JavaScript和DOM实现局部刷新.

详细视频请看Ajax 是什么? 如何创建一个 Ajax?

版权声明:本文为[纵有千堆雪与长街]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_40992225/article/details/127000754