1 插件/组件
插件/组件:拥有专属的HTML,CSS,JS的页面独立区域(重用)
三个来源:
-
jquery ui
1.引入jquery-ui.css
2.按插件要求编写HTML结构和内容
3.再引入jQuery.js和 jquery-ui.js
4.找到插件的父元素,调用插件API:$(插件父元素).插件函数()侵入性:插件能根据自己需要自动添加样式类或自定义扩展属性
-
第三方插件
-
自定义插件
前提:已经用HTML,CSS,JS实现插件效果和功能。
1)将插件的CSS提取出来,保存在一个独立的css文件
要求: 为了避免和其他插件存在相同的样式类发生冲突,必须保证每个样式类都要以统一的插件类名作为前缀!
2)定义插件的js: 向jQuery的原型对象中添加自定义插件函数jQuery.fn.插件函数=function(){ //this->$(父元素) //2件事: //1. 侵入class: //2. 绑定事件处理函数: }//调用时: $(父元素).插件函数();
使用插件的方法和使用官方插件的方法相同
2 ajax
//jQuery封装了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 跨域
一个域名下网页,向另一个域名下发送请求,请求另一个域名下的资源,五种跨域类型:
- 一级域名不同: www.a.com -> www.b.com
- 二级域名不同: oa.tedu.com -> hr.tedu.com
- 端口不同: localhost:5500 -> localhost:3000
- 协议不同: http:localhost -> https:localhost
- 即使同一台机器: 域名localhost -> IP 127.0.0.1
发送异步跨域请求:
-
JSONP(JSON with Padding) 填充式json,通过script.src
script没有跨域限制,能够去请求一段代码到客户端自动执行
问题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", type:"type", data:"data", dataType:"jsonp", //使用jsonp方式请求服务端 success:function(res){ ... } error:function(err){} complete:function(){} }) 原理: 同以上6步: 1. 动态创建script元素发送请求 2. 自动为success匿名函数定义随机函数名拼接到url?callback=随机函数 3. success函数执行后,自动删除script元素 强调:jsonp单靠客户端无法实现,必须服务端负责拼接函数名和要返回的数据。所以必须客户端服务端同时修改才可支持。
-
服务器端跨域
修改响应头,添加允许跨域的地址:
res.writeHead(200, {“Access-Control-Allow-Origin”: “请求来自的地址”});
*表示对所有地址开放访问