Ajax——同步请求与异步请求

浏览器和服务器之间数据传输方式

同步方式

异步方式

两种方式有什么不同？

同步请求，服务器响应时，页面整体刷新

异步请求，服务器响应时，页面局部刷新

异步请求有什么优点？

异步请求可以提高用户的体验性

异步请求应用场景有哪些？

a:用户名检测

b:搜索的自动补全

c:页面的局部刷新

原生的ajax编程

什么是Ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax有什么用？

ajax专门用于浏览器和服务器之间的异步请求机制

Ajax编程

原生的ajax编程(了解)

使用jquery框架进行编程(重点)

(1)传统的程序运行原理

用户发送请求，服务器接受请求，处理后返回数据，浏览器接受响应数据，进行显示数据，这个时间就会有处理和接受之间的空闲，导致用户的等待时间

(2) Aajx的程序运行原理是：用户发送请求，到Ajax引擎处理后，发送给服务器接受请求，处理后返回数据Ajax，浏览器接受响应数据，进行显示数据，在者期间浏览器可以一直和Ajax进行交流，减少处理时间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UV95p88C-1600397507993)(C:\Users\Carlos\AppData\Roaming\Typora\typora-user-images\image-20200918103752418.png)]

##原生Ajax代码案例如下：

ajax_Test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.js"></script><script type="application/javascript">//            原生的ajax开发://            1）创建Ajax引擎对象//            2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）//            3）绑定提交地址//            4）发送请求//            5）接受响应数据//function  clickFn() {//1）创建Ajax引擎对象var xmlHttp = new XMLHttpRequest();//2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）xmlHttp.onreadystatechange = function (ev) {//如果state值是4，说明收到响应数据//如果状态码是200.说明服务器正常响应if(xmlHttp.readyState == 4 && xmlHttp.status == 200){// 5）接受响应数据//获取响应数据alert(xmlHttp.responseText); //response.getWriter().write("hello")}}//3）绑定提交地址//参1：表示请求方式// 参2：表示服务器的资源访问路径，不用加项目名,// 参3：表示是否异步，true是异步xmlHttp.open("get","s1",true);//4)发送请求xmlHttp.send();}</script>
</head>
<body><!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
<input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>

AjaxServlet:

package com.lbl.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/s1")
public class AjaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("收到了异步请求");response.getWriter().write("helloworld");}
}

运行效果：

原生Ajax编程已经不用了，代码量大，使用不方便，封装成函数，直接调用

下一篇，讲写jQuery框架的ajax函数

Ajax——同步请求与异步请求相关推荐

Servlet学习DAY_02:重定向/ 文件上传/ Cookie和Session/ 导入一个工程 / 配置欢迎页面 / 同步请求和异步请求/JSON和AJax介绍 /过滤器
重定向重定向是服务器告诉客户端往指定的路径再次发出请求的指令执行过程: 当服务器执行重定向方法时会给客户端返回302状态码和一个请求路径,浏览器接收到302后会立即往指定的路径再次发出请求 res ...
同步请求和ajax请求,ajax 同步请求和异步请求的差异分析
ajax 同步请求和异步请求的差异分析发布于 2016-12-27 08:14:26 | 53 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript ...
ajax同步请求与异步请求
在前后台请求数据交互的时候,我们经常用到ajax来进行数据的请求与返回,ajax请求的async字段是boolean类型,用来标识ajax请求是同步请求或者异步请求.async默认为true,异步请求 ...
ajax同步请求和异步请求
ajax同步请求和异步请求前序什么是同步请求? 什么是异步请求? 比较同步和异步请求前序最近好长时间没写博客了,主要由于前一段时间出差,没啥心思写,今天开始重新继续.进入主题,ajax的同步请 ...
第106天：Ajax中同步请求和异步请求
同步请求和异步请求的区别 1.同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的.信息错误又要重新 ...
Http中的同步请求和异步请求
最近在上springmvc的JSON数据交换的时候,老师下课提了一个课后问题:什么是异步请求?什么是同步请求?我想大部分同学听到这个问题的时候应该和我一样不知所云.现在,给大家分享一篇关于同步请求和异 ...
同步请求和异步请求的区别
同步请求和异步请求的区别先解释一下同步和异步的概念同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据 ...
什么是同步请求和异步请求？
一.同步.异步请求浏览器发送请求给服务器,其有同步请求和异步请求两种方式. 1同步请求什么叫同步请求呢? 就是在发送一个请求之后,需要等待服务器响应返回,才能够发送下一个请求. 之前学的请求是通过 ...
java同步异步区别_同步请求和异步请求的区别
同步请求和异步请求的区别先解释一下同步和异步的概念同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

Ajax——同步请求与异步请求

Ajax——同步请求与异步请求

原生的ajax编程

下一篇，讲写jQuery框架的ajax函数

Ajax——同步请求与异步请求相关推荐

最新文章

热门文章