【尚硅谷】3小时Ajax入门到精通_精华笔记

已于 2024-05-24 11:18:10 修改
阅读量674 收藏 14
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： java ajax 前端
于 2024-05-24 11:16:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/buyaotutou/article/details/139130631

文章目录

前言

AJAX是学习Promise和Axios的前置知识。

一、课程说明

1.AJAX是什么？

Ajax的全称是“Asynchronous JavaScript and XML”，即“异步JavaScript和XML”，它允许Web应用程序在不重新加载整个页面，也可以在不刷新的情况下，通过在后台与服务器进行数据交换来更新部分网页。Ajax的核心对象是XMLHttpRequest，它使得浏览器能够发出HTTP请求并接收HTTP响应，同时浏览器可以继续进行其他操作，当收到服务器的响应后，浏览器再更新相应的页面部分。Ajax技术可以使Web应用程序更加快速、响应更加灵敏，并且提供更好的用户体验，Ajax的优点包括减少带宽使用、提高应用程序的响应速度以及维护数据的局部更新。许多现代Web应用程序，如Google Maps、Gmail等，都广泛使用了Ajax技术。

2.AJAX简介

AJAX全称为AsynchronousJavaScriptAndXML，就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

二、AJAX网页应用

如下图所示：如果不把鼠标放在京东的家用电器这个一级分类上，它的二级分类就不会被请求，也就不会被展示。实现了一个懒加载的效果，用则加载，不用则不加载。或者看今日头条新闻时，不忘下滚动页面，下面的页面是不加载的，只有滚动到下面时才会加载，再展示出来，且不用刷新，这都依赖于AJAX。
在这里插入图片描述

三、XML简介

XML(Extensible Markup Language)名叫可扩展标记语言。
XML被设计用来传输和存储数据。HTML用来呈现数据
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据：name=“孙悟空”;age=18;gender=“男”;
用XML表示：

<student>
 <name>孙悟空</name>
 <age>18</age>
 <gender>男</gender>
 </student>

现在已经被JSON取代了。用JSON表示：{"name":"孙悟空","age":18,"gender":"男"}

四、AJAX的优缺点

1. AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件(特定行为,比如把鼠标放在一级分类上)来更新部分页面内容。

2. AJAX 的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)，a.com的网页向b.com的网页发送请求是不允许的。
  3. SEO不友好，爬虫爬不到动态创建的数据。

五、HTTP协议请求报文与响应文本结构

AJAX发的请求就是HTTP请求，把协议搞懂后，就可以在协议这个层面，搞懂数据交换的流程。AJAX发送方式有四种：原生、jQuery、fetch、axios。

HTTP是什么

HTTP(hypertext transport protoco1)协议，超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1、HTTP规定了请求，请求报文

请求报文格式(四部分)：
请求行：分为三部分:请求类型(GET、POST等)、URL路径或者查询字符串、HTTP协议版本
请求头：Host、Cookie、Cotent-type等。
空行：固定的必须要有
请求体：如果是GET请求，请求体为空，如果是POST请求，请求体可以不为空。
在这里插入图片描述

2、HTTP规定了响应，响应报文

行： 协议版本、相应状态码、响应状态字符串
头：Content-Type、Content-encoding等
空行：必须有
体：主要的返回结果比如 <html> <head> </head> <body> <h1>尚硅谷</h1> <body> <html>页面进行渲染和呈现
在这里插入图片描述

六、Chrom控制台查看网络通信报文

1.请求在哪看

在这里插入图片描述
如下图所示，第一个红框为请求方式，第二个为url，第三个为HTTP协议版本，下面的为请求头的参数，格式为一个头加冒号加内容。
在这里插入图片描述
如下图所示其中，Payload中显示请求体。
在这里插入图片描述

note:

1、请求路径中的请求参数（两种传参方式）
1.1请求查询参数（Query Parameters）（URL问号后面的参数）
http://example.com/api?param1=value1&param2=value2
1.2请求路径参数（URI）（URL路径中的参数）
http://example.com/api/param1/param2

这些参数一般用于查询字符串，适用于传递非敏感的、长度较短的信息。
优点：
简单，容易构造和解析。
对于简单的、无状态的请求很方便。
缺点：
会暴露在浏览器历史记录、服务器日志、网络抓包工具等多个地方，不适合传输敏感信息。
长度有限制，不同浏览器和服务器对URL长度有不同的限制。
不适用于传输大量数据。

2、请求体中的参数

这种方式通常用于POST、PUT等请求，用于上传较大或结构化的数据，例如JSON、XML或表单数据。
优点：
可以传输大量数据。
可以传输复杂的数据结构，例如嵌套的JSON对象。
更适合传输敏感或私密信息。
缺点：
通常需要指定Content-Type来描述数据类型。
相对更消耗带宽。

