Ajax基本实现

最新推荐文章于 2023-06-26 16:01:22 发布

bear*6

最新推荐文章于 2023-06-26 16:01:22 发布

阅读量1.2k

点赞数 1

分类专栏： ajax 文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/m0_48375854/article/details/122556939

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax

一、Ajax的工作原理
二、Ajax基本实现步骤
三、GET请求参数
四、实现登录页面的验证案例

一、Ajax的工作原理

传统网站从浏览器端向服务器端发送请求的工作原理：
在这里插入图片描述
Ajax网站从浏览器端向服务器端发送请求的工作原理：

二、Ajax基本实现步骤

1、创建服务器

如下所示：

onst express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
// 定义/first路由
app.get('/first', (req, res) => {
  res.send('Hello, Ajax');
});
app.listen(3000);
console.log('服务器启动成功');

启动服务器，则：
在这里插入图片描述
启动成功。

2、配置Ajax对象

首先创建Ajax对象，然后使用open()方法来配置Ajax对象，最后使用send()方法发送请求：
语法格式为：

var xhr = new XMLHttpRequest();
xhr.open('请求方式', '请求地址');
xhr.send();

3、获取服务器的响应

（1）通过onload事件的方式获取服务器端响应到客户端的数据。

xhr.onload = function () {};

（2）通过onreadystatechange事件的方式获取服务器端响应到客户端的数据。

xhr.onreadystatechange = function () {};

（3）Ajax状态码

Ajax状态码	说明
0	请求未初始化（还没有调用open方法）
1	请求已经建立，但是还没有发送（还没有调用send方法）
2	请求已经发送
3	请求正在处理中，通常响应中已经有部分数据可以用了
4	响应已经完成，可以获取并使用服务器的响应了

三、GET请求参数

设置open()方法中的第1个参数为“get”，表示设置get请求方式。
语法格式为：

xhr.open('get','http://localhost:3000/demo.html?username=王欢&age=18');
xhr.send();

其中问号后面的username=wanghuan&age=18表示GET请求参数，多个参数间需要&符号连接。
如下所示：
（1）创建一个新项目，在home.js文件中创建服务器，并去app.js文件中导入，如下：
在这里插入图片描述
代码为：

const express = require('express')
const router = express.Router()
router.get('/first',(req,res)=>{
    res.send('Hello Ajax')
})
module.exports = router;

打开postman工具进行测试，如下：
在这里插入图片描述
测试成功。
（2）创建客户端，获取客户端的响应。
a.新建一个html文件，创建xhr对象，并使用open()方法配置xhr对象.如下：

 <script>
        const xhr = new XMLHttpRequest()
        console.log('请求前的状态码是:',xhr.readyState)
        xhr.open('get','http://localhost:3000/home/first')
        console.log('请求后的状态码是:',xhr.readyState)
    </script>

输出的结果为：
在这里插入图片描述
说明请求已经建立，但是还没有发送（还没有调用send方法）
b.在html文件中，监听onload事件，并使用send()方法发送请求,如下：

xhr.onload = function(){
 	console.log('发送请求后的状态码是:',xhr.readyState)
    console.log('服务器响应的数据为:',xhr.responseText)
}
xhr.send()//向服务器端发送请求

打印结果为：
在这里插入图片描述
响应已经完成，可以获取并使用服务器的响应了。
c.在html文件，添加一个按钮，将onload事件修改为onreadystatechange事件，从而实现服务器响应的数据传送到页面，如下：

<h2 id = 'pt'></h2>

 xhr.onreadystatechange = function(){
   if(xhr.readyState === 4 && xhr.status === 200){
        document.getElementById('pt').innerHTML = xhr.responseText;
    }
}

输出结果为:
在这里插入图片描述

四、实现登录页面的验证案例

要实现的功能为：
（1）当用户输入的用户名错误时，提示用户名输入错误。
（2）当用户输入的密码错误时，提示密码输入错误。
（3）当用户名和密码均输入正确，在文本框输入：合法用户。
话不多说，直接上代码！！！
前端页面代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body style="text-align: center">
    <div>
      <label>用户名：
        <input type="text" id="username">
        <span id="name_info"></span>
      </label>
      <br><br>
      <label>密码：
        <input type="password" id="userPwd">
        <span id="pwd_info"></span>
      </label>
      <br><br>
      <button id="btn_login">登录</button>
      <br><br>
      <h2 id="info"></h2>
    </div>
    <script>
      let btn = document.getElementById('btn_login')
      btn.onclick = function(){
        // 获取用户输入的信息
        let name = document.getElementById('username').value
        let pwd = document.getElementById('userPwd').value

        //创建Ajax的核心对象
        let xhr = new XMLHttpRequest()
        //拼接参数
        let params = 'username='+name+'&userPwd='+pwd
        //建立和服务器的连接
        xhr.open('get','http://localhost:3000/login/check?'+params)
        //定义状态改变时的回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState===4 && xhr.status===200){
            if(xhr.responseText==='101'){
              document.getElementById('name_info').innerHTML='用户名错误'
            }else if(xhr.responseText === '102'){
              document.getElementById('pwd_info').innerHTML='密码错误'
            }else if(xhr.responseText === '103'){
              document.getElementById('info').innerHTML='合法用户'
            }
          }
        }
        // 向服务器发送请求
        xhr.send()
      }
    </script>
</body>
</html>

后台代码为：

const express = require('express')
const router = express.Router()
//http://localhost:3000:login/check
router.get('/check',(req,res)=>{
    //获取客户端的get请求参数
    let uname = req.query.username;
    let uPwd = req.query.userPwd
    //对用户名和密码进行判断
    if(uname !=='bear6'){
        res.send('101')
    }else if(uPwd !== '123456'){
        res.send('102')
    }else{
        res.send('103')
    }
})
module.exports = router;

实现效果为：
在这里插入图片描述

bear*6

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax基本实现

Ajax一、Ajax的工作原理二、Ajax基本实现步骤1、创建服务器2、配置Ajax对象3、获取服务器的响应三、请求参数1、GET请求参数的传递2、POST请求参数的传递四、Ajax异步编程五、Ajax错误处理六、FormData对象七、浏览器端art-template模板引擎八、Ajax同源策略九、jQuery中的Ajax一、Ajax的工作原理传统网站从浏览器端向服务器端发送请求的工作原理：Ajax网站从浏览器端向服务器端发送请求的工作原理：二、Ajax基本实现步骤1、创建服务器如下所示：
复制链接

扫一扫