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