原生ajax和Jquery的ajax

最新推荐文章于 2022-05-24 19:34:53 发布

原创最新推荐文章于 2022-05-24 19:34:53 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #javascript

jquery 同时被 3 个专栏收录

7 篇文章

订阅专栏

前端接口开发

3 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文介绍了原生AJAX和jQuery的AJAX用法，包括它们的优势、工作原理、实现步骤及GET、POST请求的传参方式。原生AJAX涉及XMLHttpRequest对象，通过open()、send()等方法实现异步请求，而jQuery的AJAX则提供了更简洁的API，方便开发者封装和处理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生ajax

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

传统请求（同步方式）的问题

当网速比较慢或服务器太忙时，客户端(浏览器)在没有收到服务端返回的响应之前一直处在线等待状态，用户体验不好。

Ajax优势和作用

使用ajax技术后用户体验好，同时可以减轻服务端的压力。

ajax的应用场景：百度搜索框、百度地图、检查用户是否注册过、页面的局部刷新等。

Ajax请求与传统请求的区别：

传统方式请求：

ajax方式请求

ajax原理（方法，属性）

XMLHttpRequest

let xhr =new XMLHttpRequest();

描述：创建 ajax对象

open

xhr.open('请求方式','请求地址',true/false);  //true：表示异步   false:表示同步

描述：创建请求给ajax对。

send

语法：

xhr.send(string)

描述：ajax对象将请求发送到服务器。string：仅用于 POST 请求

属性

readyState

xhr.readyState

描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

包含的状态值：

(1)0：请求未初始化，还没有调用open

(2)1：请求已经建立，但是还没有发送send

(3)2：请求已经发送

(4)3：请求正在处理中，通常响应中已经有部分数据可以用了

(5)4：响应已经完成，可以获取并使用服务器的响应

tatus

语法：

xhr.status

描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)

常见状态码：200，304，404，500

responseText

语法：

xhr.responseText

描述：获得来自服务器的响应

事件

语法：

xhr.onreadystatechange  = callback

描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件处理服务端返回的响应

ajax实现步骤

(1)创建Ajax对象

(2)Ajax请求的地址与请求方式

(3)发送请求

(4)获取服务器响应给客户端的数据

(5)处理服务器响应数据JSON.parse和JSON.stringify

ajax的get和post传参

get

语法：

xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')

描述：get传参只需要在url地址后按照?key=value格式进行传递

服务端代码如下：

const experss = require('express');
const path = require('path');

const app = experss();

app.listen(3000, () => {
    console.log(`web服务器工作在3000端口`);
});

//设置ejs: 
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);


//注册用户界面：
app.get('/zhuce', (req, res) => {

    res.render('zhuce.html');
});


//检查用户是否注册过： 
app.get('/checkuser', (req, res) => {

    //获取用户：
    let uname = req.query.uname ? req.query.uname : '';

    if (uname == 'demo') { //已注册
        res.send({ "msg": "用户已注册", "status": 500 });
    } else { //未注册
        res.send({ "msg": "用户可用", "status": 200 });
    }

});

zhuce.html文件代码如下：

<!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>Document</title>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>
    <script>
        let usrObj = document.getElementById('usr');
        let spanObj = document.getElementById('usrmsg');

        //第一步：创建ajax对象：new XMLHttpRequest()
        let xhr = new XMLHttpRequest();

        usrObj.onblur = function() {
            //获取用户输入的帐号：
            let usrval = usrObj.value;
            // alert(usrval);

            //true:表示异步  false:表示同步
            //第二步：创建请求给ajax对象：xhr.open('get/post','请求资源',true/false)
            xhr.open('get', `/checkuser?uname=${usrval}`, true);

            //注册事件：处理服务器返回的响应
            xhr.onreadystatechange = mytest;

            //第三步：ajax对象发送请求给服务器:  xhr.send([参数])
            xhr.send();
        }

        function mytest() {
            // alert(xhr.readyState);
            //第四步：服务端处理完请求并返回响应给ajax对象
            if (xhr.readyState == 4) {

                //200:为http协议状态码
                if (xhr.status == 200) { //表示ajax对象与服务端交互是正常的
                    //第五步：ajax对象获取返回的响应并填充到页面相关位置
                    // alert(xhr.responseText);
                    let resObj = JSON.parse(xhr.responseText);
                    spanObj.innerHTML = resObj.msg;
                    if (resObj.status == 200) {
                        spanObj.style.color = 'green';
                    } else {
                        spanObj.style.color = 'red';
                    }
                }

            }
        }
    </script>
</body>

</html>

post

语法1:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=ujiuye&password=123456');

语法2：

xhr.setRequestHeader('Content-Type', 'application/json') 
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))

描述：使用setRequestHeader设置响应头，并传递对应的post参数

const express = require("express");
const path = require("path");


const app = express();

app.listen(6060, () => {
    console.log(`工作在6060端口`);
});
//接收post的键值对格式发送的参数
app.use(express.urlencoded({extended: false}));
// 设置ejs

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').__express);

//显示注册界面
app.get('/register', (req, res) => {
    res.render('ZC_post.html');
});

// 检查用户是否注册过

app.post('/checkuser', (req, res) => {

    //获取用户：
    // let uname = req.query.uname ? req.query.uname : '';
    let uname = req.body.uname ? req.body.uname : '';
    let age = req.body.age ? req.body.age : '';
    console.log(age, uname, 777);

    if (uname == 'demo') { //已注册
        res.send({ "msg": "用户已注册", "status": 500 });
    } else { //未注册
        res.send({ "msg": "用户可用", "status": 200 });
    }

});

