第106天:Ajax中同步请求和异步请求

简介: 同步请求和异步请求的区别1、同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!2、异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。

同步请求和异步请求的区别

1、同步是指发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

2、异步是指发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式

当用户填写完一条信息后,该信息会自动向服务器提交,然后服务器响应客户端,在此过程中,用户依然在填写表格的信息,即向服务器请求多次,节省了用户的时间,提高了用户的体验。

3、同步和异步的区别

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入

(缺少对象:XMLhttpRequest)
这时候如果有错误,只能再次发送请求,再次等待

异步请求:

比如当你填写邮箱地址的时候,页面当时就把邮箱地址发送到了服务器(也就是页面发送了一个请求),服务器做处理和响应,得到你的邮箱地址填写重复了,把响应结果发给页面,在这个过程中你仍然可以填写其他内容,这时候服务器会提示你有重复的邮箱地址,在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红,并没有重新刷你的页面,所有的填写错误会实时的显示出来,你也会实时的更正。这个过程中,你会有整个页面的刷新,也不会有整个页面的提交和等待,最后提交,一切都会搞定的

总结:页面上的操作和服务器端的操作互相之间不会造成阻塞

====建立异步请求过程的4个步骤:============

a:new一个XHR对象

b:调用open方法

c:send一些数据

d:对过程进行监听,来知道服务器是不是正确地做出了响应,接着可以做一些事情

相关文章
|
7月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
67 2
|
7月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
1月前
|
XML 前端开发 JavaScript
|
1天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
15 0
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
72 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
42 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
94 4
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
131 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
63 10
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
37 7
React技术栈-react使用的Ajax请求库用户搜索案例