概述

AJAX英文全写为”Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。AJAX技术的流行得益于Google的大力推广,Google早期在自己的很多产品中就使用了AJAX技术技术,像Google Earth、Gmail,虽然AJAX是因为Google而流行,但最初的发明AJAX核心技术的却是微软,早在97年,微软便已经研发出了AJAX中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,微软之前已经开始在它的一些产品中应用AJAX,比如说MSDN网站菜单中的一些应用。但是,当时微软研发出了AJAX的核心技术之后,并没有看到它的潜力而加以发展和推广,所以才造就了Google在AJAX技术方面的绝对领先地位。

作用

在早期的B/S结构(WEB1.0)中,前台请求后台程序的数据,要通过重新加载整个页面来显示出传回的数据,即使只需要对整个页面进行局部刷新,也必须把整个页面重新加载,这样的请求方式很大程度上降低了请求的效率,AJAX的出现极大的解决了这个问题,它通过异步请求的方式请求后台程序,请求成功后会调用相应的回调方法,然后再利用JS解析传回的数据,最后利用的DOM把返回的数据设置到相应的网页元素上,这样就实现了网页请求后的局部加载。

优缺点

优点

无刷新更新数据。

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

异步与服务器通信。

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

前端和后端负载平衡。

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

基于标准被广泛支持。

AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。

界面与应用分离。

Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

缺点

AJAX干掉了Back和History功能,即对浏览器机制的破坏。

在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。
后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?答案是肯定的,用过Gmail的知道,Gmail下面采用的Ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变Ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。

AJAX的安全问题。

AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

对搜索引擎支持较弱。

对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。

破坏程序的异常处理机制。

至少从目前看来,像Ajax.dll,Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题,曾在开发过程中遇到过,但是查了一下网上几乎没有相关的介绍。后来做了一次试验,分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

违背URL和资源定位的初衷。

例如,我给你一个URL地址,如果采用了Ajax技术,也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

AJAX不能很好支持移动设备。

一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax,比如说我们在手机的浏览器上打开采用Ajax技术的网站时,它目前是不支持的。

客户端过肥,太多客户端代码造成开发上的成本。

编写复杂、容易出错 ;冗余代码比较多(层层包含js文件是AJAX的通病,再加上以往的很多服务端代码现在放到了客户端);破坏了Web的原有标准。

应用场景

前台页面在请求后台程序的过程中,不需要重新加载所有的页面,只更新一部分页面的时候,或者交互性很强的地方,可以使用AJAX。比如说,新用户注册的时候,在用户名输入框后面加一个div,当用户输入完要注册的用户名,光标焦点移除,在js中触发焦点移除的方法,然后请求后台程序,后台去数据库中查询是否有相同的用户名,如果有,从后台返回到前台相应的数据,之后前台回调请求成功的方法,解析返回的数据,然后通过这个数据来判断当前用户是否已被注册,然后更新相应的div或者其他网页元素来提示用户,当前用户名是否可以用来注册。

适用的地方:

  • 表单驱动的交互
  • 深层次的树的导航
  • 快速的用户与用户间的交流响应
  • 类似投票、yes/no等无关痛痒的场景
  • 对数据进行过滤和操纵相关数据的场景
  • 普通的文本输入提示和自动完成的场景

不适用的地方:

  • 部分简单的表单
  • 搜索
  • 基本的导航
  • 替换大量的文本
  • 对呈现的操纵

特性和原理

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

AJAX的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是AJAX的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。所以我们先从XMLHttpRequest讲起,来看看它的工作原理。

XMLHttpRequest的属性。

属性值

  • onreadystatechange 每次状态改变所触发事件的事件处理程序。
  • responseText 从服务器进程返回数据的字符串形式。
  • responseXML 从服务器进程返回的DOM兼容的文档数据对象。
  • status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
  • status Text 伴随状态码的字符串信息
  • readyState 对象状态值

    • 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
    • 1 (初始化) 对象已建立,尚未调用send方法
    • 2 (发送数据) send方法已调用,但是当前的状态及http头未知
    • 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和 responseText获取部分数据会出现错误
    • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

浏览器之间差异

由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。


function CreateXmlHttp() {
    //非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }
}
function Ustbwuyi() {
    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常!");
        return false;
    }
    xmlhttp.open("POST", url, false);
    xmlhttp.send(null);
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

如上所示,函数首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:

a、向服务器提交数据的类型,即post还是get。

b、请求的url地址和传递的参数。

c、传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。

