目录
编写Ajax
首先先下载wampserver
链接:https://pan.baidu.com/s/10oLrgHJFFh5vKgAQXY_WzA
提取码:lldr
安装完后打开www文件夹会发现里面有文件,删掉就行,没什么用。
然后再www中建个txt,我命名为liang.txt
1、创建Ajax对象
有两种方法:
1、var oAjax = new XMLHttpRequest(); //只兼容非IE6的浏览器
2、var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //只兼容IE浏览器
一般照顾兼容,我们会直接用 if 语句
if (XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
这样写在IE6中会抛出错误
原因:
先举个栗子说明一下问题:
var a = 12;
alert(a);
// 输出12
var a = 12;
alert(window.a);
// 输出12
//定义的全局变量,其实就是定义window的属性
/
//当不定义a变量时,直接弹出a
alert(a);
//此时会抛出错误
//当不定义a
alert(window.a);
//输出undefined
//原因是因为输出没有定义的变量,会因为找不到这个变量而抛出错误。而输出没有定义的属性,只是会认为这个属性没有赋值,所以弹出undefined
所以 if (XMLHttpRequest) 在IE6中会抛出错误,是因为没有定义 XMLHttpRequest ,所以应该改为 if(window.XMLHttpRequest)
2、连接到服务器
open(方法, 文件名, 同步/异步传输);
oAjax.open('GET', 'liang.txt', true);
同步(false)/异步(true)?
按照我们平常的理解: 同步就是多件事一起进行,异步就是一件一件事进行
但在JS中刚好相反, 同步是一件一件事进行, 异步是多件事一起进行
一般都是异步
3、发送请求
send() : 接收一个参数,作为请求体发送的数据。如果不需要发送请求体,则必须传 null ,因为这个参数在某些浏览器中是必需的
oAjax.send(null);
4、接收返回
对于Ajax来说它是跟网络打交道的,所以涉及到一个问题,服务器发回的东西不一定多长时间能回来,有可能是一瞬间,也有可能是一分钟,也有可能需要很长一段时间,视网速而定。
Ajax实际来说是以一个事件的形式存在,当服务器的信息返回回来的时候,这个事件会被调用,很类似于原来的window.onload,但Ajax是用 onreadystatechange 。onreadystatechange 跟服务器有交互的时候,会发生的一个事件
服务端跟客户端之间的通信是分成几个步骤,可以用 readyState 判断服务器跟客户端的交互进行到哪一步了
0 :未初始化,还没调用open()方法
1 :载入,已调用send(),正在发送请求
2 :载入完成,send()完成,已收到全部响应内容
3 : 解析,正在解析响应内容
4 :完成,响应内容解析完成,可在客户端调用了
一般关心readyState=4 ,即整个交互已经完成了(读取完成)
读取完成不代表读取成功,也可能失败了,可用 status(状态码) 判断,状态码 200≤ status < 300, 或者 = 304时,响应成功
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if ( (oAjax.status >= 200 && oAjax.status <= 300) || oAjax.status === 304 ) {
alert("成功" + oAjax.responseText); // 服务器响应的文本
}
else {
aler("失败" + oAjax.status);
}
}
}
将写好的html文档存在www文件夹中,再用浏览器打开,地址栏要写localhost/xxx.html,访问本地这台机器的服务器 ,也可以用 127.0.0.1/xxx.html
缓存
此时又要说到缓存的问题:
当你打开上面的html后会弹出 成功+liang.txt里的内容。 此时你修改liang.txt的内容会发现,即使你刷新页面 ,弹出的内容也不会更新,关闭再打开网页也可能不会更新,这就是缓存导致的。所以要组织缓存
缓存的机制:根据url缓存,也就是对于同一个地址只读取一次
阻止缓存:让url一直在变 ('aaa.txt?t=' + new Date().getTime() 方法之一 ) 在文件名后面加上一个没用的t,后台不会接受这个t,仅仅是给浏览器看的
oAjax.open('GET', 'liang.txt?t=' + new Date().getTime());
总代码
<script>
window.onload = function () {
var oSub = document.getElementById('sub');
oSub.onclick = function () {
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
}
else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
oAjax.open('Get', 'liang.txt', true);
oAjax.send(null)
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if ((oAjax.status >= 200 && oAjax.status <= 300) || oAjax.status === 304) {
alert('成功' + oAjax.responseText);
}
else {
alert('失败' + oAjax.status);
}
}
};
};
};
</script>