jQuery的插件和跨域、ajax
1. 插件: 也称组件
什么是: 拥有专属的HTML，CSS和js的独立页面区域
为什么: 重用！
何时: 只要一个功能/区域可能被反复使用时
如何:
3个来源:
1. 官方插件：jquery ui
依赖于jQuery, 必须先引入jQuery，再引入jQuery UI
如何:
1. 引入jQuery UI的css
2. 按组件的要求，自行编写HTML结构和内容
3. 引入jQuery.js, 再引入jQuery UI.js
4. 查找插件的父元素，调用jQuery UI的插件函数
$(插件的父元素).插件函数()
侵入性: 插件根据自己的需要，自动添加样式类或自定义扩展属性
2. 第三方插件：
3. 自定义插件：
定义:
前提: 已经用HTML，CSS，JS实现了插件的效果和功能
1. 将插件的CSS提取出来，保存在一个独立的css文件
要求: 为了避免和其他插件存在相同的样式类发生冲突，必须保证每个样式类都要以统一的插件类名作为前缀！
2. 定义插件的js: 向jQuery的原型对象中添加自定义插件函数
jQuery.fn.插件函数=function(){
//this->$(父元素)
//2件事:
//1. 侵入class:
//2. 绑定事件处理函数:
}//调用时: $(父元素).插件函数();
使用插件: 同使用jQueryUI的做法
1. 引入插件的css
2. 按照插件要求编写html
3. 引入jquery.js和插件.js
4. 查找插件父元素，调用插件函数
2. ajax:
$.ajax({
url:"服务端接口地址",
type:"get/post",
data:{ 参数1:值1, ... },
dataType:"json", //可自动将服务器返回的json字符串转为对象
success:function(res){//onreadystatechange 返回响应，且响应成功时自动触发
//res会自动获得服务端返回的数据
//用res执行DOM操作
}
})//jquery 3.x 支持Promise
.then(function(res){
})
3. 跨域:
什么是: 一个域名下网页，向另一个域名下发送请求，请求另一个域名下的资源
比如: 现在在http://localhost/index.html下
<script src="http://www.jquery.com/jquery.js"
<img src="http://tmooc.cn/stylesheet/img/logo.png"
<link rel="stylesheet"
href="http://v4.bootcss.com/bootstrap.css"
问题: ajax的xhr对象，禁止发送跨域请求
包括:
1. 一级域名不同: www.a.com -> www.b.com
2. 二级域名不同: oa.tedu.com -> hr.tedu.com
3. 端口不同: localhost:5500 -> localhost:3000
||
4. 协议不同: http:localhost -> https:localhost
80 443
5. 即使同一台机器: 域名 -> IP
localhost 127.0.0.1
如何发送异步跨域请求:
1. JSONP: JSON with Padding 填充式json
问题1: ajax不能发送跨域请求
解决1: 请<script>元素帮助发送请求
问题2: <script>发送请求，必须返回一条可执行的js语句
解决2: 修改服务端res.write()，其中，将要返回的数据，填充进一条可执行的js语句中，一起返回。
问题3: 服务端返回的js语句是写死的，众口难调
解决3: 在客户端定义一个处理函数
function show(res){
//对res执行任何想要的操作
}
服务端返回一条函数调用语句，函数名必须和客户端定义的函数名保持一致:
res.write(`show('${weather}')`)
返回: show('晴 -10~-2 from dong')
在客户端执行时:
调用show函数:
参数res自动得到了'晴 -10~-2 from dong'
实现了: 客户端操作与服务端的分离
问题4: 服务端将函数名规定死，也是众口难调
解决4: 客户端发送:
<script src="url?callback=客户端函数名"
服务端:
先获得req中callback变量中的函数名
再将函数名拼接到res.write()中，代替写死的函数名
实现了: 处理逻辑和函数名与服务端无关
问题5: <script>在客户端只写死一次，仅能在首次加载页面时执行一次，无法反复发送请求
解决5: 动态添加<script>元素
在单击事件中:
$('<script src="http://localhost:3000?callback=doit">').appendTo("body");
问题6: 新增的<script>无法自动删除，造成积压
解决6: 在自定义的回调函数结尾，查找最后一个script，删除。
其实: $.ajax可自动实现jsonp效果:
$.ajax({
url:"url",
... : ... ,
dataType:"jsonp", //使用jsonp方式请求服务端
success:function(res){ ... }
})
原理: 同以上6步:
1. 动态创建script元素发送请求
2. 自动为success匿名函数定义随机函数名拼接到url?callback=随机函数
3. success函数执行后，自动删除script元素
强调:jsonp单靠客户端无法实现，必须服务端负责拼接函数名和要返回的数据。所以必须客户端服务端同时修改才可支持。
