Ajax day-01

news2024/11/13 10:40:35

目录

一. Ajax

1.1 创建XMLHttpRequest对象

1.2 Ajax向服务器发送请求

1.3 设置http请求头

1.4 发送请求

1.5 获得响应

1.6 监听请求状态的改变

1.7 获取响应头

1.8 获得响应主体

1.9 处理服务器返回的数据

1.10 怎样向服务器传递数据？

二. 接口文档

三. 开发模式

3.1 前后端混合

3.2 前后端分离

3.3 跨域和同源策略

3.4 JSONP实现跨域请求

一. Ajax

Ajax是Asynchronous Javascript And XML（异步JavaScript和XML）的缩写。

Ajax技术描述了使用脚本操纵HTTP和Web服务器进行数据交换，在页面不刷新的情况下，实现页面的局部更新。

重点：

  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1.1 创建XMLHttpRequest对象

浏览器在XMLHttpRequest类上定义了它的HTTP方法。这个类型的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和获取相应数据。

创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

回忆：

一个HTTP请求由4部分组成：

  • HTTP请求方法(GET/POST等)

  • 请求的URL

  • 一个可选的请求头集合，其中可能包含身份验证信息

  • 一个可选的请求主体

1.2 Ajax向服务器发送请求

创建XMLHttpRequest对象之后，我们就可以使用XMLHttpRequest对象的open()方法发起请求，该方法必须要指定请求方法（GET、POST等）和URL。

xhr.open("GET", "home.html");
xhr.open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])

  • method：用于指定请求方式，如GET、POST，不区分大小写。 URL：表示请求的地址。 asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。 userName和password：可选参数，表示HTTP认证的用户名和密码。

  • 请求方法不区分大小写，但通常都写成大写的形式。除了"GET"和"POST"之外，该方法还支持"DELETE"、"HEAD"、"OPTIONS"和"PUT"作为第一个参数。但"TRACE"和 "CONNECT"由于安全风险已被明确禁止使用。

  • URL用来指定请求的资源。它可以是一个相对URL（相对于当前文档的URL），也可以是一个绝对URL。如果使用的是绝对URL，则协议、主机和端口通常必须要与当前文档URL保持一致，因为跨域的请求通常会报错（在服务器允许跨域请求时，则不会报错）。

注意：

同步和异步的区别：是否阻塞代码的执行。

异步方式（默认）：是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果。下面请看异步的执行过程，

同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。

1.3 设置http请求头

除了设置请求方法和URL以外，我们还可以设置请求头。POST请求一般是要用"Content-Type"请求头指定请求主体的MIME类型(用来描述实体内容的编码格式)：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//默认编码格式(数据被编码为名称/值对) 
xhr.setRequestHeader("Content-Type", "application/json");//用来告诉服务端消息主体是序列化后的 JSON 字符串

扩展阅读:Form表单的编码类型

但是有些请求头我们不能自己指定，例如"Content-Length"、"Date"、"Referer"、"User-Agent"等，XMLHttpRequest将自动添加这些头，防止伪造它们。除此之外，XMLHttpRequest对象自动处理Cookie、连接时间、字符集和编码判断，所以我们无法向setRequestHeader()传递如下的请求头：

Accept-CharsetContent-Transfer-EncodingTE
Accept-EncodingDateTrailer
ConnectionExpectTransfer-Encoding
Content-LengthHostUpgrade
CookieKeep-aliveUser-Agent
Cookie2RefererVia

1.4 发送请求

使用XMLHttpRequest发起请求的最后一步是指定可选的请求主体并将它发送给服务器。

xhr.send(content);//Open的方式是post
xhr.send(null);//open的方式是get的一般不用send
//xhr.send('clazz=火花&name=张三&gender=男');

GET请求没有请求体，所以应该传递null或省略这个参数。而POST请求通常具有请求主体，同时它应该与使用setRequestHeader()指定的"Content-Type"一致。

1.5 获得响应

一个完整的HTTP响应消息由状态行、响应头、空行和响应主体组成。这些都可以通过XMLHttpRequest对象的方法和方法获取。

1.6 监听请求状态的改变

为了在响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的onreadystatechange事件。

