AJAX详解
一.什么是a.j.a.x?
AJAX
A:Async(异步);
J:javascript;
A:and
X:XML
异步
客户端和服务器的数据交互,不需要整个页面刷新,只需要将操作的这一部分更新一下这就叫做局部刷新
AJAX一般都是来请求页面的部分数据,在将获取出来的数据绑定到页面指定位置
AJAX如何使用
四步:
一.创建一个XHR的异步对象(这种方式不兼容iE6级以下版本,需要做兼容)
var xhr=new XMLHTTPRequst;二.打开一个URL地址并请求(发送请求之前的配置)
open([请求方式],[API借口],[设置同步异步],[user name],[User Pass])
[请求方式]:
GET系列:GET/DELETE/HEAD
post系列:POST/PUT[User Name]:用户名
[User Pass]:用户密码
有些服务器为了安全考虑,只允许部分人可以访问,就只给部分人分配权限,访问时需提供安全密钥,一般的服务器就不需要这么麻烦,匿名访问就可以,所以只需要传三个参数即可三.监听不同状态进行不同的业务操作
onreadystatechange()
xhr.readyState:AJAX状态:
0:unSend 未发送,刚开始创建一个AJAX实例
1:opened 已经打开 第二步open("get",url,true)
2:headers_received客户端已经收到服务器的响应头了
3:loading服务器返回的响应主体正在传输
4done 服务器返回的响应主体已经被客户端接収xhr.status HTTP状态 通过这个状态码可以知道这个HTTP事物是否成功,以及失败的原因
[2开头]:表示成功
200:OK
[3开头]:也表示成功,只不过这个过程经过了特殊处理
301:Moved Permanently永久重定向
比如:访问http://www.360buy.com
会默认跳到https://www.jd.com
302:Moved temporarily 临时重定向
在新版HTTP协议中代表临时转移,多用于服务器的负载均衡
304:**Not Modified获取的是缓存中的数据(网站优化性能的重要手段我们一般将一些不怎么变的静态资源JS/CSS/IMG等 大部分都会做成304 以后直接从缓存中那出就可以) **
[4开头]代表错误,而且一般都是客户端的错误
400:Bad Request 请求参数错了
401:Unauthorized 无访问权限
403:Forbidden 请求接收到了但是并么有返回正常的结果,也没有原因
404:Not Found 请求地址不存在或找不到
413:客户端传给服务器的内容超过了服务器接受的范围
[5开头]服务器问题
500
503
xhr.reponse:获取响应主体一般不用
xhr.responsrText:获取响应主体内容,是text(字符串)格式的
xhr.reponseXML:获取响应主体内容,是XML格式的
xhr.getResponseHeader("Data"):获取响应头的指定内容
xhr.getAllResponseHeaders:获取所有响应头
xhr.timeout:设置请求超时的时间,比如设置的是3s,超过3s就算请求失败,并且如果请求超时就会触发ontimeout事件
xhr.abort():中断当前AJAX请求一旦中断请求就会触发onabort事件
xhr.setRequestHeader([key],[value]):设置请求头信息四.发送send( )
AJAX这件事是从send开始的,之前都是做准备工作
[面试题]:
Q:get系列和post系列有什么区别?
A:第一传参方式不同,[get]参数是直接放在URL里面,而[post]则是放在请求主体里面.
A:第二[get]方式极易出现缓存,而[post]不会
[原因:get是通过URL的?问号后面拼接参数的方式传给服务器数据的,如果当前传的参数跟上一次一样了,浏览器就会为了性能就会从还没销毁的缓存中提取数据,因为你请求的是同一个url,灰灰把之前的返回给你,这样有些需求是不可以的,比如我想实时获取及时消息,时效性较强的如股票信息,就不能走缓存]
[清除缓存:原理是保证每次url都是不同的,这就可以给每个url后面拼接一个变量=随机数/时间戳]
xhr.open("get","/userInfo?name=xxx&age=100&_="+Math.random());
xhr.open("get","/userInfo?name=xxx&age=100&_="+(new Date).getTime());
A:第三[get]参数有大小限制(谷歌:8KB,火狐7KB,IE 2KB)如果参数过多就会因为URL长度限制而被截取,而[post]因为是放在请求主体里面所以没有限制,适合传多个参数
[在真实项目中为了保证上传速度,一般限制100KB以内]
A:第四[get]因为参数是在URL中是暴露在外的,所以没有安全性可言,而[post]参数写在请求主体中[控制台看不到]且可加密所以相对较为安全一些.
