Ajax学习笔记

最新推荐文章于 2024-11-15 15:35:41 发布
最新推荐文章于 2024-11-15 15:35:41 发布
阅读量823 收藏 11
点赞数 9
分类专栏： 程序员 文章标签： ajax 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092832/article/details/137433264
版权

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

2.2 HTTP 请求交互的基本过程

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)

  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)

  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

重点是格式与参数

请求行 POST /s?ie=utf-8 HTTP/1.1

请求头 Host: atguigu.com

cookie: name=guigu

content-type: application/x-www-form-urlencoded

…

空行

请求体 username=admin&password=admin

2.4 HTTP 响应报文

响应行 HTTP/1.1 200 OK

响应头 Content-Type:text/html;charset=utf-8

Content-length:2048

Content-encoding:gzip

空行

响应体

2.5 谷歌浏览器调试

  1. F12 打开控制台

  2. 网络栏：network /网络：这里有网页加载所有发送的请求

1642902096(1)

4. 点击查看源码，可以看到完整的请求报文 和响应报文

image-20220123095915274

载荷：一些参数，老师的在Headers里面，现在分离出来了，如果响应有参数，就在“标头”和“预览”之间出现

6. '响应’栏会返回页面的HTML文件

3. 原生AJAX 的基本使用

3.1 安装node.js

http://nodejs.cn/

3.2 安装express（服务端框架）

https://www.expressjs.com.cn/

在编辑器中打开终端，输入下面的代码

  1. 初始化环境

npm init --yes

  1. 下载express包

npm install express --save

  1. 编写js代码(自己创建的js文件 ，这里我的是 express_use.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 端口监听中…”);

})

  1. 在终端运行js程序

node express_use.js

  1. 网页打开 http://127.0.0.1:8000/

  2. 打开控制台的网络，刷新页面，

image-20220123102538892

3.3 AJAX get案例

  1. 创建好文件夹和文件 开始编写代码

image-20220123103554668

  1. 前端页面的准备
Ajax GET 请求

点击发送请求

  1. 服务端准备

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

3.4 AJAX GET 请求设置请求参数