注意:

  • 如果把AJAX设置为同步,那么浏览器就会一直等到服务端发回的数据,不会执行后面的代码,但是如果设置为异步请求数据,浏览器会新开启一个新的线程去请求服务端的数据,主线程则会继续向下执行,如果服务端响应比较慢,而且在AJAX请求的相关代码后面,或者具体一点,在onreadystatechange回调方法后面”使用了”AJAX要请求的数据(指的是AJAX请求数据后然后被赋值的变量),因为数据可能未返回,所以结果是空的。当把AJAX设置为异步的时候,在onreadystatechange方法的外面做页面更新,就可能会出现问题
  • 在JQuery中也一样,如果设置为异步之后(async: true),最好就不要再success方法之外更新页面。虽然JQuery常用的ajax方法都有返回值,而且都是把从服务端请求完毕之后的数据作为返回值,但是如果不是单纯的请求数据或者其他的特殊用法,最好不要在success方法体外面做一些操作。这么说可能多少有点抽象,下面结合代码来解释一下。
function loadAjax(){
    //创建一个变量用来接收服务端返回的数据
    var text = "";
    //创建AJAX对象
    var xmlhttp = createAjax();
    //设置请求URL和请求方式
    var url = "index.jsp";
    var method = "POST";
    //建立连接
    xmlhttp.open(method,url);
    //发送数据
    xmlhttp.send();
      //当状态码发生变化后就会在执行这个回调方法
    xmlhttp.onreadystatechange = function(){
        if(ajax.readyState == 4){
            if(ajax.status == 200){
                var text = xmlhttp.responseText;
            }
        }
    }
    //如果服务器响应过慢,但是主线程已经走到这里,因为数据并没有接收完毕
    //也就说,onreadystatechange回调方法里的ajax.readyState没有等于4过
    //var text = xmlhttp.responseText也就没有执行
    //那么text并没有被赋值,就一直为空。
    alert(text);
};

总之,为了避免各种异步产生的问题,要把更新页面的代码写在请求成功后调用的方法内部。还有一点,在Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应,没有恰当的预读数据,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

使用方法

JavaScript中使用

使用步骤

①XMLHttpRequest 是 AJAX 的基础。首先创建XMLHttpRequest。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。注意XMLHttpRequest创建完毕时,AJAX的这时候状态码为0

  • 创建 XMLHttpRequest 对象的语法(IE7+、Firefox、Chrome、Safari 以及 Opera):

var ajax = new XMLHttpRequest();
  • 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var ajax=new ActiveXObject("Microsoft.XMLHTTP");
  • 兼容所有的浏览器:

var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

②调用AJAX对象的open方法,并设置请求的url和method,这时候AJAX的状态码为1

var url = "index.jsp";
var method = "GET";
ajax.open(method,url);

③调用AJAX的send方法,真正发送请求体的数据到服务器,如果请求数据为空,比如说GET方法,直接把数据已放在了URL中,这样实体数据为空,就设置send的参数为null即可。这时候AJAX状态码是2

ajax.send(null);

④设置AJAX的回调函数,判断状态码,然后做出相应的操作。只有状态码变化了,才会调用回调函数。此时AJAX状态码为4


ajax.onreadystatechange = function(){
    //如果AJAX状态码为4
     document.getElementById("user1").innerHTML = "数据正在加载...";
    if(ajax.readyState == 4){
        //如果服务器响应码是200
        if(ajax.status == 200){
            //NO5)从AJAX异步对象中获取服务器响应的结果
            var str = ajax.responseText;
            //NO6)按照DOM规则,将结果动态添加到web页面指向的标签中
            document.getElementsByTagName("span")[0].innerHTML = str;
        }
    }
}

在JQuery中使用

JQuery是一个轻量级的js库,使用起来非常简洁,可以使用户更加方便地为网站提供AJAX交互。下面首先介绍几个常用的JQuery的AJAX相关方法。

相关方法

JQuery.ajax()

  • 语法
jQuery.ajax([settings]) // 可选。用于配置 Ajax 请求的键值对集合。
  • $.ajax()的一般格式
$.ajax({
     type: 'POST',
     url: url,
     data: data,
     success: success,
     dataType: dataType
});
  • $.ajax()的常参数描述
参数描述
url必需。规定把请求发送到哪个 URL。
type请求的方式
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。data - 包含来自请求的结果数据,textStatus - 包含请求的状态
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script、text 或 html)。

详细参数请参考 参数详解

  • 数据的封装

ajax的请求参数data,可以为普通的字符串,json格式的数据,或者form表单序列化的值。

  • 方法的返回值

方法的返回值就是请求的数据

  • 实例
