ajax教程

文章目录

  • 一、原生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',"*")
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

竞赛 Yolov安全帽佩戴检测 危险区域进入检测 - 深度学习 opencv

竞赛 Yolov安全帽佩戴检测 危险区域进入检测 - 深度学习 opencv

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; Yolov安全帽佩戴检测 危险区域进入检测 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&am…
阅读更多...
代码随想录阅读笔记-二叉树【二叉搜索树中的搜索】

代码随想录阅读笔记-二叉树【二叉搜索树中的搜索】

题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点和一个值。 你需要在BST中找到节点值等于给定值的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 NULL。 例如&#xff0c; 在上述示例中&#xff0c;如果要找的值是 5&#xff0c;但因为没有节点…
阅读更多...
Sybase ASE中的char(N)的坑以及与PostgreSQL的对比

Sybase ASE中的char(N)的坑以及与PostgreSQL的对比

1背景 昨天，一朋友向我咨询Sybase ASE中定长字符串类型的行为，说他们的客户反映，同样的char类型的数据，通过jdbc来查，Sybase库不会带空格，而PostgreSQL会带。是不是这样的？他是PostgreSQL的专业大拿，但因为他手头没有现成的Sybase ASE环境，刚好我手上有，便于一试。 …
阅读更多...
PostgreSQL 表膨胀原因和解决方案

PostgreSQL 表膨胀原因和解决方案

在 PostgreSQL 中&#xff0c;表膨胀是一个常见的问题&#xff0c;它会导致数据库性能下降&#xff0c;甚至在极端情况下会耗尽磁盘空间。了解表膨胀的原因及其解决方案&#xff0c;对于维护数据库性能和稳定性至关重要。 表膨胀的原因 MVCC (多版本并发控制) PostgreSQL 使…
阅读更多...
Kotlin：for循环的几种示例

Kotlin：for循环的几种示例

一、 打印 0 到 2 1.1 方式一&#xff1a;0 until 3 /*** 打印 0 到 2*/ fun print0To2M1(){for (inex in 0 until 3){// 不包含3print("$inex ")} }运行结果 1.2 方式二&#xff1a;inex in 0 …2 /*** 打印 0 到 2*/ fun print0To2M2(){for (inex in 0 ..2){//…
阅读更多...
A First Course in the Finite Element Method【Daryl L.】|PDF电子书

A First Course in the Finite Element Method【Daryl L.】|PDF电子书

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…
阅读更多...
MySQL-逻辑架构：逻辑架构分析、SQL执行流程、数据库缓冲池

MySQL-逻辑架构：逻辑架构分析、SQL执行流程、数据库缓冲池

逻辑架构 1. 逻辑架构剖析 1.1 第1层&#xff1a;连接层 系统&#xff08;客户端&#xff09;访问MySQL服务器前&#xff0c;做的第一件事就是建立TCP连接。 经过三次握手建立连接成功后&#xff0c;MySQL服务器对TCP传输过来的账号密码做身份认证、权限获取。 用户名或密码…
阅读更多...
【go】模板展示不同k8s命名空间的deployment

【go】模板展示不同k8s命名空间的deployment

gin模板展示k8s命名空间的资源 这里学习如何在前端单页面&#xff0c;调用后端接口展示k8s的资源 技术栈 后端 -> go -> gin -> gin模板前端 -> gin模板 -> html jsk8s -> k8s-go-client &#xff0c;基本资源(deployment等) 环境 go 1.19k8s 1.23go m…
阅读更多...
Windows程序设计课程作业-1

Windows程序设计课程作业-1

文章目录 1. 作业内容2. 设计思路分析与难点3. 代码实现3.1 接口定义3.2 工厂类实现3.3 委托和事件3.4 主函数3.5 代码运行结果 4. 代码地址5. 总结&改进思路6. 阅读参考 1. 作业内容 使用 C# 编码&#xff08;涉及类、接口、委托等关键知识点&#xff09;&#xff0c;实现…
阅读更多...
nssm 工具把asp.net core mvc变成 windows服务，使用nginx反向代理访问

