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调用封装为函数

  

function getHTTPObject(){
        var xhr;
        if (window.XMLHttpRequest) {//IE7及以上及其他浏览器
            xhr = new XMLHttpRequest();
        } else if(window.ActiveXObject){//IE6
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        return xhr;
}

function ajaxCall(dataUrl,callback){//请求地址，回调函数
    var request = getHTTPObject();
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常
            console.log(request.responseText);
            var contacts = JSON.parse(request.responseText);//将字符串转化为JSON
            if(typeof callback === "function"){
                callback(contacts);//利用回调函数处理请求结果
            }
        }
    }
    request.open("GET",dataUrl,true);
    request.send(null);
}

 

 

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调用数据，于是修改前面的代码,橙色部分

function getHTTPObject(){
        var xhr;
        if (window.XMLHttpRequest) {//IE7及以上及其他浏览器
            xhr = new XMLHttpRequest();
        } else if(window.ActiveXObject){//IE6
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        return xhr;
}
function ajaxCall(dataUrl,outputElement,callback){//请求地址，回调函数    
    var request = getHTTPObject();
    outputElement.innerHTML = "Loading...";
    request.onreadystatechange = function(){
        if(request.readyState === 4 && request.status === 200){//ajax请求完成且服务器状态正常
            console.log(request.responseText);
            var contacts = JSON.parse(request.responseText);//将字符串转化为JSON
            if(typeof callback === "function"){
                callback(contacts);//利用回调函数处理请求结果
            }
        }
    }
    request.open("GET",dataUrl,true);
    request.send(null);
}

 

后退返回

History API