jQuery-演示文稿-第4课时

Ajax在jQuery中的应用/jQuery实用工具函数start1.AjaxAjax是AsynchronousJavaScriptandXML的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限于Web动态页面，在普通的静态HTML页面中同样可以实现，因此，在这种背景下，Ajax技术在页面开发中得以广泛使用。2.loadload实现异步数据的功能语法：load(url,[data],[callback])例:$("#divtip").load("b.html");在load方法中，参数url还可以用于过滤页面中的某类别的元素，如$("#divtip").load("b.html.divc");，则表示获取页面b.html中类别为“divc”的全部元素3.1.jquery中的全局函数-getJSON()虽然使用load()方法可以很快地加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load()方法获取的内容进行遍历，也可以进行数据的处理，但这样获取的内容必须先插入页面中，然后才能进行，因此，执行的效率不高。为了解决这个问题，我们采用将要获取的数据另存为一种轻量极的数据交互格式，即JSON文件格式，由于这种格式很方便计算机的读取，因而颇受开发者的青昧．在jQuery中，专门有一个全局函数getJSON()，用于调用JSON格式的数据，其调用的语法格式为：$.getJSON(url,[data],[callback])可选项[data]参数表示发送到服务器的数据，其格式为key/value另外一个可选项[callback]参数表示加载成功时执行的回调函数。下面举例说明。3.2.jquery中的全局函数-getScript()$.getScript(url,[callback])通过此全局函数获取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打开以获取返回的数据的文件 }); })3.3.jquery中的全局函数-get()在上几个小节中，我们通过jQuery中的各种全局函数，实现了不同格式数据的异步加载，如HTML、JSON、JS格式数据。在日常的开发中，有时也会遇到使用XML文档保存数据的情况，对于这种格式的数据，jQuery中使用全局函数$.get()进行访问，语法：$.get(url,[data],[callback],[type])

$.get("json.xml",function(data){ $("#p1").empty(); varhtml=""; $(data).find("user").each(function(){//遍历获取的数据 var$strUser=$(this); html+="姓名:"+$strUser.find("name").text()+"<br>" +"性别:"+$strUser.find("sex").text()+"<br>" +"邮箱:"+$strUser.find("email").text()+"<br>"; }); $("#p1").html(html);//显示处理后的数据 });3.4.jquery中的全局函数-post()$.post也是带参数向服务器发出数据请求。全局函数$.post与$.get()在本质上没有太大的区别，所不同的是，get方式不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风险。而post方式向服务器发送数据请求，就不存在这两个方面的不足。$.post(url,[data],[callback],[type])(url,[callback])通过此全局函数获取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打开以获取返回的数据的文件 }); })4.$.ajax()方法语法：$.ajax([options])可选项参数[options]为$.ajax方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应后回调的数据。其全部名称如表4.$.ajax()方法语法：$.ajax([options])可选项参数[options]为$.ajax方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应后回调的数据。其全部名称如表5.$.ajaxSetup()方法在使用$.ajax()方法时，有时需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是一件十分麻烦的事。为了简化这种工作，在jQuery中，可以使用$.ajaxSetup()方法设置全局性的Ajax默认选项，一次设置，全局有效，这样大大简化了$.ajax()方法中的细节编写，格式:$.ajaxSetup([options])；$(function(){$.ajaxSetup({ type:"GET", url:"json.xml", dataType:"xml"});});

6.ajaxStart和ajaxStop全局事件在jquery中，使用ajax获取异步数据时，ajaxStart与ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发，往往用于编写一些准备性的功能工作，如提示“正在获取数据...”字样；后者是当请求结束时触发，在这一事件中，常常与前者配合，说明请求的最后进行展状态，如将显示中的“正在获取数据...”字样修改为“已成功获取数据!”，然后渐渐消失。

$("#tip").ajaxStart(function(){ $(this).show(); });7.jQuery实用工具函数数组和对象的操作字符串操作测试操作URL操作工具函数扩展8.jQuery实用工具函数-遍历数组$.each()遍历，语法：$.each(obj,fn(para1,para2))参数obj表示要遍历的数组或对象，fn为每个遍历元素执行的回调函数，该函数包含两个参数：para1表示数组的序号或对象的属性；para2表示数组的元素和对象的属性。

vararrStu={"张三":"60","李四":"70","王二":"80"}varstrC="<li>姓名：分数</li>"；$.each(arrStu,function(name,value){ strC+="<li>"+name+"："+value+"</li>"；});9.jQuery实用工具函数-数据筛选$.grep()筛选，语法：$.grep(array,function(elementOfArray,indexInArray),[invert])参数array为要筛选的原数组，回调函数fn中可以设置两个参数,其中elementOfArray为数组中的元素，indexInArray为元素在数组中的序列号。另外，可选项[invert]为不二之，表示是否根据fn的规则取反向结果，默认为false，表示不取反。 $(function(){ varstrtmp="筛选前数据:"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.grep(arrNum,function(ele,index){ returnele>5&&index<8//元素值大于5且序号小于8});strtmp+=arrNum.join();strtmp+="<br><br>筛选后数据："+arrGet.join();$("#divTip").append(strtmp); })9.jQuery实用工具函数-数据变更$.map()，语法：$.map(array,callback(elementOfArray,indexInArray))参数array为要变更的原数组，回调函数fn中可以设置两个参数,其中elementOfArray为数组中的元素，indexInArray为元素在数组中的序列号。 通过$.map()工具函数将数组中大于5且小于8的元素都增加3，并显示在页面中。 $(function(){ varstrtmp="变更前数据:"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.map(arrNum,function(ele,index){if(ele>5&&index<8){ returnele+3;}});strtmp+=arrNum.join();strtmp+="<br><br>变更后数据："+arrGet.join();$("#divTip").append(strtmp); })10.jQuery实用工具函数-数据搜索$.inArray()，语法：$.inArray(value,array)如果要在数组中搜索某个元素，可以使用工具函数$.inArray()，该方法相当于用javascript中的indexOf()函数搜索字符串中的某个字符。在工具函数$.inArray()中，如果找到了指定的某个元素，则返回元素在数组中的索引号，否则返回-1值。 通过$.map()工具函数将数组中大于5且小于8的元素都增加3，并显示在页面中。 $(function(){ varstrtmp="待搜索数据:"; vararrNum=[4,21,2,12,5];vararrPos=$.inArray(2,arrNum);strtmp+=arrNum.join();strtmp+="<br><br>搜索后结果："+arrPos;$("#divTip").append(strtmp); })11.字符串操作$.trim()工具函数，删除字符串左右两边的空格符12.测试操作$.isPlainObject(obj)，即对象是否通过{}或newObject{}关键字创建，是则返回true，否返回false13.工具函数的扩展$.extend()工具函数编写一个自定义工具函数，返回两个数中最小值。 (function($){ $.extend({ "MinNum":function(p1,p2){ return(p1<p2)?p1:p2; } }); })(jQuery);14.jQuery常用插件validateformcookieAutoCompleteNotesForLightBoxContextMenujQZoomNivoSliderTableSortProgressBarLoadMaskPaginationActivebar2Ni