第二十三章 javascript请求方式Ajax

文章目录

  • 一、Ajax的概念
  • 二、Ajax的使用
      • 使用流程
      • xhr 状态码:xhr.readyState
      • http 状态码:xhr.status
  • 三、发送数据的数据格式 - Content-Type
  • 四、其他
      • 1. POST和GET的区别
      • 2. AJAX的兼容问题
      • 3. 个别设备中ajaxGet请求的缓存问题
      • 4. XMLHttprequest常见事件

一、Ajax的概念

  1. ajax是前后端数据交互的重要手段
  2. Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
  3. Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
    • 异步JavaScript,通过用户或其他与浏览器相关事件捕获交互行为
    • XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
    • 服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
    • 其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上。
  4. 由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
    • 不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
    • 用户体验极佳(不刷新页面即可获取可更新的数据);
    • 提升 Web 程序的性能(在传递数据方面做到按需发送,不必整体提交);
    • 减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
  5. 而 Ajax 的不足由以下几点:
    • 不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
    • 前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会记录前后页面);
    • 搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);

二、Ajax的使用

使用流程

  1. 创建xhr对象:
    • const xhr = new XMLHttpRequest( );
  2. 设置请求参数
    • xhr.open('get', 'data/test.json', true);
      • 参数1:请求方式:POST || GET
      • 参数2:要请求的url
      • 参数3:true异步,false同步
  3. 观察状态(是否接通)
    • onreadystatechange:当xhr.readyState发生改变时触发
    • onload:当xhr.readyState为 4 时触发
  4. 发送
    • xhr.send(null);
  5. ajax使用get方式和post发送请求的主要区别:
    • open的第一个参数
    • 发送请求数据的位置
      • get数据在url后拼接
      • post数据传给send方法
    • 发送数据的格式
      • get数据默认格式为:**querystring**
      • post数据需要手动设置为:**application/x-www-form-urlencoded**
        • ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr 状态码:xhr.readyState

状态码含义
0(未初始化)还没有调用send()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法执行完成,已经接收到全部响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了

http 状态码:xhr.status

状态码含义
1**请求收到,继续处理
2**操作成功收到,分析、接收
3**完成此请求必须进一步处理
4**请求包含一个错误语法或不能完成
5**服务器执行一个完全有效请求失败

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——端口过载,服务器使用另一个端口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支持请求头中指定的HTTP版本

三、发送数据的数据格式 - Content-Type

Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型。在互联网中有成百上千种不同的数据类型,HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签,用于区分数据类型。最初MIME是用于电子邮件系统的,后来HTTP也采用了这一方案。

在HTTP协议消息头中,使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据,以及告诉客户端(一般是浏览器)如何解析响应的数据,比如显示图片,解析并展示html等等。

  1. Content-Type的语法:
    • Content-Type: type/subtype;parameter
      • type:主类型,任意的字符串,如text,如果是*号代表所有;
      • subtype:子类型,任意的字符串,如html,如果是*号代表所有,用“/”与主类型隔开;
      • parameter:可选参数,如charset,boundary等。
    • 例如:
      • Content-Type: text/html;
      • Content-Type: application/json;charset:utf-8;
  2. 常见的媒体格式类型如下:
    • text/html : HTML格式
    • text/plain :纯文本格式
    • image/gif :gif图片格式
    • image/jpeg :jpg图片格式
    • image/png:png图片格式
    • application/xml:XML数据格式
    • application/json:JSON数据格式
    • application/pdf:pdf格式
    • application/x-www-form-urlencoded : 中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
    • multipart/form-data:需要在表单中进行文件上传时,就需要使用该格式

四、其他

1. POST和GET的区别

  1. POST主要用来发送数据,GET主要用来获取数据;
  2. POST发送数据的安全性较好,而GET较差;
  3. POST发送数据不限制大小,而GET大小受限2~100k。
  4. 在数据获取时用GET方式,在操作数据时应使用POST方式。

2. AJAX的兼容问题

  1. 正常浏览器:new XMLHttpRequest();
  2. IE5:new ActiveXObject("Microsoft.XMLHTTP");

3. 个别设备中ajaxGet请求的缓存问题

  1. 某次请求走缓存的条件:get请求,重复地址
    • 后果:提升速度,无法实时获取服务器最新数据
  2. 不想走缓存:可以通过在url后拼接时间戳的方式解决
    • url = url + "?" + str + "__t__=" + Date.now()

4. XMLHttprequest常见事件

  1. readyStateChange事件:表示readyState属性的值发生改变。
  2. load事件:表示服务器响应数据接收完毕,等同于readyState4时的状态。
  3. abort事件:表示请求被中断。可通过xhr.abort()方法中断xhr请求。
  4. timeout事件:表示服务器响应超时。可通过xhr.timeout=1000属性设置超时时间,单位为毫秒。
  5. error事件:表示请求出错。
  6. progress 事件:上传文件时,不断返回上传的进度。

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

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

相关文章

Dubbo分布式服务框架:原理深度解析与实战应用探索(一)

本系列文章简介: 在本系列文章中,我们将深入探索Dubbo分布式服务框架的原理和实战应用。我们将从Dubbo的架构设计开始,详细解析其内部的工作原理和核心组件。我们将探讨Dubbo的服务治理机制、负载均衡策略、容错机制等,并通过实际…

Linux:文件权限详解及修改方法

文章目录 1、Linux文件权限1.1、如何查看到文件权限1.2、ll命令介绍 2、权限分类2.1、文件权限2.2、文件夹权限 3、权限修改3.1、修改文件/文件夹权限1)chmod指令2)chmod指令符号 3.2、修改文件/文件夹所属用户3.3、修改文件/文件夹所属群组 4、参考 1、…

