Ajax的原理和解析

t_hj2025-05-10 11:54

网页的原始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请求然后获取新的微博数据，将其解析，并渲染在网页中的过程