关于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);
}
}
} }
上一篇:运行maven命令的时候出现jre不正确


下一篇:Ubuntu中安装配置和卸载FTP(转)