jQuery(5)--jQuery中的Ajax应用

Ajax介绍

Ajax的全称为"Asynchronous JavaScript and XML"(异步JavaScript 和 XML),它并不是指一种单一的技术，而是有机利用了一系列交互式网页应用相关技术所形成的结合体。

Ajax优点：

优秀的用户体验

Ajax最大的有点就是能在不刷新整个页面的前提下更新数据，使Web应用程序能更迅速的回应用户的操作。

提高Web程序的性能

与传统模式相比，Ajax在性能上的最大区别就在于传输方式，传统模式中，数据提交是通过表单(Form)来实现，而数据获取是靠全页面刷新来获取整页的内容。Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

减轻服务器和带宽负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get() 和$.post()方法，第3层是 $.getScript()和$.getJson()方法。这几个方法都是jQuery中的全局函数，而其他的jQuery方法都是对jQuery对象进行操作的

$.ajax(options) //该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，所有参数都是可选的

$.ajax({
      type: 'post',
      url: '/stabilityPerf/get/getScreenShotPics',
      dataType:'json',
      data: {
            taskId: taskId,
            sn: sn,
            packageName:packageName
      },
      async:true,
      success: function (data) {         //请求成功后调用的回调函数，有两个参数 data--由服务器返回，并根据dataType参数进行处理后的数据 textStatus--描述状态的字符串
            
            if(data!=null&&data.length>0) {
                  
                  $.each(data, function (index, content) {    //$each()用于遍历对象和数组，全局函数，以一个数组或对象作为第一个参数，一个回调函数作为第二个参数；回调函数有两个参数：1、对象的成员或数组的索引 2、对应变量或内容
                        var picDiv=$(document.createElement("span"))
                              .appendTo(contentDiv)
                              .attr("pic-name",content['fileName'])
                              .attr("pic-time",content['fileTime'])
                              .on("click",function(){
                                    window.open(content['fileUrl']);
                              });

            } else {
                  contentDiv.html("未找到截图");
            }
      },
      error: function (e) {      //请求失败时调用的函数
            AlertUtil.echoFailure("报错"+e);
      }
});

Ajax中的全局事件

ajaxStart(callback)   //Ajax开始请求时执行
ajaxStop(callback)   //Ajax请求结束后执行
ajaxComplete(callback)    //Ajax请求完成时 
ajaxError(callback)   //Ajax请求发生错误时
ajaxSend(callback)  //Ajax请求发送前
ajaxSuccess(callback)  //Ajax请求成功时


eg:
<div id="loading">加载中...</div>  //用CSS控制元素隐藏，当Ajax请求开始的时候，将此元素显示，提醒用户Ajax请求正在进行。当Ajax请求结束后，将此元素隐藏。

                                  //因为方法时全局的，所以页面中其他地方使用Ajax时，该提示信息都有效  若想使某个Ajax请求不受全局方法的影响，可以再用$.ajax()方法时，将global参数设为false

$("#loading").ajaxStart(function(){

$(this).show();

}).ajaxStop(function(){

$(this).hide();

});