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);
}
}
}
}