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”: “请求来自的地址”});
*表示对所有地址开放访问

jQuery_2

jQuery

1 插件/组件

2 ajax

3 跨域

猜你喜欢