知了堂学习笔记ajax工作原理

Posted 2020-10-20 52闹

ajax工作原理

什么是ajax？

　　ajax 的全称是Asynchronous javascript and XML，其中，Asynchronous 是异步的意思。从全称中就可以看出AJAX = 异步 JavaScript 和 XML。

　　 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

　　使用 AJAX 的应用程序案例比如有：新浪微博、Google 地图、开心网，123rf网站等等

ajax是基于现有的Internet标准，所包含的技术

　　1.CSS和Xhtml (给数据定义样式)。

　　2. DOM（信息交互和动态显示）。

　　3.XMLHttpRequest（和服务器进行异步通信）。

　　4.javascript（绑定和调用）。

ajax原理和XmlHttpRequest对象

　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。XmlHttpRequest就是javascript可以及时向服务器提出请求和处理响应，从而不阻塞用户。达到无刷新的效果。

　　XMLHttpRequest的属性：

　　　　> onreadystatechange：每次状态改变所触发事件的事件处理程序；

　　　　> responseText：从服务器进程返回数据的字符串形式；

　　　　> responseXML：从服务器进程返回的DOM兼容的文档数据对象；

　　　　> status：从服务器返回的数字代码（状态码），比如常见的404（未找到）和200（成功）；

　　　　> status Text ：伴随状态码的字符串信息；

　　　　> readyState： 对象状态值：

　　　　　　0 (未初始化) 对象已建立，但尚未初始化，尚未调用open方法；

　　　　　　1 (初始化) 对象已建立，链接读取中，但尚未调用send方法；

　　　　　　2 (发送数据) 请求已接收读取，send方法已调用，但是当前的状态及http头未知；

　　　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误；

　　　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。

　　由于各浏览器之间存在差异，这个差异主要体现在IE和其它浏览器之间，所以创建一个XMLHttpRequest对象可能需要不同的方法。下面是我创建XMLHttpRequest对象的方法。

//获取显示文本的对象
var msg = document.getElementById("msg");
function checkUserFn(){
　　//获取要传送的对象的值
　　var username = document.getElementById("username").value

　　// 1 创建xhr对象(XMLHttpRequest)
　　var xhr = null;//创建xhr，初值为空

　　//非IE浏览器创建XmlHttpRequest对象
　　if(window.XMLHttpRequest){
　　　　xhr = new XMLHttpRequest();
　　}
　　//IE浏览器创建XmlHttpRequest对象
　　if(window.ActiveXObject){
　　　　xhr = new ActiveXObject("Microsoft.XMLHTTP");
　　}

　　//2 打开ajax链接通道，配置参数（请求方式，请求地址url，同步or异步）。
　　xhr.open("POST",url,true)；

　　  xhr.onreadystatechange = function () {
　　　　　if (xhr.readyState == 4) {

　　　　　　msg.innerHTML = "数据正在加载...";

　　　　　　　if (xhr.status == 200) {
　　　　　　　　　　document.write(xhr.responseText);
　　　　　　　}
　　　　　}
　　　}

　　　//3 发送请求

   xhr.send();

} 

　　其中要注意的是

　　　　a、向服务器提交数据的类型；

　　　　b、post和get请求的url地址和传递的参数写法不一样；

      　　 c、传输方式，false为同步，true为异步。默认为true；

　　为了增强自己对ajax的理解，写了这篇博文，把我理解的知识也分享给大家，刚开始写，有很多不足，欢迎来吐槽，指出不足，想要更详细了解，可以去http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html，很感谢这篇博文博主的详解。

       我在CSDN的新家，https://blog.csdn.net/weixin_42506342/article/details/80842385，里面有最新的文章，欢迎来访。