[JS笔记]Ajax基础
AJAX = Asynchronous[eɪˈsɪŋkrənəs] JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。关于在eclipse上部署Tomcat服务器的文章可以参考https://blog.csdn.net/yerenyuan_pku/article/details/51830104
e.g.创建一个“获取”按钮，点击时能够获取服务器中的aaa.txt中的内容
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
var oAjax=new XMLHttpRequest();//创建ajax对象
oAjax.open('GET','aaa.txt',true);//连接服务器
oAjax.send();//发送请求
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
//读取完成
if(oAjax.status==200){
alert('成功'+oAjax.responseText);
}
else{
alert('失败'+oAjax.status);
}
}
}
}
}
script>
<body>
<input type="button" value="获取" id="btn">
body>
html>
让我们一起来分析上面的代码！
1、使用Ajax一般分为4个步骤
（1）创建ajax对象
var oAjax=new XMLHttpRequest();
但是对于“万恶”的IE6甚至IE5而言，我们又需要拿出祖传的if-else来进行兼容处理了，虽然本学渣想知道真的还有人用IE6吗…
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
oAjax=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
小知识：在这里XMLHttpRequest之前需要加上window，原因是当使用没有定义的变量（如这里直接使用XMLHttpRequest），浏览器会报错并停止执行；当用没有定义的属性（如window.XMLHttpRequest）时，浏览器会显示undefined，在判断语句中体现为false，并不会停止执行代码。
（2）连接到服务器
oAjax.open('GET','aaa.txt',true);
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求
method：请求的类型；GET 或 POST
url：文件在服务器上的位置，这里请求的文件名是aaa.txt
async：true（异步）或 false（同步）
当然这里扯到了get和post，还有异步和同步的区别，这个坑我们后面再填
（3）发送请求
oAjax.send();//发送请求
（4）接收返回值
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){//读取完成
if(oAjax.status==200){
alert('成功'+oAjax.responseText);
}
else{
alert('失败'+oAjax.status);
}
}
onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
关于readyState：
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2:请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当oAjax.readyState==4时，请求已完成，且响应已就绪，读取过程完成。当然读取完成不代表读取成功，浏览器仍有可能读取失败，因此还需要下面的判断：
if(oAjax.status==200){}
else{}
当status=200时，表示 “OK”，读取成功；当status=404时，表示“未找到页面”（这个404可太熟悉了）
OK，我们了解了创建使用Ajax的流程，先把前面挖的坑补上。
1、GET or POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
（1）无法使用缓存文件（更新服务器上的文件或数据库）
（2）向服务器发送大量数据（POST 没有数据量限制）
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2、异步与同步
这里给出本萌新最浅显的理解，结合执行栈、队列和线程等的具体解释大家可以自行百度。
异步：任务可同时执行
同步：执行完一个任务才能执行下一个任务
3、浏览器的缓存机制能使服务器响应更快和减少网络带宽消耗。但是这里出现了一个问题，先运行一下刚才的代码
![[JS笔记]Ajax基础_第1张图片](http://img.e-com-net.com/image/info8/95087da6ad0849cf809e513ab1c8cc8a.png)
我在aaa.txt里面存的是abc，所以没有问题，但当我修改文本为abc123，再次运行代码
![[JS笔记]Ajax基础_第2张图片](http://img.e-com-net.com/image/info8/8c1a86aa7d3f4a79ae03ce113a90fe80.png)
发现还是显示abc。原因在于浏览器读取了上一次缓存的内容，无论怎么刷新，也是如此。
解决办法：用getTime()获取时间戳，使其读取当前时刻的文件
oAjax.open('GET','aaa.txt?t='+new Date().getTime(),true);
![[JS笔记]Ajax基础_第3张图片](http://img.e-com-net.com/image/info8/05c2d56f91824017a6ed5f418b6c7f9a.png)
成功了！
将刚才所写的内容封装成函数，这样我们就可以随意调用了
function ajax(url,funSucc,funFail){
var oAjax=new XMLHttpRequest();//创建ajax对象
oAjax.open('GET',url+'?t='+new Date().getTime(),true);//连接服务器
oAjax.send();//发送请求
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
//读取完成
if(oAjax.status==200){
funSucc(oAjax.responseText);
}
else{
if(funFail())
funFail(oAjax.status);
}
}
}
}