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();