ajax教程

news2024/10/11 10:16:15

文章目录

  • 一、原生ajax
    • 1、AJAX 简介
    • 2、特点
      • 1）优点
      • 2）缺点
  • 二、http协议
    • 1、概念
    • 2、Cookie和Session机制
      • 1）Cookie
      • 2）Session
      • 3）报文
  • 二、请求头
    • 1、概念
    • 2、常见请求头：
    • 3、Content-Type
  • 三、AJAX使用
    • 1、详细操作
    • 2、IE缓存问题
    • 3、请求超时与网络异常
    • 4、取消请求/重复请求问题
  • 四、axios发送ajax请求
    • 1、get/post
    • 2、通用方式
  • 五、fetch函数发送ajax
  • 六、跨域
    • 1、同源策略
    • 2、解决跨域——JSONP
    • 3、CORS

一、原生ajax

1、AJAX 简介

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

2、特点

1）优点

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

2）缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友好（搜索引擎优化）（爬虫爬不到）

二、http协议

1、概念

  • HTTP(hypertext transport protocol)协议「超文本传输协议」协议详细规定了浏览器和万维网服务器之间互相通信的规则。
  • 它是Web中最常用的协议之一，用于在Web浏览器和Web服务器之间传输数据。HTTP基于客户端-服务器模型，客户端发送HTTP请求，服务器响应HTTP响应。
  • HTTP协议采用无状态的方式，即每个请求都是独立的，服务器不会记住之前的请求。为了解决这个问题，引入了Cookie和Session等机制来维持状态。
  • HTTP协议采用明文传输，安全性较低，为了加强安全性，可以使用HTTPS（HTTP Secure）协议，通过SSL/TLS加密来保护数据传输的安全性。
  • HTTP协议定义了很多不同的请求方法（GET、POST、PUT、DELETE等）以及状态码（200、404、500等），用于描述请求的目的和服务器处理请求的结果。

2、Cookie和Session机制

都是用来在Web应用程序中维持用户状态的方式，使得服务器可以识别和区分不同的用户。

1）Cookie

  • Cookie是服务器发送给客户端的小型文本文件，存储在用户的计算机上。
  • Cookie通常包含了一些标识用户的信息，例如用户ID、会话ID等。
  • 当用户访问网站时，浏览器会将相应的Cookie信息发送给服务器，以便服务器识别用户。
  • Cookie可以设置过期时间，可以是会话性的（浏览器关闭后失效）或是持久性的（在指定时间后失效）。

2）Session

  • Session是在服务器端保存用户状态的机制，通常使用Session ID来识别不同的用户会话。
  • 当用户第一次访问网站时，服务器会为其创建一个唯一的Session ID，并将其存储在服务器上。
  • 每次用户请求时，服务器会通过Session ID来识别用户，并为用户保存状态信息。
  • Session通常会在一段时间内保持活跃，一般情况下会在用户关闭浏览器或一定时间后失效。

Cookie和Session机制在Web开发中经常被同时使用，Cookie通常用于存储少量的用户信息或标识，而Session则用于存储更多的用户状态信息。它们都是为了实现用户认证、保持用户登录状态、跟踪用户行为等功能而设计的。

3）报文

  1. 请求报文
    在HTTP协议中，请求报文是客户端（例如Web浏览器）发送给服务器的数据格式，用于请求特定资源的内容。请求报文通常包含了请求行、请求头和请求体三个部分。
    在这里插入图片描述
    通过请求报文，客户端可以向服务器发起不同类型的HTTP请求，如获取资源（GET请求）、提交表单数据（POST请求）、更新资源（PUT请求）等。服务器收到请求报文后，根据其中的信息执行相应的操作，并返回对应的响应报文给客户端。
  2. 响应报文
    响应报文是服务器发送给客户端（例如Web浏览器）的数据格式，用于响应客户端发起的请求并返回请求的结果。响应报文通常包含了状态行、响应头和响应体三个部分。
    在这里插入图片描述
    通过响应报文，服务器将处理结果返回给客户端，客户端根据响应报文中的信息进行处理，如显示网页内容、处理数据、下载文件等。响应报文中的状态码是客户端了解服务器处理结果的重要指标，常见的状态码包括200（请求成功）、404（未找到资源）、500（服务器内部错误）等。

二、请求头

