Ajax的原理和解析

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

Ajax 即异步的 JS 和 XML

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

发送请求

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