作者原文
1、首先要明确jsonp的原理:
jsonp的原理是利用了前端页面中可以送请求的标签属性,如a标签的href属性、img的src属性、iframe中的src属性、script中的src属性等等,使用可以发送请求的属性向后端发送数据请求。除此之外,能够在前后端交互的还有:fetch、ajax、websocket、axios等。
2、使用jsonp的有点是什么?
主要是使用jsonp是不受域的限制的,也就是说不需要像ajax请求数据一样需要解决跨域问题。
3、这样的话,使用jsonp又有什么不好的地方呢?
1、使用jsonp的话,需要向后端调节配合,需要后端发送什么样的数据类型。
2、使用jsonp的话,只能解决以get方式发送的请求,无法解决以post方式发送的请求
4、下面是代码示例
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> jsonp发送网络请求,原理解析</ title>
</ head>
< body>
< p class = " inp" >
< input type = " button" value = " 点我发送请求" id = " clickMe" >
</ p>
</ body>
</ html>
js部分的,利用script中的src属性来发送get请求 和 请求参数
< script src= "https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js" > < / script>
< script>
function fn ( data) {
console. log ( data. result) ;
}
$ ( "#clickMe" ) . click ( function ( ) {
var url = 'http://localhost:3000/users?callback=fn' ;
var script = document. createElement ( 'script' ) ;
script. src = url;
$ ( "body" ) . append ( script) ;
} ) ;
< / script>
下面是后端部分代码,需要用到nodejs处理方式。 -user路由
var express = require ( 'express' ) ;
var router = express. Router ( ) ;
router. get ( '/' , function ( req, res, next) {
var fn = req. query. callback;
console. log ( fn) ;
var callback = {
error_code: 0 ,
reason: '数据返回成功' ,
result: [
{
id: 1 ,
username: 'knity' ,
title: '程序中一个迷途小书童' ,
hobby: '就喜欢粘着你' ,
age: 18 ,
info: '幸福大概就是你喜欢粘着的那个人'
} ,
]
}
res. send ( fn+ "(" + JSON . stringify ( callback) + ")" ) ;
} ) ;
module. exports = router;
var express = require ( 'express' ) ;
var path = require ( 'path' ) ;
var usersRouter = require ( './routes/users' ) ;
var app = express ( ) ;
app. use ( '/users' , usersRouter) ;
var port = 3000 ;
app. listen ( port, ( ) => {
console. log ( 'this server is running at ' + port)
} )
module. exports = app;
好了,大概整个过程就是这样滴啦。幸福大概就是你喜欢粘着的那个人。。。