记录学习Ajax + node.js

最新推荐文章于 2021-08-05 16:46:23 发布

城南花已开丷

最新推荐文章于 2021-08-05 16:46:23 发布

阅读量261

点赞数 1

分类专栏： node.js

本文链接：https://blog.csdn.net/weixin_43789897/article/details/89062399

版权

node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

封装Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax</title>
</head>

<body>
    用户:<input type="text" id="user"><br>
    密码:<input type="password" id="pass"><br>
    <input type="button" value="登录" id="btn">

    <script>
        // Access-Control-Allow-Origin    访问控制源点
        // 跨域
        btn.onclick = function () {
            ajax({
                'url': 'http://localhost:9218',
                'type': 'get',
                'data': {
                    user: user.value,
                    pass: pass.value
                },
                success: function (data) {
                    console.log(data);
                },
                // error : function(){
                //     alert('你的用户名或密码错误');
                // }
            });
        }

        function ajax(json) {
            // 兼容IE
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            }
            else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            if (json.type == 'get') {
                xhr.open('get', json.url + '?' + JsonToString(json.data), true);
                xhr.send();
            } else if (json.type == 'post') {
                xhr.open('post', json.url, true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send(JsonToString(json.data));
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        json.success(xhr.responseText);
                    }
                } else {
                    json.error && json.error();
                }
            }

            function JsonToString(json) {
                var arr = [];
                for (var i in json) {
                    arr.push(i + '=' + json[i]);
                }
                return arr.join('&');
            }
        }

    </script>
</body>
</html>

GET：

var http = require('http');
var urlLib = require('url');//解析前台传来的数据 urlLib.parse(url.request, true)
http.createServer(function(request, response){
    // 设置跨域，任何人都跨域访问
    response.setHeader('Access-Control-Allow-Origin', '*');
    var url = request.url.substring(2);
    // urlLib.parse(data, true).query;  默认为false，为string
    var arr = url.split('&');
    var json = {};
    for(let i = 0; i < arr.length; i++){
        json[arr[i].split('=')[0]] = arr[i].split('=')[1];
    };
    if(json["user"] == "leo" && json["pass"] == 123){
        response.write("登录成功");
    }else{
        response.write("登录失败");
    }
    response.end();
}).listen(9218);

POST：

var http = require('http');
var querystring = require('querystring');
http.createServer(function(request, response){
    response.setHeader('Access-Control-Allow-Origin', '*');
    var str = '';
    request.on('data', function(data){
        str += data;
    });
    request.on('end', function(){
        var json = querystring.parse(str);
        if(json.user == 'leo' && json.pass == '123'){
            response.write("成功");
        }else{
            response.write("失败");
        }
        response.end();
    });
}).listen(2133);

仅供自己学习记录

城南花已开丷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录学习Ajax + node.js

封装Ajax<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫

专栏目录