【知了堂学习笔记】ajax工作原理
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，里面有最新的文章，欢迎来访。