2.响应在哪看

在这里插入图片描述
其中响应体会在Response中。如下图所示
在这里插入图片描述

七、NodeJS的安装与介绍

版本：v14.5.0
介绍：Node可以解析JS代码对计算机资源进行操控。
我们AJAX运行过程中需要一个服务端，所以需要NodeJS。

八、Express框架介绍与基本使用

介绍：

我们AJAX需要给服务端发请求，所以需要一个服务端，这里选择Express。这里只需使用Express的基本功能
我们先用VS打开项目文件夹(自己现在建一个)，然后打开终端执行npm i express。然后编写名为 express基本使用.js 代码如下

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{
   
   
    //设置响应
    response.send('HELLO EXPRESS');
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
   
   
    console.log("服务已经启动, 8000 端口监听中....");
});

然后执行这个代码，执行代码的代码为node express基本使用.js ，如下面两图所示，说明启动express服务成功。
在这里插入图片描述
在这里插入图片描述

查看请求头，响应头，响应体

下面对之前学过的请求头，响应头，响应体进行查看，之后自己有需要查看的可以自行查看，从此处开始查看不再赘述。
在这里插入图片描述

在这里插入图片描述

九、AJAX案例准备

我们的需求：准备一个button按钮，点击后向服务端发送请求，把服务端的响应的结果呈现出来。

前端页面的准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
     
     
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
</html>

效果如下图所示
在这里插入图片描述

服务端的准备 server.js

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
   
   
    //设置响应头  "*"实现设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

效果如以下两图所示：
在这里插入图片描述
在这里插入图片描述

十、AJAX请求的基本操作

改进前端页面
note：控制台Network中选中XHR是对AJAX请求的一个筛选。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
     
     
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
     
     
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            //XHR对象的readyState属性对应有五个值，它们的含义如下：
  			//0：未初始化。尚未调用open()方法
			//1：启动。已经调用open()方法，但是还没有调用send()方法
			//2：发送。已经调用send()方法，但是还没有接收响应
			//3：接收。已经接收到部分数据
			//4：完成。已经接收到全部响应数据，并且可以在客户端使用了
            // change  改变
            xhr.onreadystatechange = function(){
     
     
                //判断 (readyState是4说明服务端返回了所有的结果)
                if(xhr.readyState === 4){
     
     
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功 之后才可以拿到想要的结果
                    if(xhr.status >= 200 && xhr.status < 300){
     
     
                        //处理结果  行 头 空行 体
                        //响应 
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{
     
     
                    }
                }
            }
        }
    </script>
</body>
</html>

结果如下图所示：
在这里插入图片描述

十一、AJAX设置请求参数

之前我们都是在地址栏传参。
AJAX中操作方式一样，在URL后面缀参数。在1-GET.html中更改一下。

xhr.open('GET', 'http://127.0.0.1:8000/server');//替换成下面
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

如下图所示，则参数发送成功，之后查看参数都是在这里查看不再赘述。
在这里插入图片描述

十二、AJAX发送POST请求

