关于Ajax的认识和封装（小记）

一，Ajax 的概念

　　1，Ajax 是一种在无需重新加载整个网页（即刷新网页）的情况下，能够更新部分网页的技术。

　　2，Ajax 的全称是Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，它并不是新的编程语言，而是几种原有技术的结合体。

二，Ajax 的优势

　　1，无刷新更新数据；

　　　　Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

　　2，异步与服务器通信；

　　　　Ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

　　3，前端和后端负载平衡；

　　　　Ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

三，Ajax 的工作原理　　

　　Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

四，关于同步和异步的概念

　　异步：同时执行，也叫并发；

　　同步：按步骤顺序执行，一条一条执行；

以下是封装好的Ajax（面对对象）

var ajax = {};
//get传参方式的方法
ajax.get = function(url,fn){
    var xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            if(typeof fn=== 'function'){
                fn(xhr.responseText);
            }
        }
    }
}
//post传参方式的方法
ajax.post = function(url,data,fn){ //data : 表示访问后端的参数
    var xhr = new XMLHttpRequest();
    xhr.open('POST',url,true);
    //设置http协议的请求头
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
    xhr.send(data);  //'key=value&key=value'
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            if(typeof fn === 'function'){
                fn(xhr.responseText);
            }
        }
    }
    
}

关于Ajax的认识和封装（小记）

猜你喜欢