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
一个Ajax的例子
创建一个“获取”按钮，点击时能够获取服务器中的aaa.txt中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
分析Ajax的使用
1、使用Ajax一般分为4个步骤
（1）创建XMLHttpRequest对象
Ajax技术的核心就是XMLHttpRequest对象，这个对象在浏览器中的脚本与服务器之间充当中间人的角色。
var oAjax=new XMLHttpRequest();
不同浏览器实现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，不会停止执行代码。再或者，判断typeof XMLHttpRequest是否为undefined也可以解决问题。
（2）连接到服务器
oAjax.open('GET','aaa.txt',true);
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求
method：请求类型；GET 、POST或SEND
url：文件在服务器上的位置，这里请求的文件名是aaa.txt
async：true（异步）或 false（同步）
（3）发送请求
oAjax.send();//发送请求
（4）接收返回值
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){//读取完成
if(oAjax.status==200){
alert('成功'+oAjax.responseText);
}
else{
alert('失败'+oAjax.status);
}
}
onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行。在这个处理函数中，可以根据服务器的具体响应做相应的处理。
服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值：
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2:请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当readyState属性的值等于4时，请求已完成，且响应已就绪，读取过程完成。当然读取过程完成不代表读取成功，浏览器仍有可能读取失败，因此还需要下面的判断：
if(oAjax.status==200){}
else{}
当status=200时，表示 “OK”，读取成功；当status=404时，表示未找到页面。
关于GET和POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
（1）无法使用缓存文件（更新服务器上的文件或数据库）
（2）向服务器发送大量数据（POST 没有数据量限制）
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
关于异步与同步
这里给出本萌新最浅显的理解，结合执行栈、队列和线程等的具体解释大家可以自行百度。
异步：任务可同时执行
同步：执行完一个任务才能执行下一个任务
关于缓存
浏览器的缓存机制能使服务器响应更快和减少网络带宽消耗。但是这里出现了一个问题，先运行一下刚才的代码
我在aaa.txt里面存的是abc，所以没有问题，但当我修改文本为abc123，再次运行代码
发现还是显示abc。原因在于浏览器读取了上一次缓存的内容，无论怎么刷新，也是如此。
解决办法：用getTime()获取时间戳，使其读取当前时刻的文件
oAjax.open('GET','aaa.txt?t='+new Date().getTime(),true);
成功了！
将刚才所写的内容封装成函数调用
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);
}
}
}
}
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
