js調用後臺數據的方法彙總(包括js原生,ajax,websocket,axios,nodeJS等)

1.js原生

// 特殊字符轉義
function filter(str) {
    str += ''; // 隱式轉換
    str = str.replace(/%/g, '%25');
    str = str.replace(/\+/g, '%2B');
    str = str.replace(/ /g, '%20');
    str = str.replace(/\//g, '%2F');
    str = str.replace(/\?/g, '%3F');
    str = str.replace(/&/g, '%26');
    str = str.replace(/\=/g, '%3D');
    str = str.replace(/#/g, '%23');
    return str;
}

// js格式化對象爲url參數
function formateObjToParamStr(paramObj) {
    var sdata = [];
    for (var attr in paramObj) {
        sdata.push(attr + '=' + filter(paramObj[attr]));
    }
    return sdata.join('&');
}

// 建立ajax請求
function createXMLHttpRequest(url, type, params, callback) {
    var xhr = null;
    // 1.先建立XMLHttpRequest請求
    if (window.XMLHttpRequest) {// 主流瀏覽器
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {// 低版本IE瀏覽器(IE5 and IE6)
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr != null) {
        if (type.toLowerCase() == 'get') {
            // 2.請求行(請求方式和請求地址),get請求須要把參數拼接到url後面
            xhr.open(type, url + '?' + formateObjToParamStr(params));
            // 4.請求主體(send發送請求),get請求發送null
            xhr.send(null);
        } else if (type.toLowerCase() == 'post') {
            // 2.請求行(請求方式和請求地址)
            xhr.open(type, url);
            // 3.請求頭,只對post請求
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 4.請求主體(send發送請求),post請求須要把參數放在send()裏面
            xhr.send(formateObjToParamStr(params));
        }
        // 5.監聽狀態變化
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    // 6.接收返回數據
                    //請求成功
                    callback(xhr.response)
                } else {
                    // 請求失敗
                }
            }
        };

    } else {
        alert("您的瀏覽器不支持XMLHTTP");
    }
}

// 使用
createXMLHttpRequest('https://www.baidu.com/cache/aladdin/ui/tabs5/tabs5.js', 'get', {v: 20170208}, function (data) {
    document.body.innerHTML = data;
});

2.jquery的Ajax

let params = {
    name: 'qinghuo',
    age:18
};
$.ajax({
    url:'https://www.baidu.com',
    type:'post',
    async: true,
    data:params,
    success: function(res){
        console.log('後臺返回數據'+res.data)
    },
    error: function(){
        console.log('接口請求失敗')
    }
});

3.HTML5的websocket

function WebSocketTest() {
    if ("WebSocket" in window) {
        console.log("您的瀏覽器支持 WebSocket!");

        // 打開一個 web socket
        var ws = new WebSocket("ws://localhost:9998/echo");

        ws.onopen = function () {
            // Web Socket 已鏈接上，使用 send() 方法發送數據
            ws.send("發送數據");
            console.log("數據發送中...");
        };

        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            console.log("數據已接收...");
        };

        ws.onclose = function () {
            // 關閉 websocket
            console.log("鏈接已關閉...");
        };
    } else {
        // 瀏覽器不支持 WebSocket
        alert("您的瀏覽器不支持 WebSocket!");
    }
}

4.vue的axios

• get請求

// 爲給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求能夠這樣作
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• post請求

axios.post('/user', {
    name: 'qinghuo',
    age: 18
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

5.nodejs的http模塊

const http = require("http");

const postData = JSON.stringify({name: "qinghuo", age: "18"});
//data = require('querystring').stringify(data);  

const options = {
  hostname: 'www.google.com',
  port: 80,
  path: '/upload',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': Buffer.byteLength(postData)
  }
};

const req = http.request(options, (res) => {
  console.log(`狀態碼: ${res.statusCode}`);
  console.log(`響應頭: ${JSON.stringify(res.headers)}`);
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
    console.log(`響應主體: ${chunk}`);
  });
  res.on('end', () => {
    console.log('響應中已無數據。');
  });
});

req.on('error', (e) => {
  console.error(`請求遇到問題: ${e.message}`);
});

// 寫入數據到請求主體
req.write(postData);
req.end();