1、概念

  • 在HTTP（Hypertext Transfer Protocol，超文本传输协议）中，请求头（Request Header）是客户端（例如Web浏览器）发送给服务器的一部分数据，用于描述请求的信息和附加信息。请求头通常包含了关于请求的各种元数据和参数，帮助服务器理解和处理客户端发送的请求。
  • 服务器在接收到请求头后，可以根据请求头中的信息进行相应的处理和响应。请求头是HTTP通信中重要的组成部分，它帮助客户端和服务器之间传递各种信息，实现数据交互和资源请求。

2、常见请求头：

  1. Accept：指定客户端能够接受的内容类型
  2. Accept-Encoding：指定客户端能够接受的内容编码方式
  3. Accept-Language：指定客户端能够接受的自然语言
  4. Cache-Control：控制缓存的行为
  5. Connection：指定连接是否保持持久连接
  6. Content-Length：请求体的长度
  7. Content-Type：请求体的数据类型
  8. Cookie：包含客户端的Cookie信息
  9. Host：指定请求的目标主机
  10. User-Agent：客户端的用户代理字符串
  11. Referer：指定请求的来源页面URL
  12. Authorization：包含客户端认证信息
    请求头中的Content-Type字段用于指示请求或响应中实体主体的媒体类型（Media Type），也就是实体主体的数据格式。Content-Type字段告诉服务器或客户端如何解析请求或响应的主体内容。

3、Content-Type

常见的Content-Type值包括：

  • text/plain：纯文本格式
  • text/html：HTML格式
  • application/json：JSON格式
  • application/xml：XML格式
  • application/x-www-form-urlencoded：表单数据格式
  • multipart/form-data：多部分表单数据格式

通过Content-Type字段，服务器可以正确解析请求的数据格式，客户端也可以正确解析服务器返回的数据格式，确保数据能够被正确处理和显示。

在发送POST请求时，通常需要设置Content-Type字段来指定请求主体的数据格式，以便服务器正确解析数据。在处理响应时，客户端也会根据响应头中的Content-Type字段来正确解析服务器返回的数据格式。

三、AJAX使用

1、详细操作

//获取button元素
const btn = document.getElementByTagName('button')[0]
//绑定事件
btn.onclick = function(){
	 1.创建对象
	 const xhr = new XMLHttpRequest()
	 	（1）设置响应体类型
	 		xhr.responseType = 'json'
	 2.初始化，设置请求的方法和url
	 xhr.open('GET','http://127.0.0.1:8000/server')
	 	（1）若是get请求，通过如下传递参数
	 		'http://127.0.0.1:8000/server?a=100&b=200&c=300'
	 	（2）设置请求头
	 		xhr.setRequestHeader(头名，头值)
	 		eg.xhr.setRequestHeader('Content-type'，'application/x-www-form-urlencoded') //详细介绍见下面
	 	
	 3.发送
	 xhr.send()
	 	若是post请求，通过如下传递参数
	 	xhr.send(a=100&b=200&c=300)  //这里请求体格式很灵活。看后端怎么处理
	 4.事件绑定，处理服务端返回的结果
		 on : when 当...时候
		 readystate：是xhr对象中的属性，表示状态0 1 2 3 4
			 0：未初始化，最开始状态
			 1：open调用完毕
			 2：send调用完毕
			 3：服务端返回部分结果
			 4：服务端返回所有结果
		 change：改变的时候触发，因此会触发四次
	 xhr.onreadystatechange = function(){
	 	//判断
	 	if(xhr.readystate == 4){  //返回所有结果
	 		//判断响应状态码,状态码2开头都表示成功，2xx
	 		if(xhr.status>=200 && xhr.status<300){
	 			//处理结果  行 头 空行 体
	 			1.响应行：
		 			xhr.status保存响应行
		 			xhr.statusText保存响应的状态字符串 OK等
		 			xhr.getAllResponseHeaders()保存所有响应头
		 			xhr.response保存响应体（内容）
	 			2.处理返回的JSON文件
		 			//手动转换
		 			let data = JSON.parse(xhr.response)
		 			//自动转换，在xhr.open前面设置响应体类型
		 			
	 		}
	 	}
	 }
}

2、IE缓存问题

IE浏览器会对AJAX的请求结果进行缓存，若频繁发送，浏览器会认为你与之前发送的请求是一致的，则下一次从本地缓存中拿数据，返回结果就不是新数据，如果那一段事件发送请求的数据改变了，则缓存的数据就不是请求的数据，会出现问题