客户端html

<!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>Document</title>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>
    <script>
        let usrObj = document.getElementById('usr');
        let spanObj = document.getElementById('usrmsg');

        //第一步：创建ajax对象：new XMLHttpRequest()
        let xhr = new XMLHttpRequest();

        usrObj.onblur = function() {
            //获取用户输入的帐号：
            let usrval = usrObj.value;
            // alert(usrval);

            //true:表示异步  false:表示同步
            //第二步：创建请求给ajax对象：xhr.open('get/post','请求资源',true/false)
            // xhr.open('get', `/checkuser?uname=${usrval}`, true);
            xhr.open('post', `/checkuser`, true);

            //设置请求头信息：以键值对格式发送post参数
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            //注册事件：处理服务器返回的响应
            xhr.onreadystatechange = mytest;

            //第三步：ajax对象发送请求给服务器:  xhr.send([参数])
            // xhr.send();
            xhr.send(`uname=${usrval}&age=20`);
        }

        function mytest() {
            // alert(xhr.readyState);
            //第四步：服务端处理完请求并返回响应给ajax对象
            if (xhr.readyState == 4) {

                //200:为http协议状态码
                if (xhr.status == 200) { //表示ajax对象与服务端交互是正常的
                    //第五步：ajax对象获取返回的响应并填充到页面相关位置
                    // alert(xhr.responseText);
                    let resObj = JSON.parse(xhr.responseText);
                    spanObj.innerHTML = resObj.msg;
                    if (resObj.status == 200) {
                        spanObj.style.color = 'green';
                    } else {
                        spanObj.style.color = 'red';
                    }
                }

            }
        }
    </script>
</body>

</html>

Jquery之Ajax

get

$.get('请求地址',{请求参数},function(d){},'json')

描述：发送get请求

客户端代码

<!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>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>
    <script>
        $("#usr").blur(function() {
            //获取用户输入的帐号：
            let uname = $("#usr").val();

            // $.get(`/checkuser?uname=${uname}`, function(data) {
            //     console.log(data, 2222);
            // }, 'json');

             $.get('/checkuser', {
                 //uname=${uname}简写形式
                 uname
             }, function(d) {
                 console.log(d, 111);
             }, 'json');


        });
    </script>
</body>

</html>

post

语法：

$.post('请求地址',[{请求参数},]function(d){},'json')

描述：发送post请求，data为请求时传递的参数

<!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>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>
    <script>
        $("#usr").blur(function() {
            //获取用户输入的帐号：
            let uname = $("#usr").val();
            $.post('/checkuser', {
                uname
            }, function(d) {
                console.log(d, 999);
            }, 'json');
        });
    </script>
</body>

</html>

ajax

语法：

$.ajax({
   type: '',//请求方式
   url: '',  //请求地址
   data: { },//请求的参数
   dataType:'json',//期望服务端返回的数据类型
   success: function(res) { } 
})

描述：可以发送get和post请求

<!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>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
    <div>帐号：<input type="text" name="usr" id="usr"><span id="usrmsg"></span></div>
    <div>密码：<input type="password" name="pwd" id="pwd"></div>
    <div>密码：<input type="password" name="repwd" id="repwd"></div>
    <div><input type="submit" value="注册"></div>
    <script>
        $("#usr").blur(function() {
            //获取用户输入的帐号：
            let uname = $("#usr").val();

            $.ajax({
                url: '/checkuser', //请求地址
                //  type: 'get', //请求方式: get/post
                type: 'post',
                //  data: {"uname":uneam,"age":20},
                data: { //设置请求的参数
                    uname,
                    "age": 20
                },
                dataType: 'json', //期望服务端返回的数据类型
                success: function(d) { //成功时要执行的回调函数
                    console.log(d, 9999);
                    $("#usrmsg").html(d.msg);
                    if (d.status == 200) { //可用
                        $("#usrmsg").css('color', 'green');
                    } else { //不可用
                        $("#usrmsg").css('color', 'red');
                    }
                },
                error: function(e) {
                    console.log(e, 888);
                }
            });
        });
    </script>
</body>

</html>

封装ajax

//定义函数：发送ajax请求
function sendAjax(url, data = {}, type = 'get', dataType = 'json') {
    url = `http://120.55.79.33:6543${url}`
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            type,
            data,
            dataType,
            success(d) {
                //需求：返回d
                resolve([true, d]);

            },
            error(e) {
                resolve([false, '接口程序调用失败']);
            }
        });
    });
}

调用

   $('.loginbtn').click(async function () {
            let username = $('#username').val();
            let password = $('#pass').val();
            let ucode = $('#ucode').val();
            let [err, obj] = await sendAjax('/users/login', {
                username,
                password,
                ucode,
                syscode
            }, 'post');
            //  console.log(obj);
            if (err) {
                $('.tips').html(obj.msg);
                if (obj.status == 200) {
                    $('.tips').css('color', 'green');

                    if (obj.msg == '登录成功') {
                        alert('登录成功');
                        localStorage.ujwtdata = obj.data;
                        location.href = '../userSeting.html';
                        // console.log(obj.data,localStorage.ujwtdata );

                    }
                } else {
                    $('.tips').css('color', 'red');
                }

            } else {
                alert('登录接口调用失败')
            }
        });