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

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函数

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:成长之路 设计师:Amelia_0503 返回首页

打赏作者

水巷石子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值