|
The Write Less,Do More——jQuery下 目录 The Write Less,Do More——jQuery下 1、通过jQuery的ajax底层实现$.ajax()解决跨域问题 一、each方法功能：用于遍历jQuery对象 基本语法： jQuery对象.each(callback)：该函数只有一个参数，要求是一个callback函数，函数的格式如下： function callback(i,item){} 参数说明： jQuery对象中拥有多少个元素，那么我们的callback函数就会自动执行多少次。 i：遍历时，系统会自动将当前元素的索引下标放入变量i中，默认从0开始 item：便利是，系统会自动将当前元素的本身放入变量item中，其就是当前的dom对象 例1：通过each实现对三个层的内容进行遍历，并更改其内容为第1个div元素…
运行效果：
例2：替换当前页面的img中的src属性更换为不同的三张图片 demo02_each.html
运行效果：
二、jQuery中的ajax操作如果是get请求，就要分5步 如果是post请求，就要分6步 //1)创建Ajax对象 var xhr = createXhr(); //2)设置回调函数 xhr.onreadystatechange = function(){ //6)判断与执行 } //3)初始化ajax xhr.open('post’,’demo01.php’); //4)设置请求头信息 xhr.setRequestHeader('Content-type’,’application/x-www-form-urlencoded’); //5)发送ajax请求 xhr.send(data); 在jQuery中的ajax实现有二种方式，三种方法 方式一：ajax的底层实现 l jQuery.ajax(options) 方式二：ajax的高级实现 l jQuery.get(url,[data],[callback]) l jQuery.post(url,[data],[callback]) 1、ajax的底层实现jQuery.ajax(options) === $.ajax 参数说明： options：要求该参数为一个json对象 l async ：是否异步，默认为true l cache ：缓存，bool类型，true：缓存，false：不缓存，默认为true l complete ：当ajax状态码为4时，所触发的回调函数 l contentType ：设置请求头信息 l data ：ajax发送时，所传递的参数，要求是一个字符串 l dataType ：期待的返回值类型，text,xml,json，默认为text l success ：当ajax状态为4且http响应状态码为200所触发的回调函数 l type ：ajax发送的请求类型：get,post l url ：请求的url地址 例1： demo03_ajax.html
效果：
注：运行以上代码，我们发现，当在IE浏览器下运行时，系统还是会产生缓存问题，那么如何解决缓存呢？ 答：可以通过cache方式解决缓存问题 例2：
例3：通过ajax发送数据到服务器端
返回结果：hello zhangsan 例4：通过ajax发送post请求
返回结果：hello zhangsan 注：在ajax底层实现中可以不添加请求头信息，系统会自动追加请求头到发送数据中 例5：通过ajax底层实现返回两个数的四则 返回值类型 text文本、xml格式、json格式
运行结果：
2、ajax的高级实现l jQuery.get(url,[data],[callback]) ：模拟ajax的get请求 l jQuery.post(url,[data],[callback]) ：模拟ajax的post请求 参数说明： url：要请求的url地址 [data]：要发送的数据，要求该参数为json对象 [callback]：当ajax状态码为4且http响应状态码为200时，所触发的回调函数 [type]：期待的返回值类型，text,xml,json 1）模拟发送get请求
通过运行可知，虽然以上程序可以正常运行，但还是存在缓存问题，那么如何解决呢？ 2）通过时间戳解决get请求缓存问题
运行效果：
3）模拟post请求
运行效果：
4）返回值类型1）xml数据的解析
结果如下：
2）通过jQuery方式进行解析 var person=$(msg).find(“person”); person.children(“name”).text()); person.children(“jian”).text()); person.children(“cheng”).text());
运行结果：
2）json数据的解析
运行效果：
三、Ajax跨域请求——jsonp技术1、Ajax跨域请求原理图
2、Ajax跨域请求不被允许的原因l Ajax技术由于受到浏览器的限制，该方法不允许跨域通信。 l 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。 3、jsonp协议jsonp就是一个非官方协议，主要用于解决Ajax的跨域请求问题 面试题：json与jsonp的区别 jsonp技术主要是借助script标签的中的src属性来动态载入远程文件。 例1：通过Javascript原生方式解决跨域问题
demo07.php
运行结果：
例2：改进上题，让我们的跨域请求随着按钮的触发在进行执行
demo07.php
运行效果：
JSONP是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。 4、通过jsonp返回大批量数据demo07_kuayu.html
demo07.php
运行效果：
说明：jsonp技术主要用于内部团队开发中，如果是外部接口，其提供了jsonp接口我们可以直接调用，否则，是没有办法调用的。
四、jQuery中的跨域请求1、通过jQuery的ajax底层实现$.ajax()解决跨域问题demo08.html
demo07.php
2、通过$.get()方法解决跨域请求demo09.html
demo07.php
3、$.getJSON()方法解决跨域请求demo10.html
demo07.php
通过以上上个案例可知，在jquery中，解决跨域请求都是通过模拟http的get请求方式进行解决的，且其处理了缓存问题。 五、天气预报1、原理图
2、代码实现1）界面 2）设计数据库，初始化数据 3）代码实现 主要涉及的知识点： file文件导出 jQuery的ajax请求 分类实现（new Option()）; 数据库查询 snoopy采集库 效果：
六、那些年涛哥追过的jQuery插件1、Lightbox
2、jquery.rotate.min.js插件
3、ValidateForm
4、多文件上传
5、jquery.lazyload.js
6、jQuery Mobile
|
|
|