xhr.onreadystatechange = function(){
​
};

但为了理解这个事件类型，我需要先弄明白readyState属性。readyState属性的值是一个整数，用来指示HTTP请求的状态。readyState属性的值如下表所示：

常量值含义
UNSENT0初始化，尚未调用open()方法
OPENED1启动，已调用open()方法，但尚未调用send()方法
HEADERS_RECEIVED2发送，已调用send()方法，接收到响应头信息
LOADING3接收中，已经接收到部分响应主体
DONE4完成，已经接收到全部响应数据，而且已经可以在客户端使用了

在实际应用中，当readyState属性的值改变为0或1时可能不会触发这个事件。当readyState属性的值改变为4或服务器的响应完成时，所有的浏览器都会触发readystatechange事件。因此为了判断响应是否真正完成了，我们应该在事件处理程序中时刻检测readyState属性的值。

xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
        console.log("请求完成了");
    }
};

但这样只能确保请求完成了，并不能确保请求成功。因此我们还需要根据响应的【状态码】来判断请求是否成功。

我们可以通过XMLHttpRequest对象的status和statusText属性获取HTTP状态码，状态消息。

xhr.status       // 200
xhr.statusText   // OK

代码如下：

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("请求完成并且成功了");
    }
};

完善的判断信息

xhr.onreadystatechange = function(){
    if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            };
        };
};

1.7 获取响应头

  • 响应头用于告知客户端本次响应的基本信息，包括服务器程序名、内容的编码格式、缓存控制等。请求头和响应头是浏览器和服务器之间交互的重要信息，由程序自动处理，通常不需要人为干预。

  • 使用getResponeHeader()和getAllResponeHeaders()获取响应头信息。

xhr.getResponeHeader("Content-Type")      // "text/html"
xhr.getAllResponeHeaders()              // 获取所有的响应头

1.8 获得响应主体

服务器的响应实体内容有多重编码格式，当用户请求的是一个网页，实体内容的格式就是HTML，如果请求的是图片响应的就是图片，服务器为了告知浏览器内容类型，会通过响应头中的Content-type字段来描述，这是一种MIME常见的类型。

无论响应主体内容类型是什么，响应主体的内容都会保存到responseText和responseXML属性中；而对于非XML数据而言responseXML属性的值将为null。

xhr.responseText     // 服务器端返回的文本内容

1.9 处理服务器返回的数据

服务器返回的数据都是JSON格式的字符串，为了使用方便，我们需要先把字符串转换成JavaScript对象（Object/Array）。

JSON.parse(xhr.responseText);

转换之后，就能以访问对象属性的方式拿到各种数据，实例如下：

// 转换成Object类型的对象
[{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}]

// 转换成Array类型的对象
[
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}
]

1.10 怎样向服务器传递数据？

GET方式的请求：

传递给后台的数据要拼接到URL的后面，以问号（？）开始，参数是以name=value的形式出现，每两个键值对之间以（&）分隔。例如：

'http://192.168.0.101:8080/AjaxDemo/LoginServlet?username=zhangsan&password=123456'

POST方式的请求：

先通过请求头（Content-Type）指定数据的格式类型，常用的格式类型有两种，分别是：

  • application/x-www-form-urlencoded：用来告诉服务端消息主体是经过 URL编码的字符串(窗体数据被编码为名称/值对)

  • application/json ：用来告诉服务端消息主体是序列化后的 JSON 格式的字符串

  • xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-Type","application/json");

  
然后将编码之后的数据通过send()方法传递给服务器，例如：

xhr.send(“clazz=%E7%81%AB%E8%8A%B112%E6%9C%9F&name=%E9%99%88%E6%A2%A6%E9%BE%99&gender=%E7%94%B7&age=20&hobby=%E7%9D%A1%E8%A7%89&hobby=%E6%89%93%E8%B1%86%E8%B1%86&tel=13834569928&address=%E5%8D%97%E9%98%B3&remark=%E6%96%B0%E5%90%8C%E5%AD%A6&date=2019-08-01”)。

二. 接口文档

