39-JSONP及实用插件.docxVIP

精通jQuery编程（三）目录精通jQuery编程（三）1一、课程作业31、实现后台管理列表的全选、全不选、反选功能32、实现折叠菜单3二、each方法4三、jQuery中的Ajax51、回顾原生的Ajax代码51）Ajax中的get请求（五步走）52）Ajax中的post请求（六步走）52、jQuery中的Ajax（两种方式）63、Ajax底层实现（$.ajax(options)）64、使用Ajax完成大批量数据的编辑（xml,json）81）使用Ajax完成两个数的四则运算(xml)82）使用Ajax完成读取分类表中的分类信息（json）105、Ajax高级实现10四、JSONP技术（Ajax的跨域请求）121、什么是Ajax跨域请求122、Ajax跨域请求原理图123、Ajax跨域请求早期解决方案134、Ajax跨域请求解决方案——JSONP技术135、使用JSONP+JSON实现大批量数据的编辑14五、jQuery中的JSONP技术151、具体实现方法152、$.ajax实现跨域163、$.get实现跨域174、$.getJSON实现跨域18六、案例：通过Ajax实现天气预报181、天气预报接口（中国天气网）182、城市编号问题183、设计数据库184、导入数据到数据库195、设计HTML界面+Ajax实现19七、那些年涛哥追过的插件201、LightBox插件（QQ相册）202、旋转插件（大转盘）203、openflashchart（2.0版）214、表单验证插件215、upload多文件上传22一、课程作业1、实现后台管理列表的全选、全不选、反选功能详细代码参考anli06.php页面2、实现折叠菜单详细代码请参考anli05.html页面二、each方法each(callback) ：主要功能是实现对jQuery对象的遍历（功能与for或for…in…类似）这个each方法非常简单，只有一个参数，参数格式如下：function [callback](i,item){}参数说明：i：每次遍历时，系统自动将jQuery对象的索引放入变量i中item：每次遍历时，系统自动将jQuery遍历的结果（DOM对象）放入变量item选项中所以item可以肯定其是一个DOM对象。例1：通过each方法遍历页面中的所有div元素并设置其值例2：通过each方法遍历为img元素赋值三、jQuery中的Ajax1、回顾原生的Ajax代码1）Ajax中的get请求（五步走）2）Ajax中的post请求（六步走）2、jQuery中的Ajax（两种方式）Ajax的底层实现jQuery.ajax(options) 或 $.ajax(options)Ajax的高级实现jQuery.get(url,[data],[callback]) jQuery.post(url,[data],[callback])3、Ajax底层实现（$.ajax(options)）参数说明：$.ajax方法只有一个options选项，要求是一个json格式的对象，其属性常用的有以下几个：async ：是否异步，true异步，false同步，默认为truecache ：布尔类型，true或false，true缓存，false不缓存complete ：当Ajax状态码为4时所触发的回调函数contentType ：设置文档类型，默认post自动设置application/x-www-form-urlencodeddata ：当发送请求时传递的参数（要求是一个字符串）dataType ：设置期待的返回值类型，text，xml，json，默认为textsuccess ：当Ajax状态码为4且响应状态码为200时所触发的回调函数type ：请求类型（get或post）url ：请求的url地址示例代码：运行结果：运行发现，其第二次方式时，依然读取了IE中的缓存文件，通过cache属性解决此问题：运行结果：通过观察发现，底层实现中缓存问题是通过时间戳的形式解决的。示例代码：4、使用Ajax完成大批量数据的编辑（xml,json）1）使用Ajax完成两个数的四则运算(xml)非标准DOM模型标准DOM模型所以Javascript在解析XML时找到节点后还需要通过childNodes[0]输出节点的值2）使用Ajax完成读取分类表中的分类信息（json）5、Ajax高级实现jQuery.get(url,[data],[callback]) ：实现Ajax中的get请求jQuery.post(url,[data],[callback]) ：实现Ajax中的post请求参数说明：url：请求的url地址[data]：发送Ajax时传递的参数，要求是一个字符串或json格式的数据，如果没有参数