• 【JavaEE】_ajax构造HTTP请求

    目录

    1. ajax简述

    2. ajax构造HTTP请求

    2.1 jquery库的引入

    2.2 ajax构造HTTP请求格式

    3. ajax构造GET请求实例

    4. ajax构造POST请求实例

    本专栏关于form表单构造HTTP请求一文中已经提到：form表单构造法只支持GET和POST，且会触发页面跳转。

    原文详情链接如下：

    【JavaEE】_form表单构造HTTP请求-CSDN博客

    为了解决这两个问题，又引出了ajax构造HTTP请求的方法：

    1. ajax简述

    1.ajax本质是用js提供的API来构造HTTP请求。

    同时对于服务器返回给客户端的响应，同样可以使用js灵活处理，给前端代码带来了更多的可操作空间；

    2. 当今网站的的主体都是通过ajax的方式进行交互的;

    3. 浏览器原生也提供了ajax的API，但并不方便实用，步骤繁琐。因此有一些第三方库封装了ajax，本专栏使用 jquery 库封装的ajax；

    2. ajax构造HTTP请求

    2.1 jquery库的引入

    可从以下链接引入jquery库：

    https://www.bootcdn.cn/jquery/

    操作如下：

    2.2 ajax构造HTTP请求格式

    1. $ 是一个jquery定义的全局变量名，可以通过这个变量调用一些方法，使用jquery中的API；

    2. $.ajax();中传递的参数是一个对象，在js中，{}表示一个对象，在{}内部使用键值对描述属性名与属性值：

    3. 对象的属性值可以是一个函数，比如可以写为：

    1.     <script>
    2.         // 此时函数名就为callback
    3.         function callback(body){
    4.  
    5.         }
    6.         $.ajax({
    7.             type: 'get',
    8.             url: 'https://www.sogou.com/abc.html',
    9.             success:callback,
    10.         });
    11.     script>

    但是这种写法并不常见，通常会使用匿名函数的形式：

    1.     <script>
    2.         $.ajax({
    3.             type: 'get',
    4.             url: 'https://www.sogou.com/abc.html',
    5.             success:function(body){
    6.                 
    7.             }
    8.         });
    9.     script>

    此处函数并不是立即返回的，而是服务器返回200这样的响应时才会执行到success，即：

    success执行时机不是程序员自己能控制的，而是在合适的时候自动被调用的，这样的函数被称为回调函数；

    常见的回调函数还有：函数指针，Comparable和Comparator，compareTo，compare函数，线程中的run方法等等；

    4. 函数的参数为body即HTTP响应的body内容，为了方便调试，通常会使用console.log对body进行打印；

    5.  此时构造的get请求没有query string，可以直接进行拼接，如：

    1.     <script>
    2.         let value1 = '1';
    3.         $.ajax({
    4.             type: 'get',
    5.             url: 'https://www.sogou.com/abc.html?' + 'key1='+value1,
    6.             success:function(body){
    7.                 console.log(body);
    8.             }
    9.         });
    10.     script>

    注意js的定义变量直接使用let进行定义，变量具体类型是根据=后面初始化的值的类型来确定的；

    3. ajax构造GET请求实例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>ajaxtitle>
    7. head>
    8. <body>
    9.     
    10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    11.     
    12.     <script>
    13.         let value1 = '1';
    14.         $.ajax({
    15.             type: 'get',
    16.             url: 'https://www.sogou.com/abc.html?' + 'key1='+value1,
    17.             success:function(body){
    18.                 console.log(body);
    19.             }
    20.         });
    21.     script>
    22. body>
    23. html>

    运行程序；

    可以使用Fiddler抓包查看请求与响应详情：

    HTTP请求：

    HTTP响应：

    4. ajax构造POST请求实例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>ajaxtitle>
    7. head>
    8. <body>
    9.     
    10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    11.     
    12.     <script>
    13.         let body = {
    14.             key1: 1,
    15.             key2: 2
    16.         };
    17.         $.ajax({
    18.             type: 'post',
    19.             contentType: "application/json",
    20.             data: JSON.stringify(body),
    21.             url: 'https://www.sogou.com/abc.html',
    22.             success:function(body){
    23.                 console.log(body);
    24.             }
    25.         });
    26.     script>
    27. body>
    28. html>

    注：1. JSON.stringfy()可以将一个js对象转成一个JSON格式的字符串，即把前文的body对象转为了JSON格式的字符串data；

    2.注意ajax构造post请求与构造get请求的不同，包括body部分的对象需转为JSON格式字符串，无需url的query string部分等等；

    3. 此例为ajax构造的POST请求发送给搜狗服务器，但并不是所有的路径都支持ajax的POST请求，此例仅用于展示ajax构造POST请求的格式。后续自行完成服务器的编写才可以实现相应的服务器配合；

  • 相关阅读:
    c++视觉检测-----角点检测
    Python编程-----并行处理应用程序
    数据结构——线性表
    【Linux】账户密码过期
    驱动——按键中断控制LED灯实验
    编译并调试第一个so动态链接库文件
    Nginx 学习（九）集群概述与LVS工作模式的配置
    Nacos技术学习与总结待续
    JavaWeb：vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦
    PADA: Example-based Prompt Learning for on-the-fly Adaptation to Unseen Domains
  • 原文地址：https://blog.csdn.net/m0_63299495/article/details/136169840