//1.$.ajax带json数据的异步请求
var aj = $.ajax( {  
    url:'productManager_reverseUpdate',// 跳转到 action  
    data:{  
             selRollBack : selRollBack,  
             selOperatorsCode : selOperatorsCode,  
             PROVINCECODE : PROVINCECODE,  
             pass2 : pass2  
    },  
    type:'post',  
    cache:false,  
    dataType:'json',  
    success:function(data) {  
        if(data.msg =="true" ){  
            // view("修改成功!");  
            alert("修改成功!");  
            window.location.reload();  
        }else{  
            view(data.msg);  
        }  
     },  
     error : function() {  
          // view("异常!");  
          alert("异常!");  
     }  
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){  
    var formParam = $("#form1").serialize();//序列化表格内容为字符串  
    $.ajax({  
        type:'post',      
        url:'index',  
        data:formParam,  
        cache:false,  
        dataType:'json',  
        success:function(data){  
        }  
    });  
}  
//3.$.ajax拼接url的异步请求
var yz=$.ajax({  
     type:'post',  
     url:'validatePwd2_checkPwd2?password2='+password2,  
     data:{},  
     cache:false,  
     dataType:'json',  
     success:function(data){  
          if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间  
          {  
               textPassword2.html("<font color='red'>业务密码不正确!</font>");  
               $("#validatePassword2").val("pwd2Error");  
               checkPassword2 = false;  
               return;  
           }  
      },  
      error:function(){}  
}); 
//4.$.ajax拼接data的异步请求
$.ajax({   
    url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',   
    type:'post',   
    data:'merName='+values,   
    async : false, //默认为true 异步   
    error:function(){   
       alert('error');   
    },   
    success:function(data){   
       $("#"+divs).html(data);   
    }
});

JQuery.post()

使用AJAX以POST请求服务端的数据,对.ajax()方法进行了简化

  • 语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
  • $.post()的一般格式

$.post({
     url,
     data,
     success,
     dataType
});

例:

$.post({
    "/admin/login.action",
    {
        username:"admin",
        password:"admin"
    },
    function(data, textStatus){
        if(data.resultmsg=="ok"){
            alert("登陆成功!");
        }else{
            alert("登陆失败!");        
        }
    },
     "json"
});
  • JQuery.post()常用格式
参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script、text 或 html)。
  • 请求数据格式

请求参数data,可以为普通的字符串,json格式的数据,或者form表单序列化的值。

JQuery.get()

使用AJAX以GET请求服务端的数据,对.ajax()方法进行了简化

  • 语法
jQuery.get(url,data,success(data, textStatus, jqXHR),dataType)
  • $.get()的一般格式
$.get({
    url,
    data,
    success,
    dataType
});

例:

$.get({
    "/admin/login.action",
    {
        username:"admin",
        password:"admin"
    },
    function(data, textStatus){
        if(data.resultmsg=="ok"){
            alert("登陆成功!");
        }else{
            alert("登陆失败!");        
        }
    },
     "json"
});
  • JQuery.get()参数描述
参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script、text 或 html)。
  • 请求数据格式

请求参数data,可以为普通的字符串,json格式的数据,或者form表单序列化的值。

.load()

load()方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

  • 语法
    
load(url,data,function(response,status,xhr))
  • .load()常用格式
$("#result").load("ajax/test.html");
  • 参数描述
参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script、text 或 html)。

注意事项

注意$.ajax()的参数都是以json形式放入的,参数的位置可以打乱,而$.post和$.get的参数位置都是固定的,不可打乱。因为$.post和$.get的参数比较少,使用虽然简单,但是却有局限性, 所以有些比较复杂的请求,还要使用$.ajax()来处理.

其他方法

参数描述
.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()在 Ajax 请求发送之前显示一条消息。
.ajaxSetup()设置将来的 Ajax 请求的默认值。
.ajaxStart()当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()当 Ajax 请求成功完成时显示一条消息。
.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码数据。
.getScript()使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
.param()创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
.serialize()将表单内容序列化为字符串。
.serializeArray()序列化表单元素,返回 JSON 数据结构数据。

JQuery的所有与AJAX相关的方法详解 参数详解

使用步骤

以$.ajax()为例

①设置触发$.ajax()的事件

//点击触发
$("#ajax").click(function(){
    //请求开始        
});

②设置$.ajax()的各个参数

//点击触发
$("#ajax").click(function(){
    $.ajax({  
        type:'post',      
        url:'index',  
        data:
        {"username":"howie"},  
        cache:false,  
        dataType:'json',  
        success:function(data){  
        }  
    });        
});

③设置请求成功的回调方法

//点击触发
$("#ajax").click(function(){
     $.ajax({  
        type:'post',      
        url:'index',  
        data:{"username":"howie"},  
        cache:false,  
        dataType:'json',
        success:function(data){
          $("#show").html(data.result);
        }  
    });        
});
最后编辑:2021年02月09日 ©著作权归作者所有

评论已关闭