configuration steps

Directly in the page, through scriptthe label, vue-resourceimport the script file;
Note: The sequence of references is: first Vuereference the script file of , and then reference vue-resourcethe script file of ;

build server

Write the following app.js script

// 导入 http 内置模块
const http = require('http')
// 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
const urlModule = require('url')

// 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {

  // const url = req.url
  const { pathname: url, query } = urlModule.parse(req.url, true)

  if (url === '/getscript') {
    // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
    // var scriptStr = 'show()'

    var data = {
      name: 'xjj',
      age: 18,
      gender: '女孩子'
    }

    var scriptStr = `${query.callback}(${JSON.stringify(data)})`
    // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
    res.end(scriptStr)
  } else {
    res.end('404')
  }
})

// 指定端口号并启动服务器监听
server.listen(3000, function () {
  console.log('server listen at http://127.0.0.1:3000')
})

Enable node to run json files in the terminal

Start successfully!

Implementation principle of JSONP

Due to browser security restrictions, AJAX is not allowed to access data interfaces with different protocols, different domain names, and different port numbers. The browser considers this access unsafe;
The src attribute of the script tag can be pointed to the address of the data interface by dynamically creating the script tag, because the script tag does not have cross-domain restrictions, this method of data acquisition is called JSONP (note: according to the implementation principle of JSONP, know , JSONP only supports Get requests);
The specific implementation process:
- First define a callback method on the client to pre-define the operation on the data;
- Then submit the name of the callback method to the data interface of the server through the form of URL parameter passing; - The
server data interface is organized and sent to the client Data from the client, and then take the name of the callback method passed by the client, splice out a string that calls this method, and send it to the client for parsing and execution; - After the client gets the string returned by the server, it is used as a
script Parse and execute, so that the JSONP data can be obtained;

get request

getInfo() { // get 方式获取数据
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

post request

postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

JSONP request

jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

Source code one (vue-resource implements get, post, jsonp requests):

<!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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
  <!-- this.$http.jsonp -->
  <script src="./lib/vue-resource-1.3.4.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getInfo() { // 发起get请求
          //  当发起get请求之后， 通过 .then 来设置成功的回调函数
          this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
            // 通过 result.body 拿到服务器返回的成功的数据
            // console.log(result.body)
          })
        },
        postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
          //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
          //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
          this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })
        },
        jsonpInfo() { // 发起JSONP 请求
          this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
            console.log(result.body)
          })
        }
      }
    });
  </script>
</body>

</html>

Source code 2 (client JSONP page)

<!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>Document</title>
</head>

<body>
  <script>
    function showInfo123(data) {
      console.log(data)
    }
  </script>


<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
<!-- <script>
  show()
</script> -->

</body>

</html>

This article was written independently by the author

All original articles on this blog may not be used for commercial purposes and traditional media without my permission. Please indicate the source for reprinting by online media, otherwise it is an infringement.

Vue study notes (6): vue-resource implements get, post, jsonp requests