jQuery的外掛程式和跨域 ajax

2022-09-03 08:21:10 字數 2467 閱讀 3601

1. 外掛程式: 也稱元件

什麼是: 擁有專屬的html,css和js的獨立頁面區域

為什麼: 重用!

何時: 只要乙個功能/區域可能被反覆使用時

如何: 

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()//呼叫時: $(父元素).外掛程式函式();

使用外掛程式: 同使用jqueryui的做法

1. 引入外掛程式的css

2. 按照外掛程式要求編寫html

3. 引入jquery.js和外掛程式.js

4. 查詢外掛程式父元素,呼叫外掛程式函式

2. ajax:

$.ajax(,

datatype:"json", //可自動將伺服器返回的json字串轉為物件

success:function(res)

})//jquery 3.x 支援promise

.then(function(res))

3. 跨域: 

什麼是: 乙個網域名稱下網頁,向另乙個網域名稱下傳送請求,請求另乙個網域名稱下的資源

比如: 現在在http://localhost/index.html下

href=""

問題: 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: 請元素幫助傳送請求

問題2: 傳送請求,必須返回一條可執行的js語句

解決2: 修改服務端res.write(),其中,將要返回的資料,填充進一條可執行的js語句中,一起返回。

問題3: 服務端返回的js語句是寫死的,眾口難調

解決3: 在客戶端定義乙個處理函式

function show(res)

服務端返回一條函式呼叫語句,函式名必須和客戶端定義的函式名保持一致: 

res.write(`show('$')`)

返回: show('晴 -10~-2 from dong')

在客戶端執行時: 

呼叫show函式:

引數res自動得到了'晴 -10~-2 from dong'

實現了: 客戶端操作與服務端的分離

問題4: 服務端將函式名規定死,也是眾口難調

解決4: 客戶端傳送:

服務端: 

先獲得req中callback變數中的函式名

再將函式名拼接到res.write()中,代替寫死的函式名

實現了: 處理邏輯和函式名與服務端無關

問題5: 在客戶端只寫死一次,僅能在首次載入頁面時執行一次,無法反**送請求

解決5: 動態新增元素

在單擊事件中: 

問題6: 新增的無法自動刪除,造成積壓

解決6: 在自定義的**函式結尾,查詢最後乙個script,刪除。

其實: $.ajax可自動實現jsonp效果: 

$.ajax(

})原理: 同以上6步: 

1. 動態建立script元素傳送請求

2. 自動為success匿名函式定義隨機函式名拼接到url?callback=隨機函式

3. success函式執行後,自動刪除script元素

強調:jsonp單靠客戶端無法實現,必須服務端負責拼接函式名和要返回的資料。所以必須客戶端服務端同時修改才可支援。

jquery的form外掛程式上傳檔案ajax驗證

最近需要寫乙個上傳檔案後的ajax驗證,找了半天用jquery的form外掛程式結合ajax寫了出來。看來jquery還是很強大的,以後的好好學習一下。首先要引入jquery和form外掛程式,注意順序一定要先jquery,然後再form 然後是乙個form表單,上傳檔案的form表單 最後是乙個j...

JQuery的跨域方法

因發現有不少博友發園內簡訊問及js的跨域問題,我想很多程式設計師的腦海裡面還認為js是不能跨域的,其實這是乙個錯誤的觀點 有很多人在網上找其解 決方法,教其用iframe去解決的文章很多,真有那麼複雜嗎?其實很簡單的,如果你用jquery,乙個getjson方法就搞定了,而且是一行 搞 定。下面開始...

jquery跨域問題

js中函式請求外部系統後台方法時產生跨域問題 不在同一ip,不在同一埠,不用同一協議,滿足其一構成跨域 jquery get 能輕鬆解決跨域問題,post不能跨域 function test 第二種形式 需要加callback引數 伺服器端 public void test this.respons...