河南中医药大学：《Web前端开发》课程理论教学课件（2017）18.AJAX在jQuery中的应用

AJAX在 jQuery中的应用 管理科学与工程学科 耿方方

AJAX在jQuery中的应用 管理科学与工程学科 耿方方

主要内容 加载异步数据 请求服务器数据 $. ajax方法 AJAX中的全局事件 AJAX重构 AJAX开发注意事项

主要内容  加载异步数据  请求服务器数据  $.ajax()方法  AJAX中的全局事件  AJAX重构  AJAX开发注意事项

加载异步数据 传统的 JavaScript方法 为了加快整体页面的打开的速度,对于某局部的数据采用异步读取的 方法获取,这一个方法的应用,极大地优化了用户的体验,优化了页面 的执行。 传统的 JavaScript方法 使用传统的 JavaScript方法,基于Ⅺ MlhTtprEquest对象,也可以将 数据加载到页面中

加载异步数据 传统的JavaScript方法  为了加快整体页面的打开的速度,对于某局部的数据采用异步读取的 方法获取,这一个方法的应用,极大地优化了用户的体验,优化了页面 的执行。  传统的JavaScript方法  使用传统的JavaScript方法，基于XMLHttpRequest对象，也可以将 数据加载到页面中

加载异步数据 传统的 JavaScript方法 案例1:P160

加载异步数据 传统的JavaScript方法  案例1：P160

加载异步数据 Query中的oad方法 在传统的 JavaScript中,使用Ⅺ LhtTprequest对象异步加载数据; 而在 jQuery中,使用load(方法可以轻松实现获取异步数据的功 能。其调用的语法格式如下 load( url data[, complete ] 表1641oad0方法参数解释 参数名称 参数选择 参数类型 参数说明 url 必须 String 请求HTML的URL地址 data 可选 object 发送至服务器的 key/value数据 complete 可选 function 请求完成时的回调函数名称

加载异步数据 jQuery中的load方法  在传统的JavaScript中，使用XMLHttpRequest对象异步加载数据； 而在jQuery中，使用load（）方法可以轻松实现获取异步数据的功 能。其调用的语法格式如下：  load( url [, data ] [, complete ] )

加载异步数据 jQuery中的load方法 案例2

加载异步数据 jQuery中的load方法  案例2：

加载异步数据 jQuery中的 getSoN 虽然使用 load)方法可以很快地加载数据到页面中,但有时需要 对获取的数据进行处理,如果将用1oad()方法获取的内容进行遍 历,也可以进行数据的处理,但这样获取的内容必须先插入页面中, 然后才能进行,因此,执行的效率不高。 为了解决这个问题,我们采用将要获取的数据另外一种轻量级的数 据交换格式,即JS0N文件格式。专门有一个全局函数 getS0NO,用 于调用J0N格式的数据,语法如下 S. getJSoN (url, [data], [callback]) 参数ur1表示请求的地址,可选项[data]参数表示发送到服务器的数 据,其格式为key/ valuea另外一个可选项[cal1back]参数表示加载 成功时执行的回调函数

加载异步数据 jQuery中的getJSON  虽然使用load（）方法可以很快地加载数据到页面中，但有时需要 对获取的数据进行处理，如果将用load（）方法获取的内容进行遍 历，也可以进行数据的处理，但这样获取的内容必须先插入页面中， 然后才能进行，因此，执行的效率不高。  为了解决这个问题，我们采用将要获取的数据另外一种轻量级的数 据交换格式，即JSON文件格式。专门有一个全局函数getJSON()，用 于调用JSON格式的数据，语法如下：  $.getJSON(url,[data],[callback])  参数url表示请求的地址，可选项[data]参数表示发送到服务器的数 据，其格式为key/value。另外一个可选项[callback]参数表示加载 成功时执行的回调函数

加载异步数据 Query中的 getsoN 案例3 s(function $("# Button1?). click( function0{/按钮单击事件 //打开文件,并通过回调函数处理获取的数据 var strh=";/初始化保存内容变量 .ech(data, function( InfoIndex,info){//历获取的数据 trim←“姓名:“+Info["nme"]+"r)"; stri←“性别:"+Info["ser]+" trmM←"部箱:"+Info[emai1"+"dhr"; })

加载异步数据 jQuery中的getJSON  案例3   $(function() {  $("#Button1").click(function() { //按钮单击事件  //打开文件，并通过回调函数处理获取的数据  $.getJSON("JSON/UserInfo.json", function(data) {  $("#divTip").empty(); //先清空标记中的内容  var strHTML = ""; //初始化保存内容变量  $.each(data, function(InfoIndex, Info) { //遍历获取的数据  strHTML += "姓名：" + Info["name"] + "";  strHTML += "性别：" + Info["sex"] + "";  strHTML += "邮箱：" + Info["email"] + "";  })  $("#divTip").html(strHTML); //显示处理后的数据  })  })  }) 

加载异步数据 jQuery中的 getScript() 在 jQuery中,还可以通过一个全局函数 getScript o获取.js文件的 内容。这样不仅可以像加载网页片段一样轻松地注入脚本,而且所 注入的脚本自动执行,大大提高了页面的执行效率。语法如下: s. getScript(url, [callback])

加载异步数据 jQuery中的getScript（）  在jQuery中，还可以通过一个全局函数getScript()获取.js文件的 内容。这样不仅可以像加载网页片段一样轻松地注入脚本，而且所 注入的脚本自动执行，大大提高了页面的执行效率。语法如下：  $.getScript(url,[callback])

加载异步数据 jQuery中的 getScript() n案例4 Script type=text/javascript"> s (function o $(″# Button1"). click( function({//按钮单击事件 //打开已获取返回数据的文件 S. getScript("UserInfo. js") }) </ script〉

加载异步数据 jQuery中的getScript（）  案例4   $(function() {  $("#Button1").click(function() { //按钮单击事件  //打开已获取返回数据的文件  $.getScript("UserInfo.js");  })  }) 