ajax 第十七节 AJAX-jsonp的实现原理
-
jsonp是一种跨域通信的手段，它的原理其实很简单：
-
首先是利用script标签的src属性来实现跨域。
-
通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
-
由于使用script标签的src属性，因此只支持get方法
-
- 演变方法1
＝＝＝＝＝＝＝＝＝＝index.html＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="result"></div>
<script src="../js/app.js"></script>
</body>
</html>
=======================server.js===============================
const data = {
name: 'DX3300123'
}
function handle(data) {
const result = document.getElementById('result');
result.innerHTML = data.name;
}
handle(data)
- 演变方法2
====================index.html=======================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
function handle(data) {
const result = document.getElementById('result');
result.innerHTML = data.name;
}
</script>
<script src="../js/app.js"></script>
</body>
</html>
======================server.js ======================
const data = {
name: 'DX33'
}
handle(data)
- 演变方法3
=================index.html=====================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
function handle(data) {
const result = document.getElementById('result');
result.innerHTML = data.name;
}
</script>
<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
=====================server.js ======================
const { request, response } = require('express');
const express = require('express');
const app = express();
app.all('/jsonp-server', (request, response) => {
response.send('console.log("hello world jsonp")');
})
app.listen(8000, () => {
console.log('服务已经启动,8000端口监听中.......');
})
- 演变方法4
==============index.html===================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 300px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
function handle(data) {
const result = document.getElementById('result');
result.innerHTML = data.name;
}
</script>
<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
=========================server.js ===========================
const { request, response } = require('express');
const express = require('express');
const app = express();
app.all('/jsonp-server', (request, response) => {
const data = { name: 'DX33 hello world' };
let str = JSON.stringify(data);
//模板字符串，此处使用的是返引号
response.send(`handle(${str})`);
})
app.listen(8000, () => {
console.log('服务已经启动,8000端口监听中.......');
})
