Ajax知识点

七个喵

已于 2022-04-28 22:12:16 修改

阅读量529

点赞数 1

文章标签： ajax javascript 前端

于 2022-04-28 22:11:43 首次发布

本文链接：https://blog.csdn.net/woai_mihoutao/article/details/124307136

版权

onreadystatechange 事件

两种获取服务器端响应方式的区别

2.8 Ajax错误处理

2.9 低版本IE浏览器的缓存问题

一、Ajax基础

1.1 传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后,如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

1.2 Ajax概述

Ajax:标准读音['ei,dʒaeks]，中文音译:阿贾克斯
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应田的体验。

1.3 Ajax的应用场景

页面上拉加载更多数据
列表数据无刷新分页（例如当点击某个网页的左边侧边栏时，只有右边的内容发生改变，其他不变）
表单项商开焦点数据检证（例如注册邮箱时，在鼠标离开后，显示当前邮箱注册地址是否被使用过）
搜索框提示文字下拉列表（例如点击搜索框，输入搜索内容时，下方出现相关问题的下拉菜单）

1.4 Ajax的运行环境

Ajax技术需要运行在网站环境中才能生效。

二、Ajax 运行原理及实现

2.1 Ajax 运行原理

Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏觉页面的情况下,局部更新页面数据，从而提高用户体验。

2.2 Ajax的实现步骤

1) 创建Ajax对象

var xhr = new XMLHttpRequest();

2) 告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

3) 发送请求

xhr.send();

4) 获取服务器端与客户端的相应数据

xhr.onload = function() {
    console.log(xhr.responseText);
}

如何获取：由于请求受网络速度快慢的影响，是需要一定的时间才能完成，这个时间是一个不确定的值，所以不能直接在send方法的后面直接获取请求的结果，我们需要为小xhr对象下的onload事件添加事件处理函数，当服务器端对客户端做出了响应，浏览器就会自动调用xhr下的onload事件对应的事件处理函数，在事件处理函数当中就可以获取服务端响应给客户端的数据。

例子：

1）创建一个名字为server的文件夹，在该文件夹下创建一个名为public的文件夹，然后在server下创建app.js并在其中写入以下代码

//app.js

//引入express框架 
const express = require('express');

//路径处理模块 
const path = require('path');

//创建web服务器 
const app = express();

//静态资源访问服务功能 
app.use(express.static(path.join(__dirname, 'public')));

//监听端口 
app.listen(3000);

//控制台提示输出 
console.log('服务器启动成功');

2）开启服务器

也可在vscode的终端中执行命令nodemon app.js，即在vscode中找到所要运行的js文件，右键点击该js文件的上一级文件，找到“在集成终端中打开”这一命令，点击后在终端中输入“nodemon app.js”命令

3）在public文件夹下创建一个html文件（示例）

    <script>
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();
        // 2.告诉ajax对象要想哪发送请求，以什么方式发送请求
        // open方法
        // 1）请求方式
        // 2）请求地址
        xhr.open('get', 'http://localhost:3000/first');
        // 3.发送请求
        xhr.send();
        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            console.log(xhr.responseText);
            // responseText 响应文本
        }
    </script>

4）在app.js的app.use(express.static(path.join(__dirname, 'public')));这行代码下写入以下代码

// req 请求对象
// res 响应对象
// 01-html文件
app.get('/first', (req, res) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    res.send('Hello Ajax');
});

5）在html文件中右键点击使其在浏览器中运行，按下F12，打开Console，可看到输出的Hello Ajax

2.3 服务器端响应的数据格式

在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时, 要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中。
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象类型字符串进行传输。

JSON.parse();  //将json字符串转换为json对象

示例：

html文件中

    <script>
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();
        // 2.告诉ajax对象要想哪发送请求，以什么方式发送请求
        // open方法
        // 1）请求方式
        // 2）请求地址
        xhr.open('get', 'http://localhost:3000/responseData');
        // 3.发送请求
        xhr.send();
        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function() {
            var responseText = JSON.parse(xhr.responseText);
            // console.log('xhr.responseText');
            // 将JSON字符串转换为JSON对象
            console.log(responseText);
            var str = '<h2>' + responseText.name + '</h2>';
            document.body.innerHTML = str;
        }
    </script>

app.js文件中

