Learning jsonp

Time:2020-3-30

jsonp

I’ve learned it before, but I was quite ignorant at that time. I forgot all about it. This time, I should review jsonp once, A kind of

This is to solve the cross domain problem of the client. The server can solve the cross domain problem simply by adding a request header

const express = require('express')

const app = express()

app.get('/', (req, res, next) => {
  Console. Log (` received client request: ${req. URL} '))
  var data = JSON.stringify({
    foo: 'bar',
    list: [1, 2, 3]
  })
  setTimeout(function () {
    res.end(`${req.query.callback}(${data})`)
  }, 1000)
})

app.listen(3000, () => {
  console.log('running...')
})
JSON - Examples


  


    //Asynchronous request cross domain restriction (Ajax)
    //Different domain names, different protocols, different port numbers
    
    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(111)
      }
    })

    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(222)
      }
    })

    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(333)
      }
    })

    function jsonp(option) {
      //Mount the function passed in by the user through the object namespace to the global
      var callbackName = 'itcast_' + Math.random().toString().substr(2) + Math.random().toString().substr(2)
      !window.callbacks && (window.callbacks = {})
      window.callbacks[callbackName] = function (data) {
        option.success(data)
        //That means you can delete the script tag
        //Script can be used directly here because the following variables are promoted. When script is used here, the execution of the following code will be finished for a long time
        document.body.removeChild(script)
      }
      //1. Solve the URL problem
      //2. Solve the problem of callback processing function
      option.url = option.url + '?callback=callbacks.' + callbackName
      var script = document.createElement('script')
      script.src = option.url
      //Script up to DOM
      document.body.appendChild(script)
    }

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]