jQuery-演示文稿-第4课时.ppt

Ajax在jQuery中的应用/jQuery实用工具函数 start 1. Ajax Ajax是Asynchronous JavaScript and XML的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。 这种利用Ajax技术进行的数据交互并不局限于Web动态页面，在普通的静态HTML页面中同样可以实现，因此，在这种背景下，Ajax技术在页面开发中得以广泛使用。 2.load load 实现异步数据的功能 语法：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(); var html=; $(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，既包含发送请求的参数，也含有服务器响应后