Ajax的原理和解析

网页的原始HTML文档不会包含任何数据 数据都是通过Ajax统一加载后再呈现出来的

Ajax 即异步的 JS 和 XML

利用JS在保证页面不被刷新 页面链接不改变的情况下与服务器交换数据并更新部分网页的技术

发送请求

javascript 复制代码
var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();

解析过程

得到响应后,onreadystatechange属性对应的方法会被触发

此时利用xmlhttp的responseText 属性便可取到响应内容

类似于python中利用requests向服务器发起请求,然后得到响应的过程

返回的内容可能是HTML,也可能是JSON,接下来只需要在方法中用JS进一步处理即可

渲染网页

通过document.getElementByld().innerHTML 这样的操作对某个元素内的源代码进行更改,这样网页显示的内容就改变了 这种对Document网页文档进行如更改、删除等操作也被称作DOM操作

document.getElementByld("myDiv").innerHTML=xmlhttp.responseText

将ID为myDiv的节点内部的HTML代码更改为服务器返回的内容

这样myDiv元素内部便会呈现出服务器返回的新数据

网页的部分内容看上去就更新了

比如微博的下拉刷新

就是JS向服务器发送了一个Ajax请求然后获取新的微博数据,将其解析,并渲染在网页中的过程

相关推荐
云枫晖1 分钟前
Webpack系列-Entry入口
前端·webpack
mustfeng6 分钟前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia26 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙1 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户6600676685391 小时前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
用户433845375691 小时前
Promise深度解析,以及简易版的手写实现
前端
十年_H1 小时前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
梦之云1 小时前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
UIUV1 小时前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript