Ajax学习笔记

devtools/2024/11/17 3:32:13/

目录​​​​​​​

是什么

工作原理基于的关键技术

XMLHttpRequest对象

异步通信

数据格式

XMLHTTPRequest对象

功能

回调函数

onreadystatechange

onload

onerror

ontimeout

函数

属性

写法

基本格式

完整格式

Ajax可以发起的不同请求

GET请求

POST请求

DELETE请求

PUT请求

jQuery封装后的写法

是什么

Ajax全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建异步网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这使得网页能够更快速地响应用户操作，并提供更流畅的用户体验。

工作原理基于的关键技术

XMLHttpRequest对象

这是Ajax的核心，它允许Web页面通过JavaScript向服务器发送HTTP请求，并在不重新加载整个页面的情况下接收响应。

异步通信

Ajax使用异步方式与服务器通信，这意味着浏览器在等待服务器响应的同时，仍然可以响应用户的其他操作。

数据格式

虽然Ajax的名字中包含“XML”，但实际上它可以使用多种数据格式，如JSON（JavaScript Object Notation）、HTML、纯文本等。其中，JSON由于其轻量级和易于解析的特点，在现代Web开发中尤为流行。

XMLHTTPRequest对象

提供了一系列的事件、功能和函数，用于发送 HTTP 请求并处理响应。以下是 XMLHttpRequest 对象的主要事件、功能和函数的简要概述：

功能

  1. 异步请求：XMLHttpRequest 支持异步请求，这意味着你可以在不阻塞其他浏览器活动的情况下发送请求并接收响应。

  2. 跨域请求：尽管出于安全原因，浏览器通常限制跨域请求，但 XMLHttpRequest 支持 CORS（跨源资源共享）机制，允许符合条件的跨域请求。

  3. 请求头与响应头：你可以使用 XMLHttpRequest 设置自定义的请求头，并读取响应头信息。

  4. 请求方法与数据：支持多种 HTTP 请求方法（如 GET、POST、PUT、DELETE 等），并允许发送和接收各种类型的数据（文本、XML、JSON 等）。

  5. 超时设置：可以为请求设置超时时间，如果请求超过这个时间还没有完成，就会触发 ontimeout 事件。

回调函数
onreadystatechange

描述：onreadystatechange是最常用的回调函数，它会在 XMLHttpRequest 对象的 readyState 属性发生变化时被调用。你可以通过检查 readyState 的值来确定请求的阶段，并据此执行不同的操作。当 readyState 为 4（表示请求已完成）且 status 为 200（表示请求成功）时，你可以通过 responseText 或 responseXML 属性获取响应数据。

示例：

javascript">// 创建一个XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  //此处省略设置请求方法和发起请求...xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  console.log(xhr.responseText);  // 处理响应数据  }  
};
onload

描述：onload 回调函数在请求成功完成时调用。它简化了处理响应的过程，因为你不需要检查 readyState 和 status。

示例：

javascript">// 创建一个XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  //此处省略设置请求方法和发起请求...xhr.onload = function() {  if (xhr.status === 200) {  console.log(xhr.responseText);  // 处理响应数据  } else {  console.error('请求返回了错误状态码: ' + xhr.status);  }  
};
onerror

描述：onerror 回调函数在请求过程中发生错误时被调用。这可以是由于网络问题、服务器问题或其他原因导致的请求失败。

示例：

javascript">// 创建一个XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  //此处省略设置请求方法和发起请求...xhr.onerror = function() {  console.error('请求发生错误');  // 处理错误情况  
};
ontimeout

描述：​​​​​​​ontimeout 回调函数在请求超时时调用。你可以通过 XMLHttpRequest 对象的 timeout 属性来设置超时时间。

示例：