AI产品摄影丨香水

AI电商产品拍摄丨(可指定产品) 均为概念图 可换产品 可指定产品,可换logo 工具:StartAI 搭配“手机摄影”风格使用效果更佳哦 咒语:anha perfume in bottle on stone surface, in the style of everyday american…

和为K的子数组

题目: 使用前缀和的方法可以解决这个问题,因为我们需要找到和为k的连续子数组的个数。通过计算前缀和,我们可以将问题转化为求解两个前缀和之差等于k的情况。 假设数组的前缀和数组为prefixSum,其中prefixSum[i]表示从数组起始位…

JQuery的基础笔记

前言: j --> JavaScript Query --> 查询 jquery的入口函数 等DOM结构渲染完毕即可执行内部代码 相当于原生js的DOMContentLoaded 不同于原生js中的load是等一切加载完毕再执行 用法:(推荐第二种) $(document).ready(…

分段线性化问题探析

目录 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 4 matlab测试结果说明 5 分段线性化应用 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 clc;clear all; gn10;tn1; x_pfsdpvar(1, t…

vue3基础教程(3)——引入ui框架iview(viewui)

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 下载iview2.更新资源3.引入插件4.运行项目 专栏简介 本系列文章由浅入深,从基础知识到实战开发,非常适合入门同学。 零基础读者也能成功由本系列文章入门…

认识事物的几个阶段 GPU学习

1. GPT的说法 认识事物的过程通常可以分为以下几个阶段: 1. 感知阶段: 这是认识事物的第一步,通过感官(视觉、听觉、触觉、味觉、嗅觉)接收外界信息。感知是对外部世界的直接观察和感受。 2. 注意阶段:…

底层day2作业

思维导图 作业: 1.使用ADC采样光敏电阻数值,如何根据这个数值调节LED灯亮度 连接硬件:将光敏电阻与单片机的ADC引脚连接,将LED灯与单片机的PWM引脚连接。初始化:在程序中初始化ADC和PWM模块,并设置相应的…

大数据分析技术工程师CCRC-BDATE

大数据分析技术工程师介绍 大数据始于科技之美,归于创造价值。大数据时代,“谁用好数据,谁就能把握先机、赢得主动”。当下数据驱动的电信、社交媒体、生物医疗、电子政务商务等行业都在产生着海量的数据,随着大规模数据关联、交叉…

@ResponseStatus

目录 概述: 用途: 参数: 注意事项: 自定义异常类: 底层原理: 概述: 在 Spring MVC 中,我们有很多方法来设置 HTTP 响应的状态码其中最直接的方法:使用 ResponseSt…

FolkMQ 作一个简单的消息中间件(最简单的那种)

FolkMQ 打算作一个简单的消息中间件(全球最简单的那种,要比谁都简单!)。追世间简单为何物,可叫我生死相许! 面向简单编程 1) 启动服务 docker run -p 18602:18602 -p 8602:8602 noearorg/folkmq-server:…

K8S之实现业务的蓝绿部署

如何实现蓝绿部署 什么是蓝绿部署?蓝绿部署的优势和缺点优点缺点 通过k8s实现线上业务的蓝绿部署 什么是蓝绿部署? 部署两套系统:一套是正在提供服务系统,标记为 “绿色” ;另一套是准备发布的系统,标记为…

删除指定的数

删除指定的数 题目描述:解法思路:解法代码:运行结果: 题目描述: 先输入10个整数存放在数组中,再输入⼀个整数n,删除数组中所有等于n的数字,数组中剩余的数组保证数组的最前面&#…

向爬虫而生---Redis 探究篇6<Redis的Bigkey问题介绍>

前言: 随着数据规模的增长,Redis的BigKey问题也开始显现。 BigKey问题主要指的是存储了大量数据的key,这可能给Redis的性能和可用性带来负面影响。当一个key的数据量过大时,会占用宝贵的内存资源,拖慢Redis的响应速度。此外,存储和恢复这些BigKey也会变得困难和耗时,增…

SpringBoot项目如何添加全局接口上下文

1. 定义Spring Boot应用的路由 首先,确保您的Spring Boot应用有一个统一的路由前缀。例如,可以在application.properties或application.yml配置文件中使用server.servlet.context-path属性来定义所有请求的基础路径。 # application.properties server…

vue基础教程(4)——深入理解vue项目各目录

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介 本系列文章由浅入深,从基础知识到实战…

docker部署若依项目

目录 目录 一、搭建局域 二、redis安装 1.创建目录 2. redis.conf修改 三、MySQL安装 1. 安装 2. 设置远程连接 3. 创建数据库 四、若依后端项目搭建 1. 切换到家目录 2. 上传jar包 3. 上传Dockerfile文件 4. 构建镜像 5. 运行容器 6. 查看运行情况 7. 测试(自己…

AD20软件使用指南:拼板操作与Gerber文件生成详解

文章目录 一、前言二、拼板1.创建新的PCB,用于放置拼板文件2.放置拼板阵列3.设置阵列信息4.V割拼板,放置工艺边和定位孔和光点5.完成拼板 三、生成Gerber文件1.输出Gerber文件2.选择单位和格式3.选择输出的图层4.生成Gerber文件5.生成钻孔文件 四、上传嘉…

01.AJAX 概念和 axios 使用

01.AJAX 概念和 axios 使用 1. 什么是 AJAX ? 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中,使用 AJAX技术(XHR对象)发起获取省份列表数据的请求,服务器代码响应准备好的省份列表数据给前端,前端拿…