AJAX概述和基本使用

01 【AJAX概述和基本使用】

1.AJAX简介

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

2.AJAX 的特点

2.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信
  2. 允许你根据用户事件来更新部分页面内容

2.2 AJAX 的缺点

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

2.HTTP相关问题

2.1 MDN 文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

2.2 HTTP 请求交互的基本过程

process

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 报文

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

2.3.1 请求报文

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1 
头      Host: www.baidu.comCookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;    Content-type: application/x-www-form-urlencodedUser-Agent: chrome 83
空行
体      username=admin&password=admin

注:post请求才有请求体

Request Headers

Request Header说明
Accept浏览器可接收的数据格式(如:/
Accept-Language客户端接收的语言类型(如:zh-CN,en-US)
Connection维护客户端和服务端的连接关系(如:Keep-Alive)
Host连接的目标主机和端口号(如:localhost:8080)
User-Agent客户端版本号的名字
Accept-Encoding客户端能接收的压缩数据的类型(如:gzip)
Cookie客户端暂存服务端的信息
Content-type发送数据的格式,get请求没有(如:application/json)
2.3.2 响应报文
行      HTTP/1  200  OK
头      Content-Type: text/html;charset=utf-8Set-Cookie: BD_CK_SAM=1;path=/Content-length: 2048Content-encoding: gzip
空行    
体      <html><head></head><body><h1>尚硅谷</h1></body></html>(html 文本/json 文本/js/css/图片...)

network

  • 负载(Payload)用来查看请求发送的查询字符串和form data
  • Preview用来查看解析后的返回数据
  • Response用来查看返回数据

Response Headers

Response Headers说明
Content-Type服务端发送的类型及采用的编码方式(如:text/html; charset=utf-8)
Content-Encoding服务端能够发送压缩编码类型(如:gzip)
Content-Length服务端发送的压缩数据的长度(如:128)
Set-Cookie服务端发送到客户端的暂存数据
Cache-Control缓存相关
Last-Modified缓存相关
Etag缓存相关
2.3.3 post请求体参数格式
  1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
    用于键值对参数,参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
  2. Content-Type: application/json;charset=utf-8
    用于 json 字符串参数
    例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
  3. Content-Type: multipart/form-data
    用于文件上传请求

2.4 常见的响应状态码

状态码

  • 1xx:指示信息-表示请求已接收,继续处理
  • 2xx:成功-表示请求已被成功接收
  • 3xx:重定向-要完成请求必须进行更进一步的操作
  • 4xx:客户端错误-请求有语法错误或请求无法实现
  • 5xx:服务器错误-服务器未能实现合法的请求

常见的http状态码

  • 200:客户端请求成功
  • 206:客户发送带有range头的GET请求,服务器完成了它
  • 301:重定向(永久)
  • 302:重定向(临时)
  • 304:资源未被修改,有缓存
  • 403:请求被拒绝
  • 404:资源未找到
  • 500:服务器错误
  • 504:网关超时

2.5 不同类型的请求及其作用

  1. GET: 从服务器端读取数据(查)
  2. POST: 向服务器端添加新数据 (增)
  3. PUT: 更新资源 (改)
  4. DELETE: 删除服务器端数据 (删)

3. 原生 AJAX 的基本使用

3.1 理解

  1. 使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
  2. 前端可以获取到数据,而无需让整个的页面刷新。
  3. 这使得Web 页面可以只更新页面的局部,而不影响用户的操作。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的

3.2 使用步骤

const xhr = new XMLHttpRequest();
// 请求方式
xhr.open(method, url);
//可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//get请求不传 body 参数,只有post请求使用
xhr.send(body) 
// 事件绑定 处理服务端返回的结果
// on  when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
//状态 0 表示未初始化  1 open方法调用完毕 2 send方法已经调用完毕 3 服务端返回部分结果 4 服务端返回了所有结果
// change  改变
xhr.onreadystatechange = function (){//判断 (服务端返回了所有的结果)if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.status);//状态码console.log(xhr.statusText);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response);//响应体}
3.2.1 get请求
      //  创建对象 const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server')// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function(){// readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500if(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;}}} 

GET 请求设置请求参数

设置url参数

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

image-20220624212741956

3.2.2 post请求
      //  创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型(请求方式)与urlxhr.open('POST', 'http://127.0.0.1:8000/server');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// 自定义头信息xhr.setRequesHeader('name', 'ykyk');// 3. 发送   设置请求参数(请求体)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;}}

后端设置

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

response.setHeader('Access-Control-Allow-Header','*');
3.2.3 取消发送无用的参数

有的时候有的参数是可以不填写的,这时尽管是空串也会随着请求发过去,我们可以将参数的值设置成undefined,这样就不会随请求发过去了

3.3 请求超时与网络异常

// 超时设置 (2秒) 超过2s请求就取消  status 状态变成 cancel 
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){alert('网络超时,请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){alert('网络异常,请稍后重试')
}

3.4 取消请求

//     手动取消请求        
//    network中的status中pending为等待中
//    取消就变成cancel
xhr.abort()

3.5 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

status

  • 0: 表示XMLHttpRequest 实例已经生成,但是open()方法还没有被调用
  • 1: 表示send()方法还没有被调用,仍然可以使用setRequestHeader(),设定HTTP请求的头信息
  • 2: 表示send()方法已经执行,并且头信息和状态码已经收到
  • 3: 表示正在接收服务器传来的body 部分的数据
  • 4: 表示服务器数据已经完全接收,或者本次接收已经失败了

3.6 API总结

  • 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):设置请求头

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

刷代码随想录有感(53):合并二叉树

题干&#xff1a; 代码&#xff08;递归实现&#xff09;&#xff1a; TreeNode* mergeTrees(TreeNode* root1, TreeNode* root2) {//前序好理解&#xff0c;直接将树覆盖到另一个上面if(root1 NULL)return root2;//当前遍历节点为空的话就让另一个的值覆盖过来if(root2 NUL…

对命令模式的理解

目录 一、场景1、文本编辑器并不是一个好的例子&#xff0c;设备控制器才是2、设备控制器的demo 二、不用命令模式1、代码2、问题 三、使用命令模式1、代码2、当需求变化时2.1 新增代码2.2 优点 四、进一步思考1、省略对Command的建模可以吗&#xff1f;2、命令模式的价值 一、…

GDPU unity游戏开发 碰撞器与触发器

砰砰叫&#xff0c;谁动了她的奶酪让你的小鹿乱撞了。基于此&#xff0c;亦即碰撞与触发的过程。 碰撞器与触发器的区别 通俗点讲&#xff0c;碰撞器检测碰撞&#xff0c;触发器检测触发&#xff0c;讲了跟没讲似的。碰撞器是用来检测碰撞事件的&#xff0c;在unity中&#xff…

gateway中对返回的数据进行处理

gateway中对返回的数据进行处理 背景1.项目层次 背景 最近公司有个需求是对返回数据进行处理&#xff0c;比如进行数据脱敏。最后在gateway中进行处理。 1.项目层次 根据项目的结构&#xff0c;原本在菜单功能处有对于权限设计的url判断&#xff0c;所以在url后面加了一个正…

CGAL 网格测地线距离计算

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 网格测地线距离是指在三维网格模型中计算两点之间的最短路径距离,考虑了网格的拓扑结构和几何形状。与传统的欧几里德距离不同,测地线距离考虑了网格的曲面形状,因此更适用于描述三维空间中的距离。 二、实现代码…

docker常用容器启动命令

docker常用容器启动命令 mysql启动redis启动nginx配置文件&启动 mysql启动 docker run -itd --name mysql-test --restartalways -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 mysqlredis启动 docker run -itd --name redis-test --restartalways -p 6379:6379 redisnginx…

蓝桥杯练习系统(算法训练)ALGO-949 勇士和地雷阵

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 勇士们不小心进入了敌人的地雷阵&#xff08;用n行n列的矩阵表示&#xff0c;*表示某个位置埋有地雷&#xff0c;-表示某个…

yolov5-pytorch-Ultralytics训练+预测+报错处理记录

一、前言 玩一段时间大模型&#xff0c;也该回归一下图像识别。本项目用于记录使用基于Ultralytics的yolov5进行目标检测测试。为什么用Ultralytics呢&#xff1f;答案有3 1、其良好的生态&#xff0c;方便我们部署到其它语言和设备上。因此本次测试结论&#xff1a;大坑没有&…

技术周总结 2024.04.29-05.05

一、python的数据表处理 """ 删除 Doris库中某些表中无效的数据 """ import mysql.connector import socket import socks import pandas as pd import pymysql from sqlalchemy import create_engine, text import csv from datetime import da…

UE5 蓝图入门

基础节点创建&#xff1a; 常量&#xff1a; 按住 1 &#xff0c;点击鼠标左键&#xff0c;创建常量 二维向量&#xff1a; 按住 2 &#xff0c;点击鼠标左键&#xff0c;创建二维向量 三维向量&#xff1a; 按住 3 &#xff0c;点击鼠标左键 乘法&#xff1a; 按住 m 键…

基于node.js+css+html+mysql博客系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、Php、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

【C++风云录】图形和动作捕捉库全面解析:从OpenPose到OpenCV

深入浅出&#xff1a;六大计算机视觉和动作捕捉库的教程和比较 前言 本文将为读者详细介绍六种在计算机视觉领域广泛使用的开源软件和SDK&#xff0c;包括OpenPose、Vicon SDK、Intel RealSense SDK、Microsoft Kinect SDK、PCL (Point Cloud Library)和OpenCV。我们会一一解…

Vue进阶之Vue项目实战(一)

Vue项目实战 项目搭建初始化eslint版本约束版本约束eslint配置 stylelintcspellcz-githusky给拦截举个例子 zx 项目搭建 node版本&#xff1a;20.11.1 pnpm版本&#xff1a;9.0.4 初始化 vue3最新的脚手架 pnpm create vite byelide-demo --template vue-ts pnpm i pnpm dev…

MIPS32 指令架构

指令格式 R 类型 说明&#xff1a; 用于寄存器和寄存器操作 参数说明: Op: 指令操作码Rs: 第一个源操作数寄存器号&#xff0c;参与运算使用Rd: 目的操作数寄存器号&#xff0c;保存结果使用Shamt: 位偏移量&#xff0c;仅在位移指令使用&#xff0c;在此直接置0Func: 指令函…

区块链 | IPFS:IPNS(入门版)

&#x1f98a;原文&#xff1a;IPFS 与 IPNS 啥关系&#xff1f; &#x1f98a;写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留存学习。这篇文章讲得太入门了&#xff0c;不涉及任何底层原理。 正文 随着 2019 年 12 月 12 日 Filecoin 测试网的上线&#xff0c;IPF…

深入 Django 模型层:数据库设计与 ORM 实践指南

title: 深入 Django 模型层&#xff1a;数据库设计与 ORM 实践指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 后端开发 tags: Django ORM模型设计数据库关系性能优化数据安全查询操作模型继承 第一章&#xff1a;引言 Django是一个基于Python的开源…

安卓手机APP开发__媒体开发部分__分享声音的输入

安卓手机APP开发__媒体开发部分__分享声音的输入 目录 概述 安卓10之前的版本的行为 安卓10的行为 共享场景 小助手普通的APP 有可读取权的服务 普通的APP 两个普通的APP 语音电话 普通的APP 概述 声音的输入通常来自于内嵌的麦克风,还有外置的麦克网,或者是一个…

【C++】深入剖析C++11中右值引用和左值引用

目录 一、左值引用 && 右值引用 二、左值引用于右值引用的比较 三、 右值引用使用场景和意义 1、函数返回值 ①移动赋值 ②移动构造 2、STL容器插入接口 ​3、完美转发 一、左值引用 && 右值引用 传统的C语法中就有引用的语法&#xff0c;而C11中新增了…

【简单介绍下Lisp的学习历程】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

计算机网络 3.1网络的拓扑结构

第三章 网络技术基础 第一节 网络的拓扑结构 一、认识拓扑结构 1.定义&#xff1a; ①网络节点和链路的几何图形&#xff1b; ②网络中网络单元的地理分布和互联关系的几何构型&#xff1b; ③通信子网的拓扑结构。 2.三要素&#xff1a;可靠性、扩充性、费用高低。 3.影…