JSONP를 사용하여 데이터 보내기
17563 단어 webdevprogrammingjsonjavascript
그게 궁금했고 JavaScript를 사용하여하고 싶었습니다.
JSONP
다음이 필요합니다.
스크립트가 있는 클라이언트:
<script src="/jsonp-static"></script>
경로가 있는 서버:
const app = require('express')();
app.get('/jsonp-static', (req, res) => {
res.send(`jsonp({ data: 'data' })`);
});
무슨 일이야?
함수 호출인 문자열을 반환하는 요청을 대상으로 하는 스크립트는 클라이언트에서 해당 함수를 호출하려고 시도합니다.
해당 함수가 클라이언트에 없으면 참조 오류가 발생합니다.
서버에서 클라이언트 기능을 "호출"하는 것으로 보입니다. 이 호출은 스크립트가 문자열과 같은 함수 호출을 반환하는 요청을 가리킬 때 발생합니다.
서버에서 자바스크립트 코드 반환
코드는 텍스트뿐입니다. 원하는 대로 전송할 수 있습니다. 스크립트가 코드를 수신하면 실행을 시도합니다.
app.get('/js-code', (req, res) => {
res.send(`
console.log(
'Hi there! A script <script src="js-code"></script> will run me'
);
function iCanDoAnything() {
// i can add an element
const body = document.getElementsByTagName('body')[0];
const h1 = document.createElement('h1');
h1.innerText = 'Daayum! I really can do anything.';
body.appendChild(h1);
}
iCanDoAnything();
`);
});
완전한 소스 코드
NodeJS, Express, JavaScript를 사용하는 JSONP 완전한 소스 코드.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JSONP Client</title>
</head>
<body>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- NOTE! -->
<!-- TO RUN THE EXAMPLE, PLACE THIS FILE IN 'public' DIRECTORY!!! -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- The definition of a function that our server calls. -->
<script>
// Try commenting out the function
// The script with src="jsonp-static" throws ReferenceError jsonp
function jsonp(data) {
console.log(data);
}
</script>
<!-- Request a server to call our function with the data. -->
<script src="jsonp-static"></script>
<!-- Inspect the server response. -->
<script>
// SyntaxError
// JSON.parse: unexpected character at line 1 column 1 of the JSON data
fetch('jsonp-static')
.then((res) => res.json())
.then(console.log)
.catch(console.error);
// Read raw response from the stream because res.json() throws an error
fetch('jsonp-static')
.then((res) => res.body.getReader())
.then((reader) => {
let res = '';
let decoder = new TextDecoder();
// Parse data from the stream
return reader.read().then(function readStream({ value, done }) {
res += decoder.decode(value);
// Keep reading data until we are done, then return data
if (done) return res;
else return reader.read().then(readStream);
});
})
.then(console.log)
.catch(console.error);
</script>
<!-- The code received from the server should run. -->
<script src="js-code"></script>
</body>
</html>
서버.js
const express = require('express');
const { join } = require('path');
const app = express();
// NOTE!!!
// This is a gist, we can't use directories here.
// Make sure to place index.html in the 'public' directory.
app.use(express.static('public'));
app.get('/jsonp-static', (req, res) => {
res.send(`jsonp({ foo: 'foo' })`);
});
app.get('/js-code', (req, res) => {
res.send(`
console.log(
'Hi there! A script <script src="js-code"></script> will run me'
);
function iCanDoAnything() {
// i can add an element
const body = document.getElementsByTagName('body')[0];
const h1 = document.createElement('h1');
h1.innerText = 'Daayum! I really can do anything.';
body.appendChild(h1);
}
iCanDoAnything();
`);
});
app.listen(3000, () => console.log('server: http://localhost:3000'));
패키지.json
{
"version": "0.1.0",
"name": "jsonp",
"description": "Send data using html script tags",
"author": "Kostic Srecko",
"repository": {
"type": "git",
"url": "git+https://github.com/srele96/sk-experiments.git"
},
"bugs": {
"url": "https://github.com/srele96/sk-experiments/issues"
},
"scripts": {
"start": "nodemon server"
},
"dependencies": {
"express": "^4.18.1"
},
"devDependencies": {
"nodemon": "^2.0.18"
}
}
연결
내 GitHub 저장소에서 더 많은 실험
Reference
이 문제에 관하여(JSONP를 사용하여 데이터 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/srele96/send-data-using-jsonp-2fcc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