在实际的项目开发中，后台服务写好之后，后台人员会给前台人员一份【接口文档】，文档中列出了每个功能所需要的接口信息，我们前台人员只需要根据文档的要求与服务器进行数据交互即可。接口文档示例如下：

接口请求方式作用请求参数
/api/student/getStudentGET1、获取所有学生信息 2、根据ID获取学生信息 3、根据name获取学生信息可选参数： id 学生ID name 学生姓名
/api/student/removeStudentGET1、根据ID删除学生信息必传参数： id 学生ID
/api/student/addStudentPOST1、添加学生信息必传参数： clazz班级 name 姓名 gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息
/api/student/updateStudentPOST1、更新学生信息必传参数：id 学生ID clazz班级 name 姓名 gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息**

三. 开发模式

3.1 前后端混合

前端代码与后台代码混合编写，也就是说前端代码和后台代码同时出现在一个文件中。例如，index.php文件是由PHP代码和HTML代码混写的：

<!DOCTYPE html>
<html>
<body>
<?php
$x=5; // global scope
function myTest() {
   $y=10; // local scope
   echo "<p>在函数内部测试变量：</p>";
   echo "变量 x 是：$x";
   echo "<br>";
   echo "变量 y 是：$y";
} 

myTest();

echo "<p>在函数之外测试变量：</p>";
echo "变量 x 是：$x";
echo "<br>";
echo "变量 y 是：$y";
?>
</body>
</html>

//再例如，index.jsp是由 Java代码和HTML代码混写的：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>life.jsp</title>
</head>
<body>

在前后端不分离的时代，在项目开发阶段，前端人员负责编写HTML页，后端人员负责写接口，前端人员调试页面动态数据都需要后端人员的配合，不能单独调试，耗时耗力。前端把前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。

3.2 前后端分离

随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。

  • 前后端分离情形一

前端资源和后台接口位于同一个服务器

  • 前后端分离情形二

前台资源和后台接口分别位于不同的服务器(跨域)

3.3 跨域和同源策略

例如【前后端分离情形二】浏览器不允许一个服务器中的页面向另一个服务器发送请求，错误信息如下：

我们通常称这种类型的请求叫跨域请求。

为什么会跨域呢?

  • 因为违背了同源策略的请求就形成了跨域。

那什么是同源策略呢?

是指协议，域名，端口号相同就称为同源,同源的请求是允许的,如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问,就造成了跨域。

那怎么样解决这个问题呢？

为使受信任的网站之间能够跨域访问，HTML5提供了一个新的策略，就是Access-Control-Allow-Origin响应头。目标服务器通过该响应头可以指定允许来自特定URL的跨域请求，其值可以设置为任意URL或特定URL等。

实现方式有:

1、通过设置后台服务器允许跨域请求

2、JSONP

3、使用代理服务器

4、前台使用代理

3.4 JSONP实现跨域请求

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。我们可以通过使用 html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

  • JSONP：遵循浏览器的同源策略基础上实现跨域请求的一种方式。 原理：与XMLHttpRequest无关，是利用<script>标签的src属性实现了跨域请求。 问题：在浏览器中， 哪些标签可以加载跨域资源？ 答案：<script>、<img>、<iframe>、<link>等标签。

  • JSONP之所以采用<script>标签，是因为该标签加载的资源可以直接当做JavaScript代码执行，只要通过服务器端的配合，就可以传送数据。

    注意：

    JSONP本质上是加载了其他网站的脚本，这种方式存在安全风险，因为 其他网站可以利用JavaScript窃取用户信息，或更改页面内容。因此，在加载脚本前，一定确保对方是受信任的网站。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

线性表之数组

线性表之数组

数组&#xff08;Array&#xff09;是 C/C 中最基础和重要的数据结构之一&#xff0c;它提供了一种有效存储和访问固定大小元素集合的方式。关于数组的定义和使用相信大家都已经熟练掌握&#xff0c;本文将着重为大家剖析数组的物理结构和逻辑结构。 1. 数组的物理结构 数组的…
阅读更多...
视频技术未来展望：EasyCVR如何引领汇聚融合平台新趋势

视频技术未来展望：EasyCVR如何引领汇聚融合平台新趋势

