9.4 代码实现
9.4.1 主页实现
主页main.html实现代码如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>XMLHttpRequest与node服务异步通信测试</h2>
<hr />
输入一条消息
<input type="text" id="msg" />
<hr />
<input type="button" value="向服务器发送消息（同步通信）" onclick="send_MSG_1()" />
<input type="button" value="向服务器发送消息（异步通信）" onclick="send_MSG_2()" />
</body>
</html>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
//发送消息(异步)
function send_MSG_T() {
var xhttp = new XMLHttpRequest();
var msg = $("#msg").val();
xhttp.open("post", "http://localhost:1017/msg_Server_09?message=" + msg, true);
xhttp.onreadystatechange = function () {
if (xhttp.status == 200 && xhttp.readyState == 4) {
alert("2、测试中:" + xhttp.responseText);
}
}
xhttp.send();
}
//发送消息(同步)
function send_MSG_F() {
var xhttp = new XMLHttpRequest();
var msg = $("#msg").val();
xhttp.open("post", "http://localhost:1017/msg_Server_09?message=" + msg, false);
xhttp.onreadystatechange = function () {
if (xhttp.status == 200 && xhttp.readyState == 4) {
alert("2、测试中:" + xhttp.responseText);
}
}
xhttp.send();
}
//同步测试
function send_MSG_1() {
alert("1、测试前");
send_MSG_F();
alert("3、测试后");
}
//异步测试
function send_MSG_2() {
alert("1、测试前");
send_MSG_T();
alert("3、测试后");
}
</script>
9.4.2 后台主服务程序实现
Server.js实现代码：
const http_obj = require("http");//用于产生服务对象
const fs_obj = require("fs");//读写后台文件
const url_tran_obj = require("url");//解释URL
const server = http_obj.createServer(function (request, response) {
//请求路径处理
var req_str = decodeURI(request.url);
var req_head;
var POS = req_str.indexOf("?");
if (POS == -1) { req_head = req_str; }
else { req_head = req_str.substring(0, POS); }
//设置查询对象
var url_obj = url_tran_obj.parse(req_str, true);
var Q_obj = url_obj.query;
//响应头设置
response.setHeader("Content-Type", "text/plain;charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");//实现跨域访问
response.writeHead(200);
//%%%%%%%%%%%%%------------begin your code
//初始化所有服务对象
require("./09/server/server_09.js")(request, response, req_head, Q_obj);
//%%%%%%%%%%%%%--------------end your code
});
server.listen(1017);
console.log("Server is running at port 1017...");
9.4.3 后台子服务程序实现
Server_09.js实现代码：
function server_09(request, response, req_head, Q_obj) {
if (req_head == "/msg_Server_09") {
//消息服务测试
response.end("这里是火星，已收到来自地球的问候：\n" + Q_obj["message"]);
}
}
module.exports = server_09;
9.4.4 实现效果
在如图9.4所示的界面中输入"test"字样、若点击"向服务器发送消息（同步通信）"按钮，则依次弹出的消息如图9.5、9.6、9.7所示。
若点击"向服务器发送消息（异步通信）"按钮，则依次弹出的消息如图9.8、9.9、9.10所示。
9.6 仿真实训
给定nodeJS服务器框架如下：
// JavaScript source code
//------------请将这个文件保存为Unicode格式，否则麻烦大大的----------
const http_obj = require("http");//用于产生服务对象
const fs_obj = require("fs");//读写后台文件
const url_tran_obj = require("url");//解释URL
const server = http_obj.createServer(function (request, response) {
//请求路径处理
var req_str = decodeURI(request.url);
var req_head;
var POS = req_str.indexOf("?");
if (POS == -1) { req_head = req_str; }
else { req_head = req_str.substring(0, POS); }
//设置查询对象
var url_obj = url_tran_obj.parse(req_str, true);
var Q_obj = url_obj.query;
//响应头设置
response.setHeader("Content-Type", "text/plain;charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");//实现跨域访问
response.writeHead(200);
//%%%%%%%%%%%%%------------begin your code
if (req_head == "/server_for_MSG") {
//消息服务测试
response.end("这里nodeJS后台服务器，已收到来自前端的问候：\n" + Q_obj["new_MSG"]);
}
//%%%%%%%%%%%%%--------------end your code
});
server.listen(1008);
console.log("Server is running at port 1008...");
现提出如下设计需求：
- 测试XMLHttpRequest对象向后台服务发送一条消息，后台将处理结果返回到前端。
- 测试XMLHttpRequest对象与后台通信的同步交互处理。
- 测试XMLHttpRequest对象与后台通信的异步交互处理。
