前端学习之AJAX原理

首先AJAX = 异步 JavaScript 和 XML。AJAX是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。那么它的原理是什么样的呢？这里我们直接进入正题。

AJAX的原理主要分为三步：
第一步：创建XMLHttpRequest对象（XMLHttpRequest 用于在后台与服务器交换数据）**
主要代码如下：
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}

第二步：向服务器发送请求(请求方式，url，是否是异步）
主要代码如下：
xmlhttp.open(“GET”, “./test.json?name=zs”, true);
xmlhttp.send();
或
xmlhttp.open(“POST”,“ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=zs”);
（POST要多设置一个请求头，POST url中不能写参数 GET能,POST参数写在send里）
这里就可能会延伸出一个问题GET和POST的区别
我在这里总结了几点：
1）都是HTTP请求的方式
2）GET是请求POST是提交
3）GET请求数据量小,POST很大
4）GET可以缓存，POST不能
5）一般获取数据用GET，一般表单提交用post
6）GET请求参数放在地址栏中不太安全，POST放在包体里相对安全

第三步：服务器响应
主要代码如下：
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
}
这里可以了解一下状态值和状态码
状态值
readState 0-4:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
常见状态码：
200（“OK”） 成功 一切正常
500 服务器方面的问题
503服务器不可用
404 找不到资源
301永久重定向
302临时重定向
304缓存
总之AJAX主要原理就是如上三步，有些不足之处请大家多多包涵。