node.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > node.js > Node.js JSONP接口

Node.js使用JSONP接口的具体用法

作者：爱健身的小刘同学

JSONP是一个跨域解决方案,本文主要介绍了Node.js使用JSONP接口的具体用法,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

1. 概念及特点

概念：浏览器通过 <script> 标签的 src 属性，请求服务器上的数据，同时服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP

特点：  ①   JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象

②   JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求

2. 创建 JSONP 接口的注意事项

如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否者 JSONP 接口会被处理成开启了 CORS 的接口

// 优先创建 JSONP 接口    [这个接口不会被处理成 CORS 接口]
app.get('/api/jsonp', (req, res) =&gt; { })

// 配置 CORS 中间件 [后续的所有接口都会被处理成 CORS 接口]
app.use(cors())

// 这是一个开启了 CORS 的接口
app.get('/api/get', (req, res) =&gt; { })

3. 实现 JSONP 接口的步骤

①   获取客户端发送过来的回调函数的名字

②   得到要通过 JSONP 形式发送给客户端的数据

③   根据前两步得到的数据，拼接出一个函数调用的字符串

④   把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行

4. 实现 JSONP 接口的具体代码

app.get('/api/jsonp', (req, res) => {
    // 1. 
    const funName = req.query.callback
    // 2. 
    const data = { name: 'zj', age: '22' }
    // 3. 
    const scriptStr = `${funName}(${JSON.stringify(data)})`
    // 4. 
    res.send(scriptStr)
})

5. 在网页中使用 JQuery 发起 JSONP 请求

调用 $.ajax()函数，提供 JSONP 的配置选项，从而发起 JSONP 请求

$('#btnJSONP').on('click', () => {
    $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1/api/jsonp',
        dataType: 'jsonp', // 表示要发起的是 JSONP 请求
        success: (res) => {
            console.log(res)
        }
    })
})

使用JSONP格式实现跨域

实现步骤

实现代码 -- 在nodejs中使用http内置模块起一个服务，端口号为3000

const url = require('url')

const http = require('http')

const server = http.createServer((req,res)=>{
    if(req.url === '/favicon.ico') return  //图标忽略 --- 图标地址也会请求后台服务
    const {query,pathname} = url.parse(req.url,true)  //若加上true这个参数，query字符串参数会自动转成对象格式

    //设置头部信息 状态为200 内容为JSON格式  如果要返回html片段这设置为text/html
    res.writeHead(200, { 'Content-Type': 'application/json' });

    if(pathname == '/api/data'){
        //定义对象，返回给前端的   数据
        const obj = {code:200,message:'jsonp形式返回给前端'}
        //返回一个JSON调用的函数
        res.end(`toFront(${JSON.stringify(obj)})`)
    }else{
        //简单处理了
        res.writeHead(404, { 'Content-Type': 'application/json' });
        res.end('404')

    }

   //jsonp跨域操作
   //  console.log(req.url) //获取请求除域名外的地址 例如 localhost:300/api  只获取/api
})
server.listen(3000,()=>{
    console.log("服务已启动")
})

在客户端的代码

 <script type="text/javascript">
    //jsonp跨域步骤
    //1.动态创建一个script标签
    const newscript = document.createElement('script')
    //2.src指向接口的地址
    newscript.src = 'http://localhost:3000/api/data'
    document.body.appendChild(newscript  )
    //3.定义一个函数和后端调用的函数名一样
    function toFront(res){
      //后台返回的数据  这个函数是后台服务调用过来的
      console.log(res) 
    }
  </script>

执行的结果 ,返回一个JSON格式的文档

到此这篇关于Node.js使用JSONP接口的具体用法的文章就介绍到这了,更多相关Node.js JSONP接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:
阅读全文