JavaScript复习笔记(1)——AJAX
基本过程
Ajax 提供异步通信和同步通信
核心为XMLHTTPRrequest(IE6不支持)
使用过程:
1.创建Ajax调用
2.向服务器发送请求open(参数1,参数2,参数3,[参数4],[参数5])
参数1:请求方式,有GET和POST两种方法,GET性能好,但是会暴露数据,且数据有上限;POST不会暴露数据,且没有传输上限。
参数2:请求URL地址,注意路径
参数3:是否异步,true为异步
参数4和5:用户名密码
3.通过open方法将调用所需数据准备好,然后通过send方法发送请求。
4.接收服务器传回数据
readyState属性反应调用状态:
0——open方法尚未被调用(uninitialized)
1——open方法已被调用(loading)
2——send方法已被调用(loaded)
3——开始回传服务器的应答(interacting)
4——请求已完成(complete)
当readyState发生变化时会触发readystatechange事件,通过事件来判断状态
服务器状态:
200——服务器正常
将Ajax调用封装为函数
1 function getHTTPObject(){ 2 var xhr; 3 if (window.XMLHttpRequest) {//IE7及以上及其他浏览器 4 xhr = new XMLHttpRequest(); 5 } else if(window.ActiveXObject){//IE6 6 xhr = new ActiveXObject("Msxml2.XMLHTTP"); 7 } 8 return xhr; 9 } 10 11 function ajaxCall(dataUrl,callback){//请求地址,回调函数 12 var request = getHTTPObject(); 13 request.onreadystatechange = function(){ 14 if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常 15 console.log(request.responseText); 16 var contacts = JSON.parse(request.responseText);//将字符串转化为JSON 17 if(typeof callback === "function"){ 18 callback(contacts);//利用回调函数处理请求结果 19 } 20 } 21 } 22 request.open("GET",dataUrl,true); 23 request.send(null); 24 }
AJAX数据格式
XML | JSON | HTML |
可扩展、符合DOM标准 | 易读、迅速灵活与平台无关、跨站容易 | 速度快、不需要解析 |
不能跨域名Ajax调用 | 语法对符号要求严格,容易被远程注入恶意脚本 | 无法精细控制 |
AJAX的易访问性
易于访问的富因特网应用程序Accessible Rich Internet Applications=ARIA
ARIA活动区域:
1.aria-atomic:当页面发生改变,屏幕阅读器根据该属性决定是否展示某个活动区域内的内容。
2.aria-busy:当活动区域内容正在更新,该值返回true;
3.aria-live:标识文档活动区域中内容变更的重要程度,off、polite、asserive
4.aria-relevant:标志单个活动区域内发生了何种变化,additions、removals、text、all
<div id="output" aria-atomic="true" aria-live="polite" aria-relevant="additions"></div>
改善用户体验
为用户的每一个操作提供反馈,告诉他们你正在用AJAX调用数据,于是修改前面的代码,橙色部分
1 function getHTTPObject(){ 2 var xhr; 3 if (window.XMLHttpRequest) {//IE7及以上及其他浏览器 4 xhr = new XMLHttpRequest(); 5 } else if(window.ActiveXObject){//IE6 6 xhr = new ActiveXObject("Msxml2.XMLHTTP"); 7 } 8 return xhr; 9 } 10 function ajaxCall(dataUrl,outputElement,callback){//请求地址,回调函数 11 var request = getHTTPObject(); 12 outputElement.innerHTML = "Loading..."; 13 request.onreadystatechange = function(){ 14 if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常 15 console.log(request.responseText); 16 var contacts = JSON.parse(request.responseText);//将字符串转化为JSON 17 if(typeof callback === "function"){ 18 callback(contacts);//利用回调函数处理请求结果 19 } 20 } 21 } 22 request.open("GET",dataUrl,true); 23 request.send(null); 24 }
后退返回
History API