返回

javascript - 练习题:AJAX请求,node.js响应

发布时间:2022-11-24 19:42:01 14
# javascript# html# node.js# java# node.js

AJAX部分


<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>

<body>
用户:<input id="user" type="text"><br>
密码:<input id="pass" type="text"><br>
<button value="登录" id="btn">登录</button>
<script>
var btn = document.querySelector('button');
var user = document.querySelector('input#user');
var pass = document.querySelector('input#pass');

// 封装AJAX的get请求;
function ajax(option) {
var ajax = new XMLHttpRequest();
ajax.open(option.type, option.url + '?' + JsonToString(option.data), true); // 异步
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
option.success(ajax.responseText);
} else {
console.log('服务器错误');
}
}
}
}
// 封装josn to String
// {user:'anderson',pass:'123456'} => user=anderson&pass=123456
function JsonToString(json) {
var arr = [];
for (var i in json) {
arr.push(i + '=' + json[i]);
}
return arr.join('&'); // user=anderson&pass=123456
}

// 事件绑定到 button 上
btn.onclick = function () {
ajax({
type: 'get',
url: 'http://localhost:9217',
data: {
user: user.value,
pass: pass.value,
},
success: function (data) {
console.log(data);
if(data == '登录成功'){
document.body.style.background = 'gray';
}else{
console.log('登录失败');
}
},
error: function () {
console.log('服务器错误');
}
});
}

</script>
</body>

</html>

node.js 部分

// node.js 环境下的 web 服务,相当于:http://localhost:9217
var http = require('http');
http.createServer(function (request, response) {
response.setHeader('Access-Control-Allow-Origin', '*');
var url = request.url.substring(2); // 获取传来的参数
console.log(url);
var arr = url.split('&'); // 字符串转换成对象
var json = {}; // 形如: {user:anderson,pass:123456}
for (var i = 0; i < arr.length; i++) {
json[arr[i].split('=')[0]] = arr[i].split('=')[1];
}
// console.log(json['user']);
if (json['user'] == 'anderson' && json['pass'] == '123456') { // 基本判断
response.write('登录成功') // 可以回传
}else{
console.log("登录失败"); // 服务端输出
}
response.end();
}).listen(9217);
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线