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(); });