随着科技的飞速发展&#xff0c;视频技术已成为现代社会不可或缺的一部分&#xff0c;广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。本文将探讨视频技术的未来发展趋势&#xff0c;并深入分析TSINGSEE青犀EasyCVR视频汇聚融合平台的技术优势&#xff0c;展现其…
阅读更多...
【SolidWorks2024 详细安装教程【附安装包】】

【SolidWorks2024 详细安装教程【附安装包】】

提示&#xff1a;【SolidWorks2024 详细安装教程【附安装包】】 文章目录 安装包获取一、安装步骤总结 安装包获取 提示&#xff1a;这里可以获得软件安装包&#xff1a; SolidWorks2024详细安装教程&#xff0c;百度网盘 链接&#xff1a;https://pan.baidu.com/s/1UyipwXokK…
阅读更多...
rsync搭建全网备份

rsync搭建全网备份

rsync搭建全网备份 1. 总体概述1.1 目标1.2 简易指导图1.3 涉及工具或命令1.4 环境 2. 实施2.1 配置备份服务器2.2 备份文件准备2.3 整合命令2.4 扩展功能 1. 总体概述 1.1 目标 本次搭建目标&#xff1a; 每天定时把服务器数据备份到备份服务器备份完成后进行校验把过期数据…
阅读更多...
【python】turtle的使用

【python】turtle的使用

文章目录 1.初始化2.颜色3.画笔4.其他案例&#xff1a;分形树的绘制 1.初始化 import turtle# 创建一支画笔 pen turtle.Turtle()# ...# 暂停屏幕&#xff0c;防止程序关闭 turtle.done()2.颜色 # 设置颜色模式(如果要使用颜色相关设置&#xff0c;必须要使用这个) turtle.c…
阅读更多...
基于STM32的RFID高速收费系统（论文+源码+实物）

基于STM32的RFID高速收费系统（论文+源码+实物）

1系统方案设计 本文基于STM32的RFID高速收费系统&#xff0c;其可以实现小车和货车两种车型收费&#xff0c;当车辆超过了规定的重量后&#xff0c;出现声光报警提示&#xff0c;并且启动杆不会抬起&#xff0c;只有当车辆重量低于设置值时&#xff0c;启动杆才会自动抬起&…
阅读更多...
零基础学习Redis(7) -- hash类型命令使用

零基础学习Redis(7) -- hash类型命令使用

Redis本身就是通过哈希表的方式组织数据&#xff0c;同时redis中的value也可以是另一个哈希表。 1. 常用命令 1. hset / hsetnx hset key filed1 value1 filed2 value2 ... hset 用于把键值对存入value中&#xff0c;这里的key为redis组织的键&#xff0c; filed1 value1 fil…
阅读更多...
SpringData-ElasticSearch入门

SpringData-ElasticSearch入门

文章目录 1、创建demo工程2、application.properties3、Goods 实体类4、EsDemoApplicationTests 测试类5、pom.xml6、查看索引库7、查看单个索引&#xff08;数据库&#xff09;8、从goods索引中检索出符合特定搜索条件的文档&#xff08;或记录&#xff09; 1、创建demo工程 2…
阅读更多...
Elasticsearch：使用 LTR 进行个性化搜索

Elasticsearch：使用 LTR 进行个性化搜索

作者&#xff1a;来自 Elastic Max Jakob 如今&#xff0c;用户已经开始期待根据个人兴趣定制搜索结果。如果我们听的所有歌曲都是摇滚歌曲&#xff0c;那么在搜索 “Crazy” 时&#xff0c;我们会期望 Aerosmith 的歌曲排在搜索结果的首位&#xff0c;而不是 Gnarls Barkley 的…
阅读更多...
使用安信可Ai-WB2-12F开启wifi与手机通信TCP-IP(AT指令)

使用安信可Ai-WB2-12F开启wifi与手机通信TCP-IP(AT指令)

当时在做两个单片机之间无线通信&#xff0c;或者单片机与手机无线通信&#xff0c;就像找一个蓝牙和wifi双模的无线模块&#xff0c;一开始看ESP8684&#xff08;ESP32-C2&#xff09;这个芯片模组是有wifi和蓝牙的&#xff0c;买回来后才发现他不可以在程序运行中更换蓝牙或者…
阅读更多...
《黑神话·悟空》这款游戏到底是用什么编程语言开发的？

