js调用后台数据的方法汇总(包括js原生,ajax,websocket,axios,nodeJS等)

js调用后台数据的方法汇总(包括js原生,ajax,websocket,axios,nodeJS等)

原创

于 2020-04-25 17:07:00 发布

·

24 阅读

·

0

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript

#ajax

#websocket

#okhttp

#开发语言

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