人氣頗高 《英雄不再3》實體收藏版已被搶購一空
阿新 • • 發佈：2021-07-12
- JSONP是一個非官方的跨域解決方案，純粹憑藉程式設計師的聰明才智開發出來，只支援get請求
- 工作方式：在網頁有一些標籤天生具有跨域能力：img、link、iframe、script；JSONP就是利用script標籤的跨域能力來發送請求的
8.3.1. 原理
.html
- response.end()返回的結果是函式呼叫，函式的引數是想給客戶端返回結果的資料，函式必須在前端頁面提前宣告，（前端頁面的函式對返回過去的資料進行處理）
- script標籤中引用url
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原理演示</title> <style> #result { width: 300px; height: 120px; border: 1px solid #409EFF; } </style> </head> <body> <div id="result"></div> <script> //處理資料 function handle(data) { //獲取result元素 const result = document.getElementById("result"); result.innerHTML = data.name; } </script> <!-- <script src="http://127.0.0.1:8848/HBuilderProjects/ajax/%E8%B7%A8%E5%9F%9F/JSONP/js/app.js"></script> --> <script src="http://127.0.0.1:8000/jsonp-server"></script> </body> </html>
server.js
//原理：返回的結果是函式呼叫，函式的引數是想給客戶端返回結果的資料
//函式要在前端頁面提前宣告（前端函式對返回過去的資料進行處理）
app.all('/jsonp-server', (request, response) => {
const data = {
name: 'phy'
};
//將資料轉化成字串
let str = JSON.stringify(data);
//返回結果
response.end(`handle(${str})`);
})
8.3.2. JSONP實踐
.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例</title> </head> <body> 使用者名稱：<input type="text" id="username" /> <p></p> <script> //獲取元素 const input = document.getElementById("username"); const p = document.querySelector('p'); //宣告handle函式 function handle(data) { input.style.border = "solid 1px #f00"; p.innerHTML = data.msg; } //失去焦點事件 input.onblur = function () { let username = this.value; //向服務端傳送請求，檢測使用者名稱是否存在 //1、建立script標籤 const script = document.createElement('script'); //2、設定標籤的src屬性 script.src = 'http://127.0.0.1:8000/check-username'; //3、將script插入到文件中 document.body.appendChild(script); } </script> </body> </html>
server.js
//檢測使用者名稱是否存在
app.all('/check-username', (request, response) => {
const data = {
exist: 1,
msg: '使用者名稱已經存在'
};
//將資料轉化成字串
let str = JSON.stringify(data);
//返回結果
response.end(`handle(${str})`);
})
8.3.3. jQuery-jsonp
.html
url後需加?callback=?固定寫法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery-jsonp</title> <style> #result { width: 300px; height: 100px; border: solid 1px #089; } </style> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <!-- 210323 --> <button>點擊發送jsonp請求</button> <div id="result"> </div> <script> $('button').eq(0).click(function () { //url後需加?callback=?固定寫法 $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) { $('#result').html(` 名稱：${data.name},<br> 校區：${data.city} `) }) }) </script> </body> </html>
server.js
//jQuery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
const data = {
name: 'jscksmk',
city: ['北京', '上海', '杭州']
};
//將資料轉化成字串
let str = JSON.stringify(data);
//接收callback引數
let cb = request.query.callback;
//返回結果
response.end(`${cb}(${str})`);
})