zhaolisha 2020-01-12
1. Ajax介绍
Ajax,Asynchronous JavaScript and XML,即异步的JavaScript和XML。它不是编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下,与服务器交换数据并更新部分网页的技术。
2. Ajax基本原理
发送Ajax请求到网页更新的过程可以分为3步:
//创建XMLHttpRequest对象 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("GET","test.asp",true); xmlhttp.send();
2.1 发送请求
利用JavaScript实现页面的交互功能,新建XMLHttpRequest对象,然后调用 onreadystatechange 属性设置了监听,然后用open和send方法向服务器发起请求。相当于前面python实现请求发送,此处请求发送变成JavaScript来完成。
2.2 解析内容
发送请求后, onreadystatechange 对应的方法被触发,利用xmlhttp的responseText属性可取得相应内容(html或json)。如果是json可以进行解析和转化。
2.3 渲染页面
解析完相应内容后,通过document.getElementById("myDiv").innerHTML操作,对某个元素内的源代码进行操作,元素内将呈现出服务器返回的新数据,网页内容即更新了。
整个过程实际是JavaScript向服务器发送了一个Ajax请求,然后获取新的数据,并将其解析,并将其渲染在网页中。
3.Ajax分析方法
3.1查看请求
Network中找到Type为xhr(Ajax的请求类型)的请求,该请求Request Headers中有一个信息为X-Requested-With:XMLHttpRequest,即标记了该请求为Ajax请求。