Ajax是一种用于创建快速动态网页的技术。它是一个和业务相关的问题，是一个异步获取数据的任务。我们可以通过 jax，可以实现在不影响用户交互的情况下，向服务器发送请求并获取数据，然后使用JavaScript动态更新页面内容。
这篇文章就是为大家来介绍如何手写一个Ajax。
手写一个Ajax来获取数据
手写一个Ajax主要需要解决的就是异步变同步的问题。下面是手写Ajax的具体步骤。
- 定义一个
fetchJSONData函数，该函数接受一个URL参数。
const fetchJSONData = function(url){}
- 在函数内部，我们创建了一个Promise实例。
const fetchJSONData = function(url){
return new Promise((resolve, reject) => {}
}
- 在异步执行器函数中，我们创建了一个XMLHttpRequest实例。
const fetchJSONData = function(url){
// 在开始的时候状态为pending
return new Promise((resolve, reject) => {
// 执行器
// 耗时任务的容器
console.log('开始写ajax');
const xhr =
XMLHttpRequest
? new XMLHttpRequest()
:new ActiveXObject('Microsoft.XMLHTTP');
};
- 在
xhr.onreadystatechange回调函数中来判断请求状态。
const fetchJSONData = function(url){
// 在开始的时候状态为pending
return new Promise((resolve, reject) => {
// 执行器
// 耗时任务的容器
console.log('开始写ajax');
const xhr =
XMLHttpRequest
? new XMLHttpRequest()
:new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET',url,false)
//宏任务 事件
xhr.onreadystatechange=function(){
if(xhr.readyState !==4) return
//当请求状态为 `4` 时，说明请求已经完成。
if(xhr.status ===200||xhr.status===304){
reslove(xhr.responseText);
//如果请求成功，状态码为 `200` 或者 `304`，
那么我们使用 `resolve()` 函数将返回的数据传递给 Promise 实例
}else{
reject(new Error(xhr.responseText))
//否则，请求失败，我们使用 reject() 函数将错误信息传递给 Promise 实例。
}
}
xhr.send();
// setTimeout(() => {
// resolve('xxxx')
// }, 1000);
})
};
- 使用该函数获取数据，并使用
await关键字将异步代码转化为同步代码。
(async function(){
const p = fetchJSONData('https://icbib2-home.site.laf.run/')
console.log('');
console.log(p);
const res = await p;
console.log(p);
})()
总结
Ajax可以在不刷新整个页面的情况下，向服务器发送请求并获取数据。这使得网页能够实现动态更新，提高用户体验和页面性能。通过Ajax，可以实现实时更新数据，例如聊天应用中的消息刷新、社交媒体中的动态加载等。用户可以在不刷新页面的情况下，与服务器进行交互。Ajax技术使得网页能够实现动态、交互性和异步加载的功能，提升了用户体验，并且减少了不必要的页面刷新，提高了页面性能。
通过对Ajax进行手写可以帮助我们更好的来理解和运用Ajax。
