JQUERY-自定義插件-ajax-跨域訪問

正課:

1. ***自定義插件:

2. Ajax

3. *****跨域訪問:

 

1. ***自定義插件:

 前提: 已經用html,css,js實現了

 2種風格:

  1. jQueryUI侵入式:

    1. css應提取到獨立的css文件中

      強調: 全部插件內的子元素選擇器都要以插件父元素class開頭，避免與其餘插件衝突。

    2. 定義獨立的js文件：

     1. 判斷是否引入jQuery

     2. 在jQuery的原型對象中添加插件函數

       1. 侵入class和自定義擴展屬性

       2. 綁定事件

    3. 使用插件:

      引入插件.css,

      按插件要求編寫HTML內容

      引入jQuery

      引入插件.js

      編寫自定義腳本: 查找插件父元素，調用插件API

  2. Bootstrap DIV式:

    1. css應提取到獨立的css文件中: 同jQueryUI方式

    2. 定義獨立的js文件：

      強調: 不須要添加函數，不用侵入

    3. 使用插件:

      引入插件.css

      按插件要求編寫HTML內容

      在HTML元素上，手動添加class和自定義擴展屬性

      引入jQuery

      引入插件.js

      強調: 不須要調用任何插件函數

 

2. Ajax:

 $.ajax({

  type:"get/post",

  url:"xxx.php",

  data: 查詢字符串/{ 參數:值, 參數:值, ...}/$form.serialize(),

  dataType:"json"//若是返回json，則自動轉爲對象,

  success:function(data){ //請求響應結束且成功

  },

  error:function(){ //請求響應結束，但出錯

  },

  complete:function(){ //只要請求響應結束

  }

 })//3.x

  .then(function(data){ ... })

 dataType: 若是服務端定義了響應的內容類型爲applicaton/json， 則$.ajax可自動轉換，沒必要寫dataType

 $.get("url", data, function(data){...}, dataType)

  $(parent).load("url",function(){ ... }) 將返回的內容，填充到parent內

  $.getJSON()

  $.getScript()

 $.post()

 

3. *****跨域請求:

 什麼是跨域:

  1. 域名不一樣， 2. 二級域名不一樣, 3. 端口號不一樣, 4. 協議

 問題: 服務端不容許用xhr對象跨域發送ajax請求

 解決: 利用能夠跨域的元素(link, script, iframe, img, ... )

  1.用script變通實現跨域請求:

   JSONP: JSON with padding 填充式json

   方案1:

     服務端: 將返回的數據，填充在一條js語句中返回

     客戶端: 用script src="http://xxx/xx.php"

    問題: 客戶端數據的處理邏輯是在服務端寫死的，衆口難調

   方案2:

     服務端: 返回一條函數調用的js語句，將數據做爲參數

     客戶端: 提早定義和服務端同名的js函數

    問題: 函數名是在服務器端定死的

   方案3: 

     服務端: 先接受客戶端傳入的函授名參數(callback)

            在返回結果中動態拼接函數名

     客戶端: script src="xxx.php?callback=函數名"

    問題: script是寫死的，只能在頁面加載時發送一次請求

   方案4:

     客戶端: 不要寫死script

         在處理函數中，動態建立script，發送請求

         在處理函數結尾，刪除動態建立的script

    問題: 和傳統ajax不一致！

   方案5:

    $.ajax({

      type:"",

      url:"",

      data:...,

      dataType:"jsonp",

      success:function(){

        

      }

    })

  2. 經過服務器端開放跨域:

   php: header('Access-Control-Allow-Origin:http://請求來自的網址');

 

 

正課:

1. ***自定義插件:

2. Ajax

3. *****跨域訪問:

 

1. ***自定義插件:

 前提: 已經用html,css,js實現了

 2種風格:

  1. jQueryUI侵入式:

    1. css應提取到獨立的css文件中

      強調: 全部插件內的子元素選擇器都要以插件父元素class開頭，避免與其餘插件衝突。

    2. 定義獨立的js文件：

     1. 判斷是否引入jQuery

     2. 在jQuery的原型對象中添加插件函數

       1. 侵入class和自定義擴展屬性

       2. 綁定事件

    3. 使用插件:

      引入插件.css,

      按插件要求編寫HTML內容

      引入jQuery

      引入插件.js

      編寫自定義腳本: 查找插件父元素，調用插件API

  2. Bootstrap DIV式:

    1. css應提取到獨立的css文件中: 同jQueryUI方式

    2. 定義獨立的js文件：

      強調: 不須要添加函數，不用侵入

    3. 使用插件:

      引入插件.css

      按插件要求編寫HTML內容

      在HTML元素上，手動添加class和自定義擴展屬性

      引入jQuery

      引入插件.js

      強調: 不須要調用任何插件函數

 

2. Ajax:

 $.ajax({

  type:"get/post",

  url:"xxx.php",

  data: 查詢字符串/{ 參數:值, 參數:值, ...}/$form.serialize(),

  dataType:"json"//若是返回json，則自動轉爲對象,

  success:function(data){ //請求響應結束且成功

  },

  error:function(){ //請求響應結束，但出錯

  },

  complete:function(){ //只要請求響應結束

  }

 })//3.x

  .then(function(data){ ... })

 dataType: 若是服務端定義了響應的內容類型爲applicaton/json， 則$.ajax可自動轉換，沒必要寫dataType

 $.get("url", data, function(data){...}, dataType)

  $(parent).load("url",function(){ ... }) 將返回的內容，填充到parent內

  $.getJSON()

  $.getScript()

 $.post()

 

3. *****跨域請求:

 什麼是跨域:

  1. 域名不一樣， 2. 二級域名不一樣, 3. 端口號不一樣, 4. 協議

 問題: 服務端不容許用xhr對象跨域發送ajax請求

 解決: 利用能夠跨域的元素(link, script, iframe, img, ... )

  1.用script變通實現跨域請求:

   JSONP: JSON with padding 填充式json

   方案1:

     服務端: 將返回的數據，填充在一條js語句中返回

     客戶端: 用script src="http://xxx/xx.php"

    問題: 客戶端數據的處理邏輯是在服務端寫死的，衆口難調

   方案2:

     服務端: 返回一條函數調用的js語句，將數據做爲參數

     客戶端: 提早定義和服務端同名的js函數

    問題: 函數名是在服務器端定死的

   方案3: 

     服務端: 先接受客戶端傳入的函授名參數(callback)

            在返回結果中動態拼接函數名

     客戶端: script src="xxx.php?callback=函數名"

    問題: script是寫死的，只能在頁面加載時發送一次請求

   方案4:

     客戶端: 不要寫死script

         在處理函數中，動態建立script，發送請求

         在處理函數結尾，刪除動態建立的script

    問題: 和傳統ajax不一致！

   方案5:

    $.ajax({

      type:"",

      url:"",

      data:...,

      dataType:"jsonp",

      success:function(){

        

      }

    })

  2. 經過服務器端開放跨域:

   php: header('Access-Control-Allow-Origin:http://請求來自的網址');