AJAX – 随波逐流

 

XMLHttpRequest的使用
前台代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type='text' id="name" placeholder="input your name" />
    <br><br>
    <input type='password' id="pswd" placeholder="input your password" />
    <br><br>
    <input type="button" onclick="Send()" value="send" />
    <br><br>
    <div id="res"></div>
</body>
<script type="text/javascript">
    function Send() {
        let name = document.getElementById('name').value
        let pswd = document.getElementById('pswd').value
        let xhr = new XMLHttpRequest()
        //xhr.open(method, url, async, username, password);
        // method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
        // url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
        // async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。
        // username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
        // password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。
        xhr.open('post', '/login', true);
        // responseType值的类型可为如下
        //  值		数据类型
        // ’ ’		DOMString (这个是默认类型)
        // arraybuffer	ArrayBuffer对象
        // blob		Blob对象
        // document	Document对象
        // json		JavaScript object, parsed from a JSON string returned by the server
        // text		DOMString
        xhr.responseType = 'text'
        //设置HTTP请求头部的方法。此方法必须在  open() 方法和 send()   之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
        //mdn：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/setRequestHeader
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.onload = function() { //3
            document.getElementById('res').innerHTML = this.responseText
        }
        //发送请求
        xhr.send(`name=${name}&pswd=${pswd}`) // 1
    }
</script>
</html>

后台代码
const express = require('express')
const app = express()
app.listen(8080)
app.use(express.static('public'))
//解析 JSON 格式的请求体数据, express.json()解析表单中的 JSON 格式的数据
// app.use(express.json())
// 通过 express.urlencoded() 这个中间件，来解析表单中的 url-encoded 格式的数据
app.use(express.urlencoded({ extended: false }))
app.post('/login', (req, res) => {
    console.log(req.body)
    //将数据传回给前台
    if (req.body.name == "abc" && req.body.pswd == "123") { //abc:123
        res.send(`<h1 style="color:green">${req.body.name},欢迎回来!</h1>`)
    } else {
        res.send(`<h1 style="color:red">失败</h1>`) // 2
    }
})

 

前台获取后台数据
前台代码
<!DOCTYPE html>
<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>前台获取后台数据</title>
</head>
<body>
    <input type="button" onclick="sendAjax()" value="Test">
    <span id="result"></span>
</body>
<script>
    function sendAjax() {
        let req = new XMLHttpRequest()
        req.open('post', '/query', true)
        req.responseType = "json"
        req.onload = function() {
            //返回XMLHttpRequest 响应中的数字状态码
            console.log(req.status)
            //response属性返回响应的正文。返回的类型为 ArrayBuffer 、 Blob 、 Document 、 JavaScript Object,DOMString 中的一个。 这取决于 responseType 属性。
            console.log(req.response)
                // document.getElementById('result').innerText = req.response
            let parent = req.response
            document.getElementById('result').innerText = `name:${parent.name},age:${parent.age},sex:${parent.sex}`
        }
        req.send()
    }
</script>
</html>

后台代码
const express = require('express')
const app = express()
app.listen('8080')
app.use(express.static('public'))
app.post('/query', (req, res) => {
    res.send({
        name: 'liudx',
        age: 37,
        sex: 'male'
    })
})

 

后台获取前台数据在将数据传回前台
前台代码
<!DOCTYPE html>
<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>后台获取前台数据在将数据传回前台</title>
</head>
<body>
    <form action="" id="form" style="width: 245px;">
        <p><input type="text" name="name" id="name"></p>
        <p><input type="text" name="psw" id="psw"></p>
        <p><input type="button" value="登录" onclick="login()"></p>
    </form>
</body>
</html>
<script>
    function login() {
        let form = document.querySelector('#form');
        let formData = new FormData(form);
        let psw = formData.get('psw');
        // formData.set('name', '123');
        let name = formData.get('name');
        console.log(name, psw);
        for (var i of formData) {
            console.log(i);
        }
        let xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.open('post', '/login', true);
        xhr.setRequestHeader('COntent-type', 'application/json');
        xhr.send(JSON.stringify({
            name,
            psw
        }));
        xhr.onload = function() {
            if (this.status == 200) {
                let {
                    name,
                    psw
                } = this.response;
                alert(`OK! name=${name} psw=${psw}`);
            } else if (this.status == 400) {
                alert('Failed! ' + this.response.message);
            }
        }
        xhr.onerror = function() {
            alert("SERVER INTERNAL error");
        }
    }
