Day43 插件、Ajax、JSON、扫雷
- 插件
1.1 概述
插件是对功能的扩展 ,比如jQuery中没有的,或者是对已有的进行扩展,都是插件
不同的插件完成不同的功能,
jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。
注意,如果需要引入的插件,是基于jQuery的插件,则我们再使用时,必须先引入jQuery,再引入插件,再进行编码
1.2 jQuery.color.js
Animate中,不能进行颜色操作,该插件就可以解决这个问题
只需要引入color的js 即可,否则颜色是不能动画设置的
1.3 jQuery.lazyload.js
很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
1.4 日历插件
http://www.jq22.com 或者直接百度找都可以
打开,看样式,找到自己喜欢的哪一个或者需求的哪一个
把其他多于代码删除,然后进行测试,没问题后应用到自己的程序中
- JS-Ajax
2.1 概述
2.1.1 老版本ajax请求
代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络用户都可以通过浏览器访问。
我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据
1、地址栏输入地址
2、特定元素的href 或者src属性
3、表单提交
弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网
2.1.2 什么是ajax
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2.1.3 异步和同步
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果
同步是在一条直线上的队列，异步不在一个队列上 各走各的
jquery 的 async:false,这个属性
默认是true：异步，false：同步。举例：
同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。
2.1.4 运行机制
2.2 代码模板
/**
* 1 获取ajax引擎对象 XMLHttpRequest
* 2 配置请求连接的URL,代表浏览器要发出的请求以及目的地,还有就是是否异步
* 这个请求不是直接发送,而是配置给ajax引擎,有它去发送
* 3 监视XMLHttpRequest对象的请求流程,根据不同的请求结果,做出不同的响应
* 4 发送请求,上面都是准备,这里才是真正的发送
*/
固定格式:
2.3 代码应用
更改URL和请求方式,以及是否异步
更改请求成功或者失败后要做的事
如果是get请求,这里不用动,如果是post请求 就需要更改
更改为这样
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
只需要更改传递的参数即可
2.4 注意
不支持file协议(本地协议)
我们应该这样运行
右键,浏览器打开
2.5 responseText和responseXML
2.5.1 responseText
responseText 是可以接收任何数据的,因为数据都是以字符串进行传递,不管你是什么格式,用responseText接收到,都是字符串
比如接收到的是json/xml等 我们一般会再次把这个字符串转换为对应的对象进行操作
大部分情况我们都是用json进行操作
2.5.2 responseXML
如果返回的是xml格式的字符串,并且我们需要以DOM的方式来操作这些XML标签,那么就直接使用responseXM L 会自动把XML格式的字符串转换为对象
2.6 案例-三级联动
思路 :
1 三个下拉列表,省,市,县
2 绑定onchange事件,发生更改触发
3 打开页面默认加载所有省份,并显示在省下拉列表中
4 当省下拉列表发生更改时,加载对应的城市,显示在市下拉列表中
5 当市下拉列表发生更改时,加载对应的区县,并显示在县下拉列表中
参考案例 address.html
- jQuery-Ajax
3.1 概述
1、如果没有 jQuery，AJAX 编程还是有些难度的。
2、编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
3、jQuery 提供多个与 AJAX 有关的方法。
4、通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
3.2 Load
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
谁调用的这个方法,就把返回数据放入谁的里面
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
3.3 Get
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST。
3.4 Post
3.5 Ajax
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
常用的属性 :
Url,async,type,success,error,data
- JSON
4.1 概述
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
4.2 语法
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中、数据由逗号分隔、大括号保存对象、中括号保存数组。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
Var json = {
‘name’:’张三’,
‘age’:18
};
4.3 JSON数组
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。
对象属性的值可以是一个数组：
4.4 JSON转字符串
因为数据传递都是以字符串进行传递,如果我们想要把JSON传递到后端,需要先转换为对应的JSON格式的字符串,然后传递该字符串即可
4.5 字符串转JSON
如果后端传递到页面的是一个JSON格式的字符串,我们需要把该字符串转换为JSON对象,方便我们获取数据等操作
person.txt
4.6 eval
4.7 JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
如客户想访问 :
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
假设客户期望返回数据：[“customername1”,“customername2”]。
真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])。
只能通过请求访问自己域中的数据,访问其他域中的,就会被终止,除非对应的服务器中设置了可以跨域访问才行
后端可以通过
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