《黑神话·悟空》这款游戏到底是用什么编程语言开发的？

你也有被这段游戏试玩视频刷屏吗&#xff1f; 13分钟、国产团队出品、B站上线不到24小时&#xff0c;播放量已经破千万&#xff0c;迅速火爆全网。 这就是来自国内游戏团队游戏科学&#xff08;Game Science&#xff09;开发的3A大作《黑神话&#xff1a;悟空》。 《黑神话悟…
阅读更多...
vscode开发小程序

vscode开发小程序

1 安装 "微信小程序开发工具" 2 安装 "WXML - Language Service" 3 安装 "wxmp-api-plugin" 或 "wechat-snippet" 4 安装"WXSS"
阅读更多...
顶级的python入门教程！小白到大师，从这篇教程开始！

顶级的python入门教程！小白到大师，从这篇教程开始！

1. 为什么要学习Python&#xff1f; 学习Python的原因有很多&#xff0c;以下是几个主要的原因&#xff1a; 广泛应用&#xff1a;Python被广泛应用于Web开发、数据科学、人工智能、机器学习、自动化运维、网络爬虫、科学计算、游戏开发等多个领域。掌握Python意味着你可以在这…
阅读更多...
嵌入式全栈开发学习笔记---Linux系统编程(进程间通信)

嵌入式全栈开发学习笔记---Linux系统编程(进程间通信)

目录 进程间通信概述 进程通信目的 进程间通信的发展 进程间通信分类 管道通信 无名管道 有名管道mkfifo() 信号 发送信号kill & raise 忽略信号signal() 发送信号alarm() 消息队列 消息队列使用的步骤 创建消息队列msgget() 读写消息队列msgrcv()/msgsnd()…
阅读更多...
ip地址一天变化好几次

ip地址一天变化好几次

‌IP地址每天变化的原因主要取决于其分配方式&#xff1a;静态或动态。静态IP地址是长期固定分配给一台设备的&#xff0c;除非进行手动更改或网络配置发生变化&#xff0c;否则该设备的IP地址将保持不变。而动态IP地址则是根据网络环境和需求动态分配给设备的&#xff0c;可能…
阅读更多...
一些评估模型的总结（1）

一些评估模型的总结（1）

最近学习了评估模型&#xff08;如下所示&#xff09;&#xff0c;对这四种方法进行小总结。 目录 1. 层次分析法。&#xff08;主观赋权方法&#xff0c;主观确定成对比较矩阵&#xff09; 2. 熵权法&#xff08;基于数据的客观赋权的方法&#xff09; 3. topsis方法&…
阅读更多...
【图论入门】图的存储

【图论入门】图的存储

1.邻接矩阵 邻接矩阵是图论中用于表示图&#xff08;Graph&#xff09;结构的一种重要数据结构&#xff0c;特别适用于表示顶点之间连接关系的图形。在计算机科学和数学领域&#xff0c;它被广泛应用来编码无向图和有向图的信息。 特点&#xff1a; 1、无向图的邻接矩阵是对称…
阅读更多...
Java:时区的用法

Java:时区的用法

文章目录 ZoneId常见用法 ZonedDateTime常见方法 代码 黑马学习笔记 ZoneId 常见用法 ZonedDateTime 常见方法 代码 package NewTime;import java.time.Clock; import java.time.ZoneId; import java.time.ZonedDateTime;/*** Author: ggdpzhk* CreateTime: 2024-08-31*/ pu…
阅读更多...
09：Logic软件原理图信号连通

09：Logic软件原理图信号连通

原理图信号连通 快捷键&#xff1a;F2 2.添加网络名称
阅读更多...
【React】为什么Hooks不能出现在判断中

【React】为什么Hooks不能出现在判断中

前言 在 React 中&#xff0c;Hooks 不能写在条件语句中&#xff0c;如下面这段代码点击button后则会报错。 import { useEffect, useState } from "react"export default () > {const [count, setCount] useState(0)if (count > 0) {useEffect(() > {co…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023