JSONP

JSONP 是一个能够被跨域访问资源的方法。

服务端

server.go

  1. package main
  3. import (
  4.     "math/rand"
  5.     "net/http"
  6.     "time"
  8.     "github.com/labstack/echo"
  9.     "github.com/labstack/echo/middleware"
  10. )
  12. func main() {
  13.     e := echo.New()
  14.     e.Use(middleware.Logger())
  15.     e.Use(middleware.Recover())
  17.     e.Static("/", "public")
  19.     // JSONP
  20.     e.GET("/jsonp", func(c echo.Context) error {
  21.         callback := c.QueryParam("callback")
  22.         var content struct {
  23.             Response  string    `json:"response"`
  24.             Timestamp time.Time `json:"timestamp"`
  25.             Random    int       `json:"random"`
  26.         }
  27.         content.Response = "Sent via JSONP"
  28.         content.Timestamp = time.Now().UTC()
  29.         content.Random = rand.Intn(1000)
  30.         return c.JSONP(http.StatusOK, callback, &content)
  31.     })
  33.     // Start server
  34.     e.Logger.Fatal(e.Start(":1323"))
  35. }

客户端

index.html

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  7.     <title>JSONP</title>
  8.     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  9.     <script type="text/javascript">
  10.         var host_prefix = 'http://localhost:1323';
  11.         $(document).ready(function() {
  12.             // JSONP version - add 'callback=?' to the URL - fetch the JSONP response to the request
  13.             $("#jsonp-button").click(function(e) {
  14.                 e.preventDefault();
  15.                 // The only difference on the client end is the addition of 'callback=?' to the URL
  16.                 var url = host_prefix + '/jsonp?callback=?';
  17.                 $.getJSON(url, function(jsonp) {
  18.                     console.log(jsonp);
  19.                     $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
  20.                 });
  21.             });
  22.         });
  23.     </script>
  25. </head>
  27. <body>
  28.     <div class="container" style="margin-top: 50px;">
  29.         <input type="button" class="btn btn-primary btn-lg" id="jsonp-button" value="Get JSONP response">
  30.         <p>
  31.             <pre id="jsonp-response"></pre>
  32.         </p>
  33.     </div>
  34. </body>
  36. </html>