</script>

后台代码
var express = require('express');
var app = express();
app.listen(8080);
app.use(express.static('public'));
app.use(express.json());
app.post('/login', (req, res) => {
    let data = req.body;
    if (data.name == 'abc' && data.psw == '123') {
        res.status(200).send({
            name: data.name,
            psw: data.psw
        });
    } else {
        res.status(400).send({
            message: "用户名或密码错误!"
        });
    }
});

 

使用Formdata上传图片
前台代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用Formdata上传图片</title>
</head>
<body>
    <form action="" id="form1">
        <input type="text" name="name" id="name"> <br>
        <input type="text" name="pwd" id="pwd">
        <br> 上传头像 <input type="file" name="pic" id="file1">
        <br>
        <br>
        <input type="button" onclick="Send()" value="send" />
    </form>
    <br>
    <span id="result"></span>
    <br>
    <img id="res"></img>
</body>
<script type="text/javascript">
    let fileData = null;
    //onchange 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。
    document.querySelector("#file1").onchange = function() {
        console.log(this.files[0]);
        fileData = this.files[0];
    }
    function Send() {
        let form1 = new FormData(document.querySelector('#form1'));
        form1.append('attrName', fileData);
        let name = form1.get('name')
        let pwd = form1.get('pwd')
        console.log(name, pwd)
        console.log(form1)
        let xhr = new XMLHttpRequest()
        xhr.open('post', '/login', true);
        xhr.responseType = 'json';
        xhr.onload = function() {
            if (this.status == 200) {
                document.getElementById('res').src = this.response.path;
                document.getElementById('result').innerText = `path:${this.response.path}, name:${this.response.name}, pwd:${this.response.pwd}`;
            }
        }
        xhr.send(form1);
    }
</script>
</html>

后台代码
const exp = require('constants');
const express = require('express')
const app = express();
const formidable = require('formidable');
const path = require('path');
app.listen(8080)
app.use(express.static('public'))
app.post('/login', (req, res) => {
    let form1 = new formidable.IncomingForm(); //创建一个form表单对象
    form1.keepExtensions = true; //设置该属性为true可以使得上传的文件保持原来的文件的扩展名。
    //form.uploadDir:设置上传文件存放的文件夹，默认为系统的临时文件夹
    form1.uploadDir = path.join(__dirname, "public", 'uploads');
    // form里面的parse方法解析node.js中request请求中包含的form表单提交的数据，
    //回调函数里面会有我们在前端提交的字段（fileds），以及图片的详细信息（files）。
    //返回的字段是一个对象，如果想保存到文档里面，需要解析成字符串。
    form1.parse(req, (err, fields, files) => { // files里面存储的是用户上传的文件
        // console.log(fields, files); //fields 存储普通请求参数//files 存储上传文件信息
        let name = fields.name
        let pwd = fields.pwd
        res.send({
            // path: 'D:\\web模块化课堂\\ajax_2\\public\\uploads\\f65f1554cc28f4d7c7230b401'
            //完整的path 是这样的，我们使用public将字符串分为两个，取第二个元素就是服务器中的
            path: files.attrName.filepath.split('public')[1],
            name,
            pwd
        });
    });
});


JQuery操作AJAX
前台代码
<!DOCTYPE html>
<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>JQuery操作AJAX</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js">
    </script>
</head>
<body>
    <input type="text" name="" id="obj"><br>
    <input type="text" id="result" disabled>
    <input type="button" value="$.ajax()" id="test">
</body>
<script>
    $('#test').on('click', () => {
        let name = $('#obj').val()
        $.ajax({
            url: '/jsonp', //xhr.open(..,XX)
            type: 'post', //xhr.open(XX,..)
            contentType: 'application/json', //xhr.setRequestType()
            data: JSON.stringify({ //xhr.send()
                name
            }),
            success: function(response) { //xhr.onload
                console.log(response)
                $('#result').val(response.name)
            },
            error: function(e) {} //xhr.error
        })
    })
</script>
</html>

后台代码
var express = require('express')
var app = express()
app.listen(8080)
app.use(express.static('public'))
app.use(express.json())
app.post('/jsonp', (req, res) => {
    console.log(req.query)
    let c = parseInt(req.query.a) + parseInt(req.query.b)
    res.send(req.body)
})

发送评论 编辑评论

发送评论编辑评论