javascript">// 创建一个XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  //此处省略设置请求方法和发起请求...xhr.timeout = 3000; // 设置超时时间为3秒 
xhr.ontimeout = function() { console.error('请求超时'); // 处理超时情况 
};
函数
  • open(method, url, async, username, password)
    • 作用：初始化请求参数，但不发送请求。
    • 参数：
      • method：请求方法，如GET、POST等。
      • url：请求的URL地址。
      • async：是否异步发送请求，通常为true。
      • username 和 password：可选，用于身份验证的用户名和密码。
  • send(data)
    • 作用：发送请求。
    • 参数：
      • data：可选，作为请求体发送的数据。对于GET请求，通常不需要传递此参数。
  • abort()
    • 作用：取消当前请求。(一旦请求被 abort() 取消，你就不能再次使用这个 XMLHttpRequest 对象来发送新的请求)
  • setRequestHeader(header, value)
    • 作用：设置请求头。
    • 参数：
      • header：请求头的名称。
      • value：请求头的值。
  • getResponseHeader(header)​​​​​​​
    • 作用：获取指定响应头的值。
    • 参数：
      • header：要检索的HTTP响应头的名称。例如，要获取 Content-Type，你应该传入 "Content-Type" 作为参数。
    • ​​​​​​​返回值：
      • 如果指定的响应头存在，则返回其值（字符串）。
      • 如果指定的响应头不存在或请求尚未完成，则返回 null。
  • getAllResponseHeaders()
    • ​​​​​​​作用：获取所有响应头字段。
    • ​​​​​​​返回值：包含所有响应头信息的字符串。如果请求尚未完成，则返回 null。
属性
  • readyState
    • 描述：表示请求的状态。其值可以是以下之一：
      • 0：未初始化。
      • 1：正在加载。
      • 2：已加载。
      • 3：交互中。
      • 4：完成。

PS：
0 (UNSENT): 请求尚未初始化。1 (OPENED): 请求已经初始化，但尚未发送。
2 (HEADERS_RECEIVED): 请求已经发送，且响应头已接收。3 (LOADING): 响应体正在接收中。
4 (DONE): 请求完成，且响应已准备好。

  • responseText
    • 描述：服务器响应的响应文本（不包括HTTP头部）。
  • responseXML
    • 描述：服务器响应XML，解析为Document对象。如果响应不是有效的XML，则为null。
  • status
    • 描述：服务器响应的状态码（如200表示成功，404表示未找到等）。
  • statusText
    • 描述：服务器响应的状态文本描述。
  • onreadystatechange
    • 描述：一个事件处理器，当readyState属性的值改变时调用。通常用于检查请求是否完成，并处理响应。

示例：

原生的 XMLHttpRequest 对象或现代的 Fetch API 来发起这些不同类型的请求。

写法

在JavaScript中使用Ajax发起请求，你不需要导入特定的文件，因为Ajax是JavaScript的一部分，它内置在浏览器中。你只需要使用JavaScript编写Ajax请求的代码即可。

基本格式

包含创建XMLHttpRequest对象、设置请求参数、发送请求，以及处理响应。

示例：

javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL  
var url = 'https://api.example.com/data?param1=value1&param2=value2';// 设置请求完成时的回调函数  
xhr.onreadystatechange = function() {  // 检查请求是否完成  if (xhr.readyState === XMLHttpRequest.DONE) {  // 检查请求是否成功  if (xhr.status === 200) {  // 请求成功，处理响应数据  console.log(xhr.responseText);  } else {  // 请求失败，输出错误信息  console.error('请求失败: ' + xhr.status);  }  }  
};  // 打开连接，设置请求方法、URL和是否异步处理  
xhr.open('GET', url, true);  // 发送请求  
xhr.send();

完整格式

包含XMLHttpRequest对象所有回调函数、函数、属性。

示例：

javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL  
var url = 'https://api.example.com/data';  // 初始化请求  
xhr.open('GET', url, true);  // 设置请求头（如果需要的话）  
// xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.setRequestHeader('Authorization', 'Bearer your_token');    // 设置onreadystatechange事件处理器  
xhr.onreadystatechange = function() {  // 每当readyState改变时都会调用这个函数  console.log('readyState:', xhr.readyState);  // 当请求完成并且状态码为200时  if (xhr.readyState === 4 && xhr.status === 200) {  // 响应成功，处理响应数据  console.log('Response:', xhr.responseText);  // 还可以访问其他响应属性，如 xhr.responseXML, xhr.statusText 等  } else if (xhr.readyState === 4) {  // 请求完成，但状态码不是200  console.error('Request failed.  Returned status of ' + xhr.status);  }  
};  // 设置onload事件处理器（当请求成功完成时调用）  
xhr.onload = function() {  console.log('Request loaded successfully.');  // 可以再次访问响应数据，如 xhr.responseText  
};  // 设置onerror事件处理器（当请求发生错误时调用）  
xhr.onerror = function() {  console.error('An error occurred during the request.');  
};  // 设置ontimeout事件处理器（当请求超时时调用）  
xhr.ontimeout = function() {  console.error('The request timed out.');  
};  // 设置请求超时时间（单位：毫秒）  
// xhr.timeout = 3000; // 设置超时为3秒  // 发送请求  
xhr.send();  // 还可以调用其他方法，如：  
// xhr.abort(); // 取消请求  // 访问其他属性，如：  
// console.log('Response URL:', xhr.responseURL);  
// console.log('Response type:', xhr.responseType);  
// console.log('Request method:', xhr.method);  
// console.log('Request URL:', xhr.url);

Ajax可以发起的不同请求

GET请求
javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL  
var url = 'https://api.example.com/data?param1=value1&param2=value2';// post请求的请求地址:var url = 'https://api.example.com/data';
// post请求的参数:var data = 'param1=value1&param2=value2'; // 或者使用 FormData, JSON 等格式// 设置请求完成时的回调函数  
xhr.onreadystatechange = function() {  // 检查请求是否完成  if (xhr.readyState === XMLHttpRequest.DONE) {  // 检查请求是否成功  if (xhr.status === 200) {  // 请求成功，处理响应数据  console.log(xhr.responseText);  } else {  // 请求失败，输出错误信息  console.error('请求失败: ' + xhr.status);  }  }  
};  // 打开连接，设置请求方法、URL和是否异步处理  
xhr.open('GET', url, true);  // post请求打开连接，设置请求方法、URL和是否异步处理xhr.open('POST', url, true);  // 发送请求  
xhr.send();// post请求发送请求xhr.send(data);
POST请求
javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL  
var url = 'https://api.example.com/data';// 请求的参数
var data = 'param1=value1&param2=value2'; // 或者使用 FormData, JSON 等格式// 设置请求完成时的回调函数  
xhr.onreadystatechange = function() {  // 检查请求是否完成  if (xhr.readyState === XMLHttpRequest.DONE) {  // 检查请求是否成功  if (xhr.status === 200) {  // 请求成功，处理响应数据  console.log(xhr.responseText);  } else {  // 请求失败，输出错误信息  console.error('请求失败: ' + xhr.status);  }  }  
};  // 打开连接，设置请求方法、URL和是否异步处理  
xhr.open('POST', url, true);// 发送请求  
xhr.send(data);
DELETE请求
javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL  
var url = 'https://api.example.com/data/123'; // 假设这是要删除的资源的URL   // 设置请求完成时的回调函数
xhr.onreadystatechange = function() {  if (xhr.readyState === 4) {  if (xhr.status === 200) {  console.log('DELETE request successful.');  } else {  console.error('DELETE request failed. Status:', xhr.status);  }  }  
};  // 打开连接，设置请求方法、URL和是否异步处理 
xhr.open('DELETE', url, true); // 发送请求
xhr.send(); // DELETE请求通常不需要发送数据体
PUT请求
javascript">// 创建一个新的XMLHttpRequest对象  
var xhr = new XMLHttpRequest();  // 定义请求的URL 
var url = 'https://api.example.com/data/123'; // 假设这是要更新的资源的URL  // 请求的参数
var data = JSON.stringify({ name: 'New Name', value: 'New Value' }); // 要发送的数据  // 设置请求完成时的回调函数
xhr.onreadystatechange = function() {  if (xhr.readyState === 4) {  if (xhr.status === 200) {  console.log('PUT request successful.');  } else {  console.error('PUT request failed. Status:', xhr.status);  }  }  
};  // 打开连接，设置请求方法、URL和是否异步处理 
xhr.open('PUT', url, true);  // 发送请求
xhr.send(data); // 发送数据体