app.get('/responseData', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send({ "name": "zs" });
});

2.4 请求参数传递

GET请求方式

xhr.open('get','http:zkjvbjhvb');

示例：

<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        // 获取按钮元素
        var btn = document.getElementById("btn");
        // 获取姓名文本框
        var username = document.getElementById("username");
        // 获取年龄文本框
        var age = document.getElementById("age");
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // alert(nameValue);
            // alert(ageValue);
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            //配置ajax对象
            xhr.open('get', 'http://localhost:3000/get?' + params); // 问号后面是请求参数
            // 发送请求
            xhr.send();
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

app.get('/get', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send(req.query);
    // req.query 获取get请求的参数
});

POST请求方式（必须设置）

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//Content-Type:属性名称，
//application/x-www-form-urlencoded：属性值

xhr.send('name=zhangsan&age=20');

示例：

<body>
    <p>
        <input type="text" id="username">
    </p>
    <p>
        <input type="text" id="age">
    </p>
    <p>
        <input type="button" value="提交" id="btn">
    </p>
    <script>
        // 获取按钮元素
        var btn = document.getElementById("btn");
        // 获取姓名文本框
        var username = document.getElementById("username");
        // 获取年龄文本框
        var age = document.getElementById("age");
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 获取用户在文本框输入的值
            var nameValue = username.value;
            var ageValue = age.value;
            // alert(nameValue);
            // alert(ageValue);
            // 拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue;
            //配置ajax对象
            xhr.open('post', 'http://localhost:3000/post');
            // 设置请求参数格式的类型（post请求必须要设置）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(params);
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

首先需在app.js文件中的路径处理模块的注释下写入

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json());

然后再在app.js的app.use(express.static(path.join(__dirname, 'public')));这行代码下写入

app.post('/post', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send(req.body);
});

2.5 请求报文

在HTTP请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式。

报文详解可参考文章：ajax的解构请求方法以及报文_All rivers run in to the sea的博客-CSDN博客

2.6 请求参数的格式

1.application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2.application/json

{name: 'zhangsan',age:'age',sex:'男'}

在请求头中指定Content-Type属性的值是application/json,告诉服务器端当前请求参数的格式json。

JSON.stringify（）//将JSON对象转换为JSON字符串

注意：get请求是不能提交JSON对象数据格式的，传统网站的表单提交也是不支持JSON对象参与数据格式的

2.7 获取服务端器的响应

Ajax状态码

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

0:请求未初始化(还没有调用open()

1:请求已经建立,但是还没有发送(还没有调用send())

2:请求已经发送

3:请求正在处理中,通常响应中已经有部分数据可以用了

4:响应已经完成,可以获取并使用服务器的响应了

xhr.readyState   //获取Ajax状态码

onreadystatechange 事件

当Ajax状态码发生变化时将自动触发该事件。

两种获取服务器端响应方式的区别

区别描述	onload事件	onreadystatechange事件
是否兼容IE低版本	不兼容	兼容
是否需要判断Ajax状态码	不需要	需要
被调用次数	一次	多次

2.8 Ajax错误处理

1. 网络畅通,服务器端能接收到请求,服务器请返回的结果不是预期结果。

可以判断服务器端返回的状态码,分别进行处理。xhr.status获取http状态码

2. 网络畅通,服务器端没有接收到请求,返回404状态码

检查请求地址是否错误

3. 网络畅通,服务器媲能接收到清求,服务器请可回500状态码。

服务器端错误,找后端程序员进行沟通

4. 网络中断,请求无法发送到服务器端

会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理。

2.9 低版本IE浏览器的缓存问题

问题：在低版本的IE测览器中，Ajax请求有产重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到报务器端，后续的请求都会从浏览器的缓存中获取结果，即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

七个喵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax知识点

一、Ajax基础1. 传统网站中存在的问题网速慢的情况下,页面加载时间长,用户只能等待表单提交后,如果一项内容不合格,需要重新填写所有表单内容页面跳转,重新加载页面,造成资源浪费,增加用户等待时间2. Ajax概述Ajax:标准读音['ei,dʒaeks]，中文音译:阿贾克斯它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应田的体验。3. Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页（例如当点击某个网页的左边侧边栏时，只有右边的内容发生改
复制链接

扫一扫