使用jQuery完成前后端分离项目 前后端分离ajax

前后端不分离

先简单说一下前后端不分离的情况，有跳转页面（有历史记录）。

1、页面
<form action="http://localhost:4001" method="GET">
    <input type="text" name="user">
    <input type="submit">
</form>

2、node当中的服务
var http=require("http");
var server=http.createServer(function(req,res){
    req.on("data",function(){

    })
    req.on("end",function(){
        console.log(req.url); //请求的地址
        res.write("1001");
        res.end();
    })
})
server.listen(4001,"localhost",function(){
    console.log("服务开启了");
})

结果：

1、a.js node服务，先开启服务

2、页面上的

点提交跳转（有历史记录）：

终端有返回req.url 。

前后端分离 Ajax

指当前不跳转页面；客户端给服务端发送消息，服务端返回给原客户端；把这种方式称为前后端分离，所用到的技术就叫Ajax。

1、ajax.html  ajax内容就这抹点儿

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", loadHandler);
ajax.open("GET", "http://localhost:4001?user=张三");
ajax.send();
function loadHandler(e) {
    console.log(ajax.response);
}

2、a.js node服务

//node当中的服务

// 加载http模块
var http = require("http");
//加载以下模块，解析字符串为对象
var querystring = require("querystring");
// 创建服务,参数是一个函数,函数中有两个参数
// 1\req叫做请求,2\res就是响应
var server = http.createServer(function (req, res) {
    // 请求消息接收数据的过程
    req.on("data", function () {
        //_data  接收的数据
        //on等同于addEventListener
    });
    // 请求消息接收数据完毕
    req.on("end", function () {
        //当事件结束后，执行的操作
        // console.log(req.url);//req.url请求的地址
        if (req.url.indexOf("favicon.ico") > -1) return; //favicon.ico图片文件 不处理
        var user = querystring.parse(req.url.split("?")[1]).user; //把？后的内容截取出来，第一项转化为对象，得到该对象的user属性
        res.writeHead(200, {//响应头  200-状态码-成功
            //要中文显示
            "content-type": "text/html;charset=utf-8",
            // 允许所有跨域请求，*是通配符
            "Access-Control-Allow-Origin": "*"
        })
        // 并且给返回消息写入信息；响应内容
        res.write(user + "今年18岁");
        // 结束发送；完成内容
        res.end();
    })
});
// 创建好的服务开启侦听,第一个参数是网络的端口号,第二个参数是网络的ip,第三个参数是开启后的回调函数
server.listen(4001, "localhost", function () {
    console.log("服务已开启");
})
// 服务器的端口号，由当前文件决定

1、先开启node服务：

2、然后打开ajax.html页面，从控制台看到结果：

整理 node.js服务启动模板

只要内容有任何修改，就得重新启动模板。
模板，直接修改 req.on(“end”,function()中的内容即可。

var http = require("http");
var queryString=require("querystring");
var server = http.createServer(function (req, res) {
    req.on("data", function () {

    });
    req.on("end", function () {
        var user = querystring.parse(req.url.split("?")[1]).user;
        //var obj=queryString.parse(req.url.split("?")[1]);//将字符串转化为对象
        res.writeHead(200, {
            "content-type": "text/html;charset=utf-8",
            "Access-Control-Allow-Origin": "*"
        })
        res.write(user + "今年18岁");
        res.end();
    })
});
server.listen(4001, "localhost", function () {
    console.log("服务已开启");
})

遇到的问题

在响应头里添加"Access-Control-Allow-Origin": “*”，意为允许所有跨域访问。

CORS：跨域资源共享 ，详细请看大神的"cors实现请求跨域"。