nssm 工具把asp.net core mvc变成 windows服务，使用nginx反向代理访问

nssm工具的作用&#xff1a;把项目部署成Windows服务&#xff0c;可以在系统后台运行 1.创建一个asp.net core mvc的项目weblication1 asp.net core mvc项目要成为windows服务需要安装下面的nuget包 <ItemGroup><PackageReference Include"Microsoft.Extension…
阅读更多...
Python卷积网络车牌识别系统（V2.0）

Python卷积网络车牌识别系统（V2.0）

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
【随笔】Git 高级篇 -- 相对引用1（十二）

【随笔】Git 高级篇 -- 相对引用1（十二）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
工业组态 物联网组态 组态编辑器 web组态 组态插件 编辑器

工业组态 物联网组态 组态编辑器 web组态 组态插件 编辑器

体验地址&#xff1a;by组态[web组态插件] BY组态是一款非常优秀的纯前端的【web组态插件工具】&#xff0c;可无缝嵌入到vue项目&#xff0c;react项目等&#xff0c;由于是原生js开发&#xff0c;对于前端的集成没有框架的限制。同时由于BY组态只是一个插件&#xff0c;不能独…
阅读更多...
【机器学习】《机器学习算法竞赛实战》第7章用户画像

【机器学习】《机器学习算法竞赛实战》第7章用户画像

文章目录 第7章 用户画像7.1 什么是用户画像7.2 标签系统7.2.1 标签分类方式7.2.2 多渠道获取标签7.2.3 标签体系框架 7.3 用户画像数据特征7.3.1 常见的数据形式7.3.2 文本挖掘算法7.3.3 神奇的嵌入表示7.3.4 相似度计算方法 7.4 用户画像的应用7.4.1 用户分析7.4.2 精准营销7…
阅读更多...
B/S架构SaaS模式 医院云HIS系统源码，自主研发，支持电子病历4级

B/S架构SaaS模式 医院云HIS系统源码，自主研发，支持电子病历4级

B/S架构SaaS模式 医院云HIS系统源码&#xff0c;自主研发&#xff0c;支持电子病历4级 系统概述&#xff1a; 一款满足基层医院各类业务需要的云HIS系统。该系统能帮助基层医院完成日常各类业务&#xff0c;提供病患挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查…
阅读更多...
基于Java微信小程序的医院挂号小程序，附源码

基于Java微信小程序的医院挂号小程序，附源码

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…
阅读更多...
Java学习之面向对象三大特征

Java学习之面向对象三大特征

目录 继承 作用 实现 示例 instanceof 运算符 示例 要点 方法的重写(Override) 三个要点 示例 final关键字 作用 继承和组合 重载和重写的区别 Object类详解 基本特性 补充&#xff1a;IDEA部分快捷键 " "和equals()方法 示例 Super关键字 示例 …
阅读更多...
Golang实现一个聊天工具

Golang实现一个聊天工具

简介 聊天工具作为实时通讯的必要工具&#xff0c;在现代互联网世界中扮演着重要的角色。本博客将指导如何使用 Golang 构建一个简单但功能完善的聊天工具&#xff0c;利用 WebSocket 技术实现即时通讯的功能。 项目源码 点击下载 为什么选择 Golang Golang 是一种高效、简…
阅读更多...
wordpress外贸独立站模板

wordpress外贸独立站模板

wordpress外贸独立站模板 WordPress Direct Trade 外贸网站模板&#xff0c;适合做跨境电商的外贸公司官方网站使用。 https://www.waimaoyes.com/wangzhan/22.html
阅读更多...
Android操作sqlite数据库

Android操作sqlite数据库

Sqlite数一种轻量级的关系型数据库&#xff0c;android里面可以用来持久化存储一些用户数据。 一、SQLiteOpenHelper方式 SQLiteOpenHelper是原生的数据库帮助类&#xff0c;继承这个类&#xff0c;用来创建&#xff0c;更新数据库的操作 public class MySqliteOpenHelper e…
阅读更多...
最新文章

Copyright @ 2022~2023