Promiseおよびパラメータによるパッケージajaxリクエストの解体


文書ディレクトリ
  • 1.フロントエンドコード
  • 2.バックエンドコード
  • 1)バックエンドプロジェクトを作成
  • 2)routesの下にindexを作成する.js,users.js,コードは以下の


  • 3.注:
  • 1.フロントエンドコード
    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <script>
        /**
         * type: get/post
         * url: http://localhost:3000  http://localhost:3000/details  http://localhost:3000/users
         * data: lid=5 / uname=lili&upwd=123456
         * dataType: '' / 'json',          json     ,   dataType  ajax         
         * **/
        ajax({
          
          type: 'get',
          url: 'http://localhost:3000',
          dataType: 'json'
        })
        // data            data: undefined
        ajax({
          
          type: 'get',
          url: 'http://localhost:3000/details',
          data: 'lid=0',
          dataType: 'json'
        })
        ajax({
          
          type: 'post', 
          url: 'http://localhost:3000/users', 
          data: 'uname=lili&upwd=123456',
        }).then(function(res){
          
          alert(res)
        })
        // dataType            dataType: undefined
    
        function ajax({
          type, url,data, dataType}){
          
          return new Promise(function(open){
          
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function(){
          
              if(xhr.readyState === 4 && xhr.status === 200){
          
                if(dataType === 'json'){
          
                  var res = JSON.parse(xhr.responseText)
                }else{
          
                  var res = xhr.responseText
                }
                console.log(res)
                open(res)
              }
            }
    
            if(type === 'get' && data !== undefined){
          
              url += `?${
            data}`
            }
            xhr.open(type, url, true)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    
            if(type === 'get'){
          
              xhr.send()
            }else{
          
              xhr.send(data)
            }
          })
        }
      script>
    body>
    html>
    

    また、ajaxの実際のコードは以下のように実現されています.
    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <script>
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){
          
          if(xhr.readyState === 4 && xhr.status === 200){
          
            console.log(xhr.responseText)
          }
        }
        xhr.open('get', 'http://localhost:3000', true)
        xhr.send()
      script>
    body>
    html>
    

    2.バックエンドコード
    1)バックエンドプロジェクトの作成
    利用promise及参数解构封装ajax请求_第1张图片
    2)routesの下にindexを作成する.js,users.js、コードは以下の通りです
    // index.js
    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    var products = [
      {
         
        lid:1,
        pname:'   ',
        price:3400
      },
      {
         
        lid:2,
        pname:'  ',
        price:5400
      },
      {
         
        lid:3,
        pname:'iPad',
        price:6400
      }
    ]
    
    router.get('/', function(req, res, next) {
         
      res.send(products)
    });
    
    router.get('/details', function(req, res, next){
         
      var lid = req.query.lid
      res.send(products[lid])
    })
    
    module.exports = router;
    
    
    // user.js
    var express = require('express');
    var router = express.Router();
    
    /* GET users listing. */
    router.post('/', function(req, res, next) {
         
      var uname = req.body.uname
      var upwd = req.body.upwd
      if(uname === 'lili' && upwd === '123456'){
         
        res.send('    ')
      }else{
         
        res.send({
         
          code: 0,
          message: '        '
        })
      }
    });
    
    module.exports = router;
    
    

    3.注意:
    ドメイン間を避けるために、フロントエンドコードとバックエンドを同時に1つのプロジェクトに配置し、同じアドレスを使用してリクエスト呼び出しインタフェースを送信できます.