其它请求如HEAD、OPTIONS、PATCH 等，这里就不再举例了。

jQuery封装后的写法

相关链接：

JQuery-CSDN博客


http://www.ppmy.cn/devtools/18509.html

相关文章

代码随想录算法训练营DAY38|C++动态规划Part.1|动态规划理论基础、509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

代码随想录算法训练营DAY38|C++动态规划Part.1|动态规划理论基础、509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

文章目录 动态规划理论基础什么是动态规划动态规划的解题步骤DP数组以及下标的含义递推公式DP数组初始化DP数组遍历顺序打印DP数组动态规划五部曲 动态规划应该如何debug 509.斐波那契数什么是斐波那契数列动态规划五部曲确定dp数组下标以及含义确定递推公式dp数组如何初始化确…
阅读更多...
定时重启指定的软件

定时重启指定的软件

做一个简单的控制台程序, 让他在指定的时间, 关闭指定的软件(的进程), 关闭后再打开这个软件 ①创建控制台程序, 主要代码: using System.Diagnostics;namespace AutomaticRestart {public class Program{public static string ProcessNames Convert.ToString(CustomConfigMa…
阅读更多...
DRF JWT认证进阶

DRF JWT认证进阶

JWT认证进阶 【0】准备工作 （1）模型准备 模型准备（继承django的auth_user表） from django.db import models from django.contrib.auth.models import AbstractUserclass UserInfo(AbstractUser):mobile models.CharField(ma…
阅读更多...
微服务之分布式理论概述

微服务之分布式理论概述

一、分布式技术相关的理论 CAP理论 CAP定理(CAP theorem)，⼜被称作布鲁尔定理(Eric Brewer)，1998年第⼀次提出. 最初提出是指分布式数据存储不可能同时提供以下三种保证中的两种以上: (1) ⼀致性(Consistency): 每次读取收到的信息都是最新的; (2) …
阅读更多...
(MSFT.O)微软2024财年Q3营收619亿美元

(MSFT.O)微软2024财年Q3营收619亿美元

在科技的浩渺宇宙中，一颗璀璨星辰再度闪耀其光芒——(MSFT.O)微软公司于2024财政年度第三季展现出惊人的财务表现，实现总营业收入达到令人咋舌的6190亿美元。这一辉煌成就不仅突显了微软作为全球技术领导者之一的地位，更引发了业界内外对这家…
阅读更多...
学习 Rust 的第十二天：如何使用向量

学习 Rust 的第十二天：如何使用向量

大家好， 今天我们来看看计算机科学中的一种基本数据结构，即向量。向量在 Rust 中扮演着至关重要的角色，它在各种编程任务中都发挥着重要作用。像 Rust 这样的系统编程语言以其对安全性和性能的强调而闻名，因此向量提供了一些强大…
阅读更多...
想要提升爬虫效率，该如何调整动态IP切换时间？

想要提升爬虫效率，该如何调整动态IP切换时间？

在进行网络爬虫操作时，动态代理IP的使用是常见的策略之一，用于隐藏爬虫的真实身份和规避目标网站的封锁。然而，一个常见的问题是：在做爬虫时，动态代理IP切换频率到底是越快越好呢？本文将从不同角度探讨这个…
阅读更多...
ZooKeeper集群的搭建

ZooKeeper集群的搭建

ZooKeeper集群的搭建 将master节点的/data目录下的ZooKeeper安装包解压到/opt/software目录下 tar -zxvf apache-zookeeper-3.6.3-bin.tar.gz -C /opt/software/在master节点切换至ZooKeeper安装目录的conf目录下，将zoo_sample.cfg重命名为zoo.cfg，并…
阅读更多...
最新文章

Copyright @ 2022~2023