Ajax
一句话,Ajax其实是利用JS代码通过BOM编程来请求服务器的数据,然后再对这些数据进行解析后,通过DOM编程来使得这些数据回显到用户页面
Ajax简介
- AJAX = Asynchronous JavaScript and XML(异步的javaScript和XML)
- AJAX是一种使用现有标准的新方法
- 其最大优点是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容
- AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行
- XMLHttpRequest只是Ajax的一种方式
Ajax工作原理
- 当浏览器发生某个事件后创建XMLHttpRequest对象,通过Internet发送HttpRequest请求到服务器
- 服务器处理HttpRequest请求后创建响应并将数据返回给浏览器
- 浏览器接收到服务器的响应后使用JS处理被返回的数据,然后更新页面内容
原生实现ajax
回调函数
回调函数作为处理异步操作的方式,它允许程序再等待某些操作完成时继续执行其他任务,不必阻塞整个程序
一旦异步任务完成,系统会调用预先定义好的回调函数来处理异步操作的结果
当有多个异步请求时可以使用Promise来进行响应的区分
使用回调函数实例
<script>
function loadXMLDoc(){
//创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
//回调函数处理响应结果
//通过设置 onreadystatechange 事件处理程序来监听请求的状态变化
xmlhttp.onreadystatechange = function(){
//检查XMLHttpRequest对象的readyState和status属性。
//readyState为4表示请求已完成,status为200表示服务器响应成功。
if(xmlhttp.readyState ==4 && xmlhttp.status ==200){
//将服务器返回的响应文本赋给页面上id为"myDiv"的元素的innerHTML属性
//responseText存放的是响应体中的数据
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
//设置请求方式和请求的资源路径
//第一个参数为请求方式,第二个为请求地址,第三个为是否异步请求
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
//发送请求
xmlhttp.send();
}
</script>
使用Promise实例
function fetchData(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(xhr.statusText);
}
};
xhr.send();
});
}
fetchData('url1')
.then(data => {
// 处理第一个请求的数据
console.log(data);
})
.catch(error => console.error('Error:', error));
fetchData('url2')
.then(data => {
// 处理第二个请求的数据
console.log(data);
})
.catch(error => console.error('Error:', error));