btn.onclick = function(){
	 const xhr = new XMLHttpRequest()
	 //解决IE缓存问题，每次发送的请求随事件改变，则浏览器认为前后的请求是不一样的，就不会从缓存拿数据
	 xhr.open('GET','http://127.0.0.1:8000?t='+Date.now)  
	 xhr.send()
	 xhr.onreadystatechange = function(){
	 	if(xhr.readystate == 4){ 
	 		if(xhr.status>=200 && xhr.status<300){
	 		
	 		}
	 	}
	 }
}

3、请求超时与网络异常

btn.onclick = function(){
	 const xhr = new XMLHttpRequest()
	//超时设置2s
	xhr.timeout = 2000s 
	//超时回调，出问题之后取消请求
	xhr.onetimeout = function(){
		alert('网络异常，请稍后重试')
	}
	//网络异常，出问题之后取消请求
	xhr.onerror= function(){
		alert('你的网络似乎出了问题')
	}
	 xhr.open('GET','http://127.0.0.1:8000?t='+Date.now)  
	 xhr.send()
}

4、取消请求/重复请求问题

  • 取消：可以手动取消请求。xhr.absort() //取消请求
    重复请求问题：如果用户在短时间内一直点击发送请求，那么响应压力就会很大，因此需要防抖动（点击后取消前一个请求）
let flag = false  //是否正在发送请求
const xhr = null
btn.onclick = function(){
	if(flag) xhr.absort //如果正在发送，则取消该请求，创建一个新的请求
	xhr = new XMLHttpRequest()
	 flag=true
	 xhr.open('GET','http://127.0.0.1:8000?t='+Date.now)  
	 xhr.send()
	 xhr.onreadystatechange = function(){
	 	if(xhr.readystate == 4){ 
	 		//修改标识变量
	 		flag = false 
	 	}
	 }
	
}

四、axios发送ajax请求

  • Axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中。它可以让我们更容易地发送异步请求到服务器并处理响应数据。
  • Promise是一种用于处理异步操作的对象，它表示一个异步操作的最终完成（或失败），以及其结果值。
    详细介绍见官网

1、get/post

axios.default.baseURL = 'http://127.0.0.1:8000'
btn.onclick = function(){
	axios.get('/server',{        //利用baseURL对路径进行简化
		//url参数
		params:{
			id:12345
		},
		//请求头信息
		headers:{
			'Content-type':'application/x-www-form-urlencoded'
		},
	}).then(value=>{
		//value存储各种信息
	})
	axios.post('/server',{       //第二个参数作为请求体
			username:'admin'
	},{        //利用baseURL对路径进行简化
		//url参数
		params:{
			id:12345
		},
		//请求头信息
		headers:{
			'Content-type':'application/x-www-form-urlencoded'
		}
		
	}).then(value=>{
		
	})
}

2、通用方式

btn.onclick = function(){
	axios({
		//请求方法
		method:"POST",
		//url
		url:'/server',
		/url参数
		params:{
			id:12345
		},
		//请求头信息
		headers:{
			'Content-type':'application/x-www-form-urlencoded'
		},
		//请求体
		data:{
			username:"1"
		}
	}).then(response=>{
			//response存储返回信息		
	})
}

五、fetch函数发送ajax

fetch()函数是全局对象，直接调用，返回promise对象

btn.onclick = function(){
	fetch('/server?age=18',{
		//请求方法
		method:"POST",
		//请求头信息
		headers:{
			'Content-type':'application/x-www-form-urlencoded'
		},
		//请求体
		body:{
			username:"1"
		}
	}).then(response=>{
		return response.text()
	}).then((response)=>{  //需要两层then
		
	})
}

六、跨域

1、同源策略

  • 同源策略是一种浏览器的安全策略，用于限制一个网页文档或脚本如何与另一个来源的资源进行交互。在同源策略下，不同源的网页（指协议、域名、端口号有任何一个不同）之间的脚本和数据通信受到限制，这有助于防止恶意网站利用用户的身份信息和敏感数据。
  • 一句话来说，就是网页的url和ajax请求服务端的url必须协议，域名，端口号完全相同
  • 同源策略是浏览器的一项重要安全功能，它有助于保护用户的隐私和安全。
  • 违背同源策略就是跨域
btn.onclick = function(){
	 const xhr = new XMLHttpRequest()
	 xhr.open('GET','./server')   //满足同源策略，url可以简写  
	 xhr.send()
}

