jQuery_2

1 插件/組件

插件/組件：擁有專屬的HTML，CSS，JS的頁面獨立區域(重用)
三個來源：

1. jquery ui
   1.引入jquery-ui.css
   2.按插件要求編寫HTML結構和內容
   3.再引入jQuery.js和 jquery-ui.js
   4.找到插件的父元素，調用插件API:$(插件父元素).插件函數()

   侵入性：插件能根據自己需要自動添加樣式類或自定義擴展屬性

2. 第三方插件

3. 自定義插件
   前提：已經用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 跨域

一個域名下網頁，向另一個域名下發送請求，請求另一個域名下的資源，五種跨域類型：

1. 一級域名不同: www.a.com -> www.b.com
2. 二級域名不同: oa.tedu.com -> hr.tedu.com
3. 端口不同: localhost:5500 -> localhost:3000
4. 協議不同: http:localhost -> https:localhost
5. 即使同一臺機器: 域名localhost -> IP 127.0.0.1

發送異步跨域請求:

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”,
   … : … ,
   dataType:“jsonp”, //使用jsonp方式請求服務端
   success:function(res){ … }
   })
   原理: 同以上6步:
   1. 動態創建script元素髮送請求
   2. 自動爲success匿名函數定義隨機函數名拼接到url?callback=隨機函數
   3. success函數執行後，自動刪除script元素
   強調:jsonp單靠客戶端無法實現，必須服務端負責拼接函數名和要返回的數據。所以必須客戶端服務端同時修改纔可支持。

2. 服務器端跨域
   修改響應頭，添加允許跨域的地址：
   header(“Access-Control-Allow-Origin”: “請求來自的地址”);
   res,writeHead(200, {“Access-Control-Allow-Origin: 請求來自的地址”});