Ajax学习笔记--- 【xmind 详细展示 浏览器与 服务器端通信，请求与响应报文】
2024-05-07 10:16:35
php和express用来做后端，还是express强大和方便！！！
- 翻看笔记才知道自己当时下载
Fiddler,Wampserver，phpstudy_pro是为了什么,实在不敢说自己学过php
文章目录
- 一、 Ajax介绍
- 1-1 原生AJAX
- 1-2 XML简介
- 1-4 AJAX的特点
- 第二章 HTTP+node
- 2-1 HTTP协议请求报文 与 响应文本结构
- 2-2 Express框架介绍与基本使用
- 第三章 AJＡＸ
- 3-1 AJAX_GET
- 3-2 AJAX_POST
- 3-3 AJAX设置请求头信息
- 3-4 服务端响应JSON数据
- 3-4-1
- 3-5 nodemon自动重启工具
- 3-6 IE缓存问题解决
- 3-7 Ajax请求超时与网络异常处理
- 3-8 AJAX 请求重复发送问题
- 第四章 jQuery发送AJAX，Axios，fetch
- 4-1 jQuery中的AJAX
- 4-1-1 get请求,post请求
- 4-1-2 jQuery通用方法发送AJAX请求
- 4-2 Axios发送AJAX请求
- 4-2-1 Axios 函数发送 AJAX请求
- 4-3 使用fetch函数发送AJAX请求
- 第五章 跨域
- 5-1同源策略
- 5-2 解决跨域
- 5-2-1 JSONP
- 5-2-2 CORS（Cross-Origin Resource Sharing）
一、 Ajax介绍
- HTTP
- 原生，jQuery，fetch，axios
1-1 原生AJAX
- 简介： 全称为
Asynchronous JavaScript And XML,就是异步的JS和XML- 通过AJAAX可以在浏览器中向服务器发送异步请求
- 最大的优势： 无刷新获取数据
- AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
1-2 XML简介
- XML可扩展标记语言
- XML 被设计用来传输和存储数据
- XML于HTML 类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签
- XML 格式进行交换–> JSON
1-4 AJAX的特点
- 优点：
- 可以无需刷新页面与服务器端进行通信
- 允许根据用户事件来更新部分页面内容
- AJAX缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO 不友好
第二章 HTTP+node
2-1 HTTP协议请求报文 与 响应文本结构
HTTP : HTTP(
hypertext transport protocol) 协议[超文本传输协议]，，协议详细规定了浏览器和万维网服务器之间相互通信的规则.约定，规则
请求报文： 格式和参数
行 POST /s?ie=utf-8 HTTP/1.1 头 Host: atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
User-Agent: chrome 83空行 体 username=admin&password=admin 响应报文
行 HTTP/1.1 200 ok 头 Content-type:text/html;charset=utf-8
Content-length:2048Content-encoding: gzip
空行
体
2-2 Express框架介绍与基本使用
npm init --yesnpm i expressnode 脚本
第三章 AJＡＸ
3-1 AJAX_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>AJAX GET请求</title><style>#result {width: 200px;height: 100px;border: 1px solid #90b;}</style>
</head><body><button>点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.getElementsByTagName('button')[0];// 绑定事件btn.onclick = function() {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化设置请求方法和url// xhr.open('GET', 'http://localhost:8080/server');// 发送参数xhr.open('GET', 'http://localhost:8080/server?a=100&b=200&c=300');// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果// on when 当..时候// resdystate 是 xhr 对象中的属性， 表示状态 0 1 2 3 4// change 改变xhr.onreadystatechange = function() {// 判断if (xhr.readyState === 4) {// 判断响应状态码 200 404 403 401 500// 2xx 成功if (xhr.status >= 200 && xhr.status < 300) {// 处理结果 行 头 空行 体// 1. 响应行console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态字符串console.log(xhr.getAllResponseHeaders());console.log(xhr.response); // 响应体result.innerHTML = xhr.response;}}}}</script>
</body></html>
3-2 AJAX_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>Post请求</title><style>#result {width: 200px;height: 100px;border: 1px solid #903;}</style>
</head><body><div id="result"></div><script>// 获取元素对象const result = document.getElementById("result");// 绑定事件result.addEventListener("mouseover", function() {// console.log("test");// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型 与 URLxhr.open('POST', 'http://localhost:8080/server');// 3. 发送// xhr.send();xhr.send('a=100&b=200&c=300');xhr.send('a:100&b:200&c:300');// 4. 事件绑定xhr.onreadystatechange = function() {// 判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 处理服务器返回的结果result.innerHTML = xhr.response;}}}})</script>
</body></html>
3-3 AJAX设置请求头信息
设置请求头
// 设置请求头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.setRequestHeader('name', 'niutt');Content-Type: 设置请求体内容的类型有效的bug
3-4 服务端响应JSON数据
3-4-1
3-5 nodemon自动重启工具
免去了不停重新启动node.js
3-6 IE缓存问题解决
对AJAX的请求结果缓存，再次请求时返回的是缓存数据，无法实时请求
// ajax解决IE请求缓存问题xhr.open("GET", "http://localhost:8080/ie?t=+Date.now()");
3-7 Ajax请求超时与网络异常处理
<button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function() {const xhr = new XMLHttpRequest();// 超时设置 2sxhr.timeout = 2000;// 超时回调xhr.ontimeout = function() {alert("网络异常，请稍后再试！");}// 网络异常的回调xhr.onerror = function() {alert("你的网络似乎出了一些问题");}xhr.open("GET", 'http://localhost:8080/delay');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}}})</script>
3-8 AJAX 请求重复发送问题
- 再次点击请求时，把第一个请求关闭
- 使用isSending来判断当前是否有正在发送的请求，有的话就abort，重新发送下一个请求
第四章 jQuery发送AJAX，Axios，fetch
4-1 jQuery中的AJAX
4-1-1 get请求,post请求
$.get(url,[data],[calback],[type])- url: 请求的URL地址
- data: 请求携带的参数
- calback： 载入成功时回调函数
- type: 设置返回内容格式，xml，html，script，json，text，_default
<script>$('button').eq(0).click(function() {$.get("http://localhost:8080/jQuery-server", {a: 100,b: 200}, function(data) {console.log(data);})})$('button').eq(1).click(function() {$.get("http://localhost:8080/jQuery-server", {a: 100,b: 200}, function(data) {console.log(data);}, 'json')})</script>
4-1-2 jQuery通用方法发送AJAX请求
- 头信息实现有点问题，第22集
<script>
$('button').eq(2).click(function() {$.ajax({// urlurl: 'http://localhost:8080/delay',// 参数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// }})})</script>
4-2 Axios发送AJAX请求
- 好处：
- 在node.js发送http请求
- 支持Promise
- 拦截器机制
- 数据请求
- 自动返回json数据
- mdmdmdmmd,bugbugbugbug!!!
4-2-1 Axios 函数发送 AJAX请求
4-3 使用fetch函数发送AJAX请求
第五章 跨域
5-1同源策略
- 同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略
- 同源 ： 协议，域名，端口号必须完全一致
- 违背同源策略就是跨域
- ajax默认遵守同源策略
- 同源策略就是来自同一区域
5-2 解决跨域
5-2-1 JSONP
JSONP （
JSON with Padding）：是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发- 只支持get请求
JSONP怎么工作：
- 在网页有一些标签天生具有跨域能力，比如： img link iframe script
- JSONP : 利用script标签的跨域能力来发送请求
JSONP的使用：
动态创建一个script标签
var script = document.createElement("script")设置script的scr， 设置回调函数
5-2-2 CORS（Cross-Origin Resource Sharing）
跨域资源共享，COPS是官方的跨域解决方案
- 不需要客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共共享标准新增了一组HTTp首部字段
- 允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS怎么工作
Ajax学习笔记--- 【xmind 详细展示 浏览器与 服务器端通信，请求与响应报文】相关推荐
- Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师 视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节 全局 ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- JUC.Condition学习笔记[附详细源码解析]
JUC.Condition学习笔记[附详细源码解析] 目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Conditi ...
- 观察者模式学习笔记（详细）
观察者模式学习笔记(详细) 一.什么是观察者模式 观察者模式,是定义对象之间的一对多的关系,主要作用是减少对象之间的耦合度,分为两个角色 被观察者:其实就是发布者,发布消息通知所有的观察者 观察者:接 ...
- ESP8266学习笔记：实现ESP8266的局域网内通信
ESP8266学习笔记:实现ESP8266的局域网内通信 现在就以实例入手.工程使用的是IOT_DEMO,据DEMO文档可以知道ESP8266初始工作模式为softAP+station共存的模式.于是 ...
- K210学习笔记(三) K210与STM32进行串口通信，K210发STM收
文章目录 前言 一.以/r/n为结尾 二.K210端代码 三.STM32端 3.1 main函数 四.测试结果 4.1当收到1时 4.2当收到2时 4.3 测试视频 总结 前言 前面我们讲了STM32 ...
- AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）
1. Ajax实现步骤 创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...
- 史上最详细Ajax学习笔记
1.Ajax快速入门 1.1.AJAX介绍 AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML. 本身不是一种新技术,而是多个技术综合 ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
最新文章
- go语言使用redis —— redigo
- global cache cr request
- python变量设置为true_如果为true，则从现在起在Python中忽略变量
- m3u8格式转换器android,m3u8转mp4转换器下载_m3u8转mp4转换器官方下载-太平洋下载中心...
- DirectX11：DirectX11下载和环境配置
- 离开学校后如何下载知网论文或外文论文
- 如何卸载Windows预安装内置应用
- vim中使用color_coded为c/cpp文件配色
- Unity Shader: Blend混合
- 特步软件测试员工资,特步集团全面预算管理系统——管理员手册V1.1
- 常用git命令总结大全
- JAVA实现页面上传图片或文件
- 哈工大2020人工智能期末考试复习
- C++排序算法利用EsayX实现过程可视化
- CodeM资格赛C 优惠券 题解
- Merkle Tree算法详解
- 三维点云地图转二维栅格地图
- html5 dash,使用 DASH.js 在 HTML5 应用程序中嵌入 MPEG-DASH 自适应流式处理视频
- 整数和实数，单精度和双精度
- 关于万物悦享推广案例