xhr.open(‘GET’, ‘http://127.0.0.1:8000/server?a=100&b=200&c=300’);

image-20220123112715583

3.5 AJAX post案例

  1. 前端页面
Ajax POST 请求
  1. 服务器代码(修改为需要重启服务器)

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

app.post(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

请求体

xhr.send('a=100&b=200&c=300');post设置请求体 request payload

3.6 AJAX设置请求头信息

// 设置请求体内容的类型

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-from-urlencoded’);

// 自定义头信息

xhr.setRequestHeader(‘name’, ‘lightofD’);

server.js中设置响应头允许自定义请求头 post改成all

服务器代码：

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.get(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

app.all(‘/server’, (request, response) => {

// 设置响应头 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’,‘*’);

// 设置响应体

response.send(“Hello Ajax”);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

3.7 服务端响应JSON数据

  1. 服务器代码

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.all(‘/server’, (request, response) => {

// 设置响应头, 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’, ‘*’);

// 响应一个数据

const data = {

name: ‘atguigu’

};

// 对 对象 进行 字符串 转换 ；转换为JSON格式

let str = JSON.stringify(data)

// 设置响应体

response.send(str);

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

  1. 我们的页面会接受到一个字符串

//设置响应体数据的类型(自动转换)

xhr.responseType = ‘json’;

//设置之前 我们xhr.response接收到的是服务器的json格式字符串

//设置只后 xhr.response自动根据这个字符串转换为对象

//当然我们也可以手动转换

// 1. 手动对数据转化 (字符串再转换成json)

let data = JSON.parse(xhr.response); //转换成json

//这个data 就是字符串对应的对象了

//调用其中数据格式 data.name

  1. html示例（键盘随意输入发送post请求）
JSON

3.8 nodemon自动重启工具

之前我们每次更改服务器端的代码都需要重启服务器，非常麻烦

有了这个工具，只要启动一次，我们修改服务端代码，保存后自动重启服务器。

但是启动代码的方式从 node 文件名 改为nodemon 文件名

  1. 安装

npm install -g nodemon

  1. 启动

nodemon .\server.js

  1. 启动失败怎么办，运行下条命令，一定要注意运行所在路径！！！一定注意路径！！！cd命令修改到server.js所在目录

npx nodemon .\server.js

3.9 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open(‘GET’, ‘http://127.0.0.1:8000/server?t=’+Date.now());

3.10 请求网络超时与网络异常

// 超时设置 （2秒）

xhr.timeout = 2000;

// 超时回调

xhr.ontimeout = function(){

alert(‘网络超时，请稍后重试’)

}

// 网络异常回调

xhr.onerror = function(){

alert(‘网络异常，请稍后重试’)

}

服务器模拟延迟效果

// 1. 引入express

const express = require(‘express’);

// 2. 创建应用对象

const app = express();

// 3. 创建路由规则

app.all(‘/server’, (request, response) => {

// 设置响应头, 设置允许跨域

response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

// 设置响应头, 设置允许自定义头信息

response.setHeader(‘Access-Control-Allow-Headers’, ‘*’);

// 响应一个数据

setTimeout(()=>{

// 设置响应体

response.send(‘str’);

},3000)

});

// 4. 监听服务

app.listen(8000, () => {

console.log(“服务已经启动, 8000 端口监听中…”);

})

浏览器模拟断网

image-20220123180425444

3.11 取消请求

// 手动取消

xhr.abort()

3.12 重复请求问题

相当于一个小的算法

JSON

发送

3.13 总结

  • XMLHttpRequest()：创建 XHR 对象的构造函数

  • status：响应状态码值，如 200、404

  • statusText：响应状态文本，如 ’ok‘、‘not found’

  • readyState：标识请求状态的只读属性 0-1-2-3-4

  • onreadystatechange：绑定 readyState 改变的监听

  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应

  • response：响应体数据，类型取决于 responseType 的指定

  • timeout：指定请求超时时间，默认为 0 代表没有限制

  • ontimeout：绑定超时的监听

  • onerror：绑定请求网络错误的监听

  • open()：初始化一个请求，参数为：(method, url[, async])

  • send(data)：发送请求

  • abort()：中断请求 （发出到返回之间）

  • getResponseHeader(name)：获取指定名称的响应头值

  • getAllResponseHeaders()：获取所有响应头组成的字符串

  • setRequestHeader(name, value)：设置请求头

4. jQuery 中的AJAX

4.1 get 请求

$.get(url, [data], [callback], [type])

  • url:请求的URL 地址

  • data:请求携带的参数

  • callback:载入成功时回调函数

  • type:设置返回内容格式，xml, html, script, json, text, _default

4.2 post请求

$.post(url, [data], [callback], [type])

  • url:请求的URL 地址

  • data:请求携带的参数

  • callback:载入成功时回调函数

  • type:设置返回内容格式，xml, html, script, json, text, _default

4.3通用方法

$.ajax({

// url

url: ‘http://127.0.0.1:8000/jquery-server’,

// 参数

data: {a:100, b:200},

// 请求类型

type: ‘GET’,

// 响应体结果

dataType: ‘json’,

// 成功的回调

success: function(data){console.log(data);},

// 超时时间

timeout: 2000,

// 失败的回调

error: function(){console.log(‘出错拉~’);},

// 头信息

headers: {

c: 300,

d: 400

}

})

5.Axios 发送 Ajax 请求

5.1 get 请求

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门获取

default

4.3通用方法

$.ajax({

// url

url: ‘http://127.0.0.1:8000/jquery-server’,

// 参数

data: {a:100, b:200},

// 请求类型

type: ‘GET’,

// 响应体结果

dataType: ‘json’,

// 成功的回调

success: function(data){console.log(data);},

// 超时时间

timeout: 2000,

// 失败的回调

error: function(){console.log(‘出错拉~’);},

// 头信息

headers: {

c: 300,

d: 400

}

})

5.Axios 发送 Ajax 请求

5.1 get 请求

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-1Tcg3tKE-1712395748555)]

[外链图片转存中…(img-Ivr89Qkz-1712395748555)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-CbHzGhw2-1712395748555)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门获取

[外链图片转存中…(img-HwDmngKq-1712395748556)]

2401_84092832
关注
专栏目录
ajax学习笔记
11-30
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8108
史上最强Ajax学习笔记
AJAX学习笔记总结
爱敲代码的卡拉米的博客
11-04 321
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
AJAX学习笔记
weixin_44497507的博客
11-10 708
【代码】AJAX学习笔记。
黑马---ajax学习笔记
texry的博客
11-25 407
ajax
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
Ajax学习笔记个人总结
09-12
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
Mock.js生成随机数据，拦截 Ajax 请求
gklcsdn的博客
11-13 1165
Mock.js提供了一个Mock.mockurl：要拦截的请求 URL，支持字符串或正则表达式。method：请求类型，比如"get""post"，不区分大小写。data：要返回的模拟数据格式。定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。拦截请求：通过Mock.mock拦截指定的 URL 请求。自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。模拟延迟：使用Mock.setup模拟网络延迟。
Ajax异步调用
2301_80768157的博客
11-11 926
Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技术，该技术是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步请求。Ajax技术用于页面的局部更新，同步调用会对客户使用造成影响，比如当你想获取一张图片时，页面需要通过一系列请求，之后浏览器把整个页面重新发送，花费时间长。异步调用便解决了这个我问题。
【JavaWeb】JSON介绍及入门案例
2302_78914800的博客
11-13 408
JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对JSON的支持，这使得JSON成为理想的数据交换格式JSON由键值对组成，并且由花括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间使用逗号进行分隔"key1":12,"key5":{},"key6":[{},{}]
虎扑APP数据采集：JavaScript与AJAX的结合使用
最新发布
Z_suger7的博客
11-15 606
引言虎扑APP的数据采集涉及到前端和后端的交互，其中AJAX（Asynchronous JavaScript and XML）技术允许在不重新加载整个页面的情况下，与服务器进行数据交换和更新部分网页内容。这种技术使得数据采集过程更加高效和用户友好。然而，直接从虎扑APP采集数据可能会遇到IP被封禁等问题，因此使用代理服务器是必要的。本文将展示如何在JavaScript中设置代理，以及如何使用AJAX技术从虎扑APP采集数据。数据采集的基本原理。
【Java Web】Ajax 介绍及 jQuery 实现
m0_66584716的博客
11-15 813
AJAX（Asynchronous JavaScript and XML）是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互，从而提供更流畅的用户体验。尽管名字中包含了XML，但实际上，AJAX可以使用任何格式的数据，包括JSON、HTML等。
php中ajax怎么使用【小白专用24.11.12】
zgscwxd的博客
11-12 942
php中ajax怎么使用方法
Window.history API学习笔记
常备不懈
11-12 656
在现代前端开发中，单页应用（SPA）的流行让我们对于页面的浏览历史管理需求愈加明显。`window.history` API作为浏览器提供的原生API，能够帮助开发者更加细致地控制用户的导航体验。本文将介绍`window.history` API的几个常见方法，并探讨它们的使用场景。
蓝队技术学习
weixin_65861348的博客
11-12 976
该手册详细规定了在不同安全事件发生时应执行的标准操作程序，按安全事件类别进行了分类阐述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值