2、解决跨域——JSONP

  • 介绍：JSONP(SON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get请求。
  • 开发中不常用，一是只能支持get，二是对前后端配合协作要求高。
  • 工作原理：
    在网页有一些标签天生具有跨域能力，比如:img link iframe script。
    JSONP 就是利用 script 标签的跨域能力来发送请求的。（即script的src属性引用数据时不受跨域条件限制）

3、CORS

  • CORS(Cross-0rigin Resource sharing)，跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和 post 请求。
  • 跨域资源共享标准新增了一组 HTTP 响应头，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
  • 工作原理：CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
  • 使用：主要是服务器端的设置
  • 有很多不同的请求头，每个都有不同的限制，具体看文档
//设置响应头，设置允许跨域
//*表示所有的网页都允许，也可以设置其他url
response.setHeader('Access-Control-Allow-Origin',"*")
}

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

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

相关文章

vue快速入门（三）差值表达式

vue快速入门（三）差值表达式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 插值表达式基本用法插值表达式常用公式 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…
阅读更多...
显示器and拓展坞PD底层协商

显示器and拓展坞PD底层协商

简介&#xff1a; PD显示器或者PD拓展坞方案中&#xff0c;连接显示设备的Type-C端口主要运行在DRP模式&#xff0c;在此模式下可以兼容Source&#xff08;显卡&#xff09;、Sink&#xff08;信号器&#xff09;、DRP&#xff08;手机、电脑&#xff09;模式的显示设备。 Sou…
阅读更多...
维基百科:8个提升维基百科推广效果的优化技巧-华媒舍

维基百科:8个提升维基百科推广效果的优化技巧-华媒舍

维基百科是全球最大的在线百科全书&#xff0c;致力于向用户提供高质量、可靠的知识内容。想要让自己的文章在维基百科中获得更多的曝光度和推广效果&#xff0c;并非易事。为此&#xff0c;我们整理了以下8个提升维基百科推广效果的优化技巧。 1. 确保内容符合要求 维基百科对…
阅读更多...
Quiet-STaR:让语言模型在“说话”前思考

Quiet-STaR:让语言模型在“说话”前思考

大型语言模型(llm)已经变得越来越复杂&#xff0c;能够根据各种提示和问题生成人类质量的文本。但是他们的推理能力让仍然是个问题&#xff0c;与人类不同LLM经常在推理中涉及的隐含步骤中挣扎&#xff0c;这回导致输出可能在事实上不正确或缺乏逻辑。 考虑以下场景:正在阅读一…
阅读更多...
windows下安装iteliij Idea2023.3

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…
阅读更多...
Spring Cloud微服务入门（一）

Spring Cloud微服务入门（一）

微服务的演变过程 //controller 视图交互层 前端数据处理传给service //1.DAO RequestBody userDAO String id;String type; {"id":"lcs", "type":"lcs"} //2.GET请求 findUserById&#xff1f;id1&typelcsRequestParam String …
阅读更多...
css3之3D转换transform

css3之3D转换transform

css3之3D转换 一.特点二.坐标系三.3D移动&#xff08;translate3d)1.概念2.透视&#xff08;perpective)(近大远小&#xff09;&#xff08;写在父盒子上&#xff09; 四.3D旋转&#xff08;rotate3d)1.概念2.左手准则3.呈现&#xff08;transfrom-style)&#xff08;写父级盒子…
阅读更多...
Python脚本：给TXT文件中的地铁站名添加引号

Python脚本：给TXT文件中的地铁站名添加引号

Python脚本&#xff1a;给TXT文件中的地铁站名添加引号 在日常的数据处理工作中&#xff0c;我们经常需要对文本数据进行格式化和处理。今天&#xff0c;我们就来分享一个使用Python脚本对TXT文件中的地铁站名进行处理的小技巧&#xff1a;将每行的地铁站名字加上双引号。 需求…
阅读更多...
创新指南｜贝恩的产品经理RAPID框架：解决问题的分步指南，使决策过程既高效又民主

创新指南｜贝恩的产品经理RAPID框架：解决问题的分步指南，使决策过程既高效又民主

您是否曾发现自己陷入项目的阵痛之中&#xff0c;决策混乱、角色不明确、团队成员之间的冲突不断升级&#xff1f;作为产品经理&#xff0c;驾驭这艘船穿过如此汹涌的水域可能是令人畏惧的。应对这些挑战的关键在于采用清晰、结构化的决策方法。输入贝恩的 RAPID 框架&#xff…
阅读更多...
基于8B10B的GT收发器PHY层设计（3）PHY层设计

基于8B10B的GT收发器PHY层设计（3）PHY层设计

