避免转眼忘记,简单的记录一下今天自己学习的Ajax,便于理解运用记忆
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
首先得有一个服务器软件,我自己用的AppServ,这个可以在网上随便下载,用你喜欢的。安装好之后,在这个软件文件夹里会有个www的文件夹,里面用来存放自己的项目代码,在这个目录里面的项目代码可以用浏览器访问:http://localhost ,这是访问本机的,和127.0.0.1 用意大概一样的,
访问:http://localhost ,会显示www文件夹里面的项目代码,下面这个是我的,这个里面的内容是可以自定义。
先写个已经封装好的Ajax的js函数文件和html文件,再慢慢解析理解。
function ajax(url, fnSucc, fnFaild){
//1.创建Ajax对象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}
else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange=function () {
if(oAjax.readyState==4){ //读取完成
if(oAjax.status==200){ //成功
fnSucc(oAjax.responseText);
}
else{
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}
<body>
<input id="btn1" type="button" value="读取" />
</body>
<script src="ajax.js"></script>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
ajax('a.text?t='+new Date().getTime(), function (str){
alert(str);
});
};
</script>
当我点击页面上的id名为botn1的按钮,会获得当前相对目录找到一个名字a.txt的文档,就是www目录下,然后alert出里这个txt文档的数据。
首先先来理解:
function ajax(url, fnSucc, fnFaild){};
url , 指的是你需要获得哪个文件;
fnSucc , 指的是接收返回成功所要执行的代码;
fnFaild, 指的是接收返回失败所要执行的代码;
1. 创建Ajax对象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}
else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
new XMLHttpRequest() 方法, 就可以创建一个Ajax对象。
同时这里也做了一个if判断,做了一个兼容处理,在浏览器里输出oAjax的类型,会得到一个[object XMLHttpRequest]的对象,但在万恶的IE6里,会报错。
ActiveXObject(“Microsoft.XMLHTTP”), 这个插件会兼容IE6, 不会报错,但是这个只支持IE,不支持其它浏览器,所以在这里做个if判断。
在这里有一点要说明一下:
var a=10;
alert(a); //得到10
alert(window.a) //同样得到10
----------
//如果不声明,直接alert 变量a
alert(a); //直接报错
alert(window.a) //undefined 未定义
JS有这样个特性,用没有定义的变量会报错;用没有定义的属性,会告诉你undefined。所以上面的代码中,XMLHttpRequest如果定义了就没问题,执行下面的代码,但在IE6里面没有定义,会导致报错,所以在前面添加window,使其变成属性,得到结果undefined, 等同false,执行else下面的代码。
2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true);
提交方法,有两种:
一个是 get 方式, 会把得到的数据放入网址;一般为“名字=值&名字=值…..“这样的方式出现在网址后缀,容量小,安全性非常差,有缓存,用于获取数据,比如浏览帖子。
一个是 post 方式,会通过http Content ,可以在Network里面访问到提交的数据,这样的方式容量大,安全性稍微高一些,无缓存,用于上传数据,比如用户注册。
url 文件名,用绝对路径,或者相对路径直接输出文件名 ,比如 a.txt。
异步传输,指的就是同步传输多个文件,true 表示。
同步传输,指的就是一个一个传输文件,false表示。
3.发送请求
oAjax.send(); //直接调用这个方法即可
4.接收返回
oAjax.onreadystatechange=function () {
if(oAjax.readyState==4){ //读取完成
if(oAjax.status==200){ //成功
fnSucc(oAjax.responseText);
}
else{
if(fnFaild){
fnFaild(oAjax.status);
}
}
}
};
}
oAjax.onreadystatechange()方法 ,指从服务器接收返回信息,这个时间长短由网速决定,当接收到返回信息就会调用这个方法,等同window.onload。
oAjax.readyState事件 , 指的是浏览器和服务器进行到哪一步了。
readyState属性:请求状态
- 0 (未初始化)还没有调用open()方法;
- 1 (载入)已经调用send()方法;
- 2 (载入完成)send()方法完成,已经收到全部响应内容
- 3 (解析)正在解析响应内容
- 4 (完成)响应内容解析完成,可以在客户端调用了
比如,在open() 方法前面,调用alert(oAjax.readyState)会得到数字0。
所以,做出if判断,当if(oAjax.readyState==4),所有内容读取完成,执行下面代码,但完成不代表成功,无论是文件出错或是文件不存在,都会返回4。
oAjax.status==200 , 判断是否读取成功,200代表内容读取成功,若是文件不存在会有404报错。
oAjax.responseText, 指的就是读取的数据内容。
ps:假若从服务器读a.txt文档,还需要改变字符编码集,统一为UTF-8,否在在浏览器里面显出会出现乱码情况。
还有一个关于Ajax的缓存机制,拿上面的例子来说,点击浏览器按钮读取a.txt,读取内容为 “哈哈哈”,然后在改变a.txt文档内容为 “我改变了”,再去刷新浏览器,点击按钮读取a.txt,会发现读取内容还是“哈哈哈”,等待很久之后才会改变,这就是缓存问题。
如何解决:在 a.text后面加上?t=’+new Date().getTime()
oBtn.onclick=function (){
ajax('a.text?t='+new Date().getTime(), function (str){
alert(str);
});
};
理解:在一般网页会看见一些后缀,比如:
https://www.baidu.com/s?cl=2&tn=baidutop10&fr
更改?后面的值并不会改变网页内容。
new Date().getTime() 返回到70年到现在的毫秒数,每一次点击按钮都会有不一样的数字,都会更改当前URL后面的数字,跟着文件的变化跟着变化,不会受到缓存的干扰。