ajax创建及参数、优缺点分析

Ajax

“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：

• 使用XHTML+CSS来标准化呈现；
• 使用XML进行数据交换及相关操作；
• 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
• 使用Javascript操作Document Object Model进行动态显示及交互；
• 使用JavaScript绑定和处理所有数据。

1. 新建XMLHttpRequest对象

function createXHR(){
        if(typeof window.XMLhttpRequest != undefined){
            return new window.XMLHttpRequest();
        }else if(window.ActiveXOject != undefined){
        var xhr;
            var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp2.3.0','MSXML2.XMLHttp'];
            for(var i = 0; i<versions.length; i++){
                try{
                    new ActiveXObject(versions[i]);
                    break;
                }catch(e){}
            }
            return xhr;
        }else{
            throw new Error('no XHR object available');
        }
}

2. 监听readystate事件

xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readystate == 4){
        func(xhr.responseText);
    }
}

3. 打开执行URL

xhr.open(method,url,async);

method参数

• GET
• POST,需设置请求头：xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode')，再发送数据：xhr.send('framw=jd&name=zy'),
• XMLHttpRequest2定义了FormData类型的参数，可直接发送数据而不用设置请求头：

var data = new FormData();
data.append('name','zy');
xhr.send(data);

aysnc参数

• true：异步请求（默认）
• false：同步请求

4. 发送请求

xhr.send(null);

xhr.readystate详解

0：请求未初始化，还未调用open
1：服务器已建立连接，已经调用open，还未send
2：请求已接收，已经send，未收到响应
3：请求处理中，收到部分响应
4：请求已完成，收到全部响应

参数分析

• GET请求将参数跟在URL后面传递，POST则是作为HTTP消息的实体部分传递
• 由于GET将请求附加在URL后面，而不同浏览器或者操作系统对URL参数有长度限制，因此传递的数据量较小，IE对URL的限制为2038即2K+35字节
• GET请求的数据会被浏览器缓存，如账号密码，有安全问题
• 在服务器端，GET请求使用Request.QueryString获取参数，POST用Request.Form获取参数
• GET纯粹是为了请求资源，如搜索，而POST用于创建资源，例如写数据库等，

优势

每个请求都需从服务器下载整个HTML页面，即页面整体刷新，用户需要等待页面返回才能执行其他操作。

而ajax是将用户的请求交给ajax引擎，由ajax引擎向服务器异步请求数据，即直接和服务器交互，减少了无状态连接的痛苦，避免下载冗余HTML，从而提升响应速度，可使页面局部刷新且不会打断用户的操作，减少用户的等待时间。

ajax引擎是一个复杂的JavaScript应用程序，处理用户请求及和服务器交互。

缺点

• ajax下不能使用后退按钮。
• 和服务器的交互细节都在浏览器端展示，安全性相对较低
• 浏览器禁用JavaScript时将不能获取到数据