需求：把鼠标放在div上面发POST请求，然后把响应体信息显示到div中。
前端内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
     
     
            width:200px;
            height:100px;
            border:solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function(){
     
     
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与 URL
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定
            xhr.onreadystatechange = function(){
     
     
                //判断
最低0.47元/天 解锁文章

200万优质内容无限畅学
尚硅谷前端-AJAX课程-简介，xml简介，特点，HTTP请求报文，响应报文，POST请求，fetch-ajax,同源策略，JSONP实践，AJAX使用，CORS
VAN
10-26 179
前端学习
3小时Ajax入门到精通
weixin_45732235的博客
05-08 412
学习笔记 视频相关资料 原生ajax express框架的基本使用 npm init --yes做一个初始化 npm i express 安装 // 1. 引入express const express = require('express') // 2. 创建应用对象 const app = express() // 3. 创建路由规则 // request是对请求报文的封装 // response是对响应报文的封装 app.get('/',(request, response) => {
尚硅谷---AJAX
Father_Of_Soft的博客
01-19 288
尚硅谷AJAX教程同步笔记，方便您预习复习哦~
ajax从入门到精通-3
m0_45080379的博客
08-28 164
模板引擎 是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。 为什么要使用模板引擎 我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行，但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。 作用...
尚硅谷-ajax入门到精通
qq_44967393的博客
08-07 197
介绍一下Ajax? ajax：异步 js and xml 优点：1.在网页不刷新的情况下，向服务端发送http请求，得到http响应（无刷新获取数据） 2.允许根据用户事件来更新部分页面内容 缺点： 1.没有浏览历史，不能回退 2.存在跨域（从一个服务器向另一个服务器发送请求）问题（要同源） 3.SEO（搜索引擎优化）不友好（内容是AJAX获取数据后，通过JS动态创建的，不能爬虫）不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式 XML简介？XML：可扩展标记语言作用：传
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （四）
weixin_44566194的博客
12-24 646
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第四章的学习内容的笔记，包括Vue 脚手架配置代理，GitHub 用户搜索案例，vue项目中常用的2个Ajax库，slot插槽等知识。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3485
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
【尚硅谷】Vue.js从入门到精通笔记（每日更新）
m0_67391377的博客
03-09 1498
目录 第1章：Vue核心 1-1.Vue简介 1-2.Vue官网使用指南 1-3.搭建Vue开发环境 1-4.初识Vue 1-5.模板语法 1-6.数据绑定 1-7.el和data的两种写法 1-8.MVVM模型 1-9.数据代理 1-9-1.回顾Object.defineProperty方法 1-9-2.何为数据代理 1-9-3.Vue中的数据代理 1-10.事件处理 1-10-1.事件的基本使用 1-10-2.事件修饰符 1-10-3.键盘事件 1-10-4.事件总结 1-11.计
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 4272
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
尚硅谷ajax视频教程2
weixin_33933118的博客
04-19 305
7、7. 尚硅谷_佟刚_Ajax_典型应用_验证用户名是否可用 整个项目的目录路径如下所示 我们首先新建立一个web工程，在webroot下面新建立一个script的文件夹，导入jquer文件 接下来我们编写index.jsp文件，通过ajax的方式校验该用户名是否在后台已经被注册 index.jsp文件内容如下所示： <%@ page language="java" im...
尚硅谷_教学课件_Ajax
05-11
尚硅谷_教学课件_Ajax
Ajax从入门到精通（附教学示例）
05-16
Ajax 由 HTML、javascript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成 交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概 述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。 但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。
Ajax零基础入门（尚硅谷）
qq_60893085的博客
03-22 256
不能发，如果实在想发可以去server.js里面配置** ✳表示所有头信息都能接收**
6.AJAX异步处理（尚硅谷）
羊肉串学爪哇的博客
06-11 282
AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据： name = "孙悟空" ;
ajax的学多久,ajax第二天学习
weixin_35721739的博客
08-06 485
post方式发送请求要首先设置请求头(参数设置为ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")-->send中放入要发送的参数(key=value&key=value)-->发送数据(ajax.send(context))当xml作为载体的时候servlet中声明发送的格式为xm...
json和ajax 要学多久,03月02日作业：json和AJAX基本知识
weixin_39611506的博客
08-05 376
作业一一、Json相关知识1、json是借用了JS对象字面量法来表示数据，是一种轻量级，用于数据交换与存储的格式化的字符串(本质上仍是一个字符串)；2、json数据类型：简单值：100，”hello”,true,null,没有undefined对象：{……}数组：[……]简单值字符串：必须且只能用双引号作为定界符；3、json的两个方法：序列化：JS对象序列化为JSON格式的字符串JSON.str...
10分钟学会Ajax
iVan
11-12 1313
<br /> <br />十分钟教你学会AJAX，这绝不是夸张！有时候，我十分憎恨一些图书、教程，讲了好几十页，说了一大堆，结果没有简单有效的说出，这个东西怎么用，何时用！<br />实际上，对于IT行业，新技术新思想，此起彼伏，并且有些技术常常昙花一现，不了了之！常常这些技术名异效同，加之有些书籍和教程如法炮制、千篇一律，这都让程序员们累中加累，莫名一处。<br />我个人认为，学习一门技术应从两方面着手：原理、应用。<br />掌握原理，是理解这门技术，以致把它应用到极点的重要根基。<br />掌握应用
Ajax学习
qq_42591048的博客
04-02 283
1.Ajax: 异步js 和 xml 异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新该修改的地方，而页面其他地方保持不变。（例如百度搜索框,视频点赞） 实现： js: XMLHttpRequest对象 XMLHttpRequest对象的方法： open(方法名(提交方式get|post),服务器地址,true):与服务端建立连接 send(): get: sen...
web前端开发自学要多久，jqueryajax回调函数
m0_60125265的博客
07-24 250
正文 怪现象一：谁都可以指手画脚的前端开发 我职业生涯很长一段时间都在做前端开发，我也做过后端开发，两者一对比，给我影响最深的不是技术差异，而是——前端开发者听到的『需求修改意见』要比后端多得多。 后端这东西，毕竟是藏在后面的，外行不懂就是不懂，装不出来，他们也不好自取其辱乱比划，但是，前端嘛……谁都能看得见，没吃过猪肉还没见过猪跑，所以，谁都可以指手画脚提一点意见。 只看得见界面的产品经理可以提一些意见。 项目经理可以有一些意见。 啥也不懂的老板也可以提一些意见。 甚至连后端都可以来提一些意见。 …… 正
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值