文章目录 前言一、设计框图二、PHY层基本传输协议三、PHY_TX模块3.1、模块接口3.2、组帧状态机描述3.3、数据大小端问题3.4、字节对齐 四、PHY_RX模块4.1、模块接口4.2、大小端转换4.3、起始位4.4、结束位4.5、axis数据流恢复 五、LFSR伪随机码六、链路空闲时期处理 前言 上一…
阅读更多...
宁盾入选“2023年度中国高科技高成长企业榜”多个榜单

宁盾入选“2023年度中国高科技高成长企业榜”多个榜单

4月1日&#xff0c;由【第一新声】联合【天眼查】启动“数字未来”系列之 2023 年度中国高科技高成长企业系列榜单正式发布。宁盾入选未来独角兽企业、网络安全领域高成长企业、信创产业最佳服务商、企业数字化标杆案例 4 个榜单。 该榜单旨在发现和挖掘被资本市场关注&#xf…
阅读更多...
基于顺序表 --- 实现简易【通讯录】

基于顺序表 --- 实现简易【通讯录】

1. 多文件操作 SeqList.h //用于定义顺序表的结构&#xff0c;增删查改等函数的声明 SeqList.c //用于实现增删查改等函数 Contact.h //用于定义通讯录的结构&#xff0c;通讯录中联系人的增删查改等函数的声明 Contact.c //用于实现通讯录中增删查改等函数 Test.h //用于测试…
阅读更多...
重磅！openGauss6.0创新版本，带着新特性正式发布了！

重磅！openGauss6.0创新版本，带着新特性正式发布了！

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…
阅读更多...
最新社交相亲系统源码PHP

最新社交相亲系统源码PHP

最新社交相亲系统源码PHP 安装环境&#xff1a; php7.2 mysql 5.7 框架&#xff1a; 后端thinkphp6 前端&#xff1a;jquery layui PC 移动端响应式 线上案例&#xff1a;https://cjr.oemsun.com/ 主要页面及功能预览 首页 相亲资料详情页 红娘跟进记录 海报、一键复制分…
阅读更多...
实操：Dropzone.js实现文件上传

实操：Dropzone.js实现文件上传

&#x1f3e0;官网 点我前往 &#x1f953;依赖 <script src"https://unpkg.com/dropzone5/dist/min/dropzone.min.js"></script> <link rel"stylesheet" href"https://unpkg.com/dropzone5/dist/min/dropzone.min.css" type&…
阅读更多...
STL——vector容器基本使用与常用接口模拟实现

STL——vector容器基本使用与常用接口模拟实现

vector的介绍及使用 vector的介绍 vector是表示可变大小数组的序列容器。 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…
阅读更多...
自然语言处理NLP概述

自然语言处理NLP概述

大家好&#xff0c;自然语言处理(NLP)是计算机科学领域与人工智能领域中的一个重要方向&#xff0c;其研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。本文将从自然语言处理的本质、原理和应用三个方面&#xff0c;对其进行概述。 一、NLP的本质 NLP是一种…
阅读更多...
神经网络学习笔记10——RNN、ELMo、Transformer、GPT、BERT

神经网络学习笔记10——RNN、ELMo、Transformer、GPT、BERT

系列文章目录 参考博客1 参考博客2 文章目录 系列文章目录前言一、RNN1、简介2、模型结构3、RNN公式分析4、RNN的优缺点及优化1&#xff09;LSTM是RNN的优化结构2&#xff09;GRU是LSTM的简化结构 二、ELMo1、简介2、模型结构1&#xff09;输入2&#xff09;左右双向上下文信…
阅读更多...
【史上最细教程】 Typora+PicGo+Gitee 实现发给别人的Typora笔记也能看到图片

【史上最细教程】 Typora+PicGo+Gitee 实现发给别人的Typora笔记也能看到图片

文章目录 问题描述前提准备&#xff1a;操作步骤&#xff1a;1.Gitee新建项目作为图床、获取仓库访问密钥2.PicGo连接Gitee图床3.Typora连接PicGo 问题描述 Typora记录的笔记&#xff0c;图片保存默认在本地&#xff0c;这时候复制出来上传CSDN、或发给别人的时候图片就是空链…
阅读更多...
Qt 的发展历史、现状与启示

Qt 的发展历史、现状与启示

Qt 最早在1991年由挪威的两位程序员 Eirik Chambe-Eng 和 Haavard Nord 开发&#xff0c;他们在1994年创立 Trolltech 公司&#xff08;奇趣科技&#xff09;正式经营软件业务。Qt 的第一个公众预览版于1995年面世&#xff0c;之后在2008年被诺基亚收购&#xff1b;2011年到201…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023