HelloWorld
登录

Ajax异步请求

Stella981

2021-10-11

1353 0 0
Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

　　简而言之：一项通过js技术发送异步请求 的技术。

Ajax技术的核心是XMLHttpRequest。Ajax就是通过XMLHttpRequest对象来发送异步的请求。

1.js原生Ajax的开发步骤

  1. 创建Ajax引擎对象--XMLHttpRequest对象；

  2. 为XMLHttpRequest对象绑定监听（监听服务器，将数据响应给引擎）；

  3. 绑定提交地址；

  4. 发送请求；

  5. 接收响应数据；

2.js原生的Ajax代码实现

【案例】js原生的Ajax演示

【需求】

  1. 点击页面按钮发送请求到后台Servlet；

  2. 后台Servlet接收数据后，给出响应；

  3. 页面接收响应数据；

demo1.html

1<!--demo1.html-->
2
3<html>
4  <head>
5    <title></title>
6  </head>
7  <body>
8        <button id="btn" onclick="sendAjax();">点击后，发送Ajax请求</button>
9  </body>
10<script>
11    function sendAjax() {
12        //js原生的Ajax实现
13
14        //1.创建XMLHttpRequest对象
15        var xhr = new XMLHttpRequest();
16
17        //2.给XMLHttpRequest对象绑定监听
18        xhr.onreadystatechange = function () {
19            if(xhr.readyState == 4 && xhr.status == 200) {
20                //5.接收响应
21                alert(xhr.responseText);
22            }
23        }
24        //3.绑定提交地址
25        /**
26         * GET:请求方式；
27         * url：请求地址
28         * flag： true--异步请求，false--同步请求
29         */
30        xhr.open("GET", "/ajaxServlet", true);
31        //4.发送请求
32        xhr.send();
33    }
34</script>
35</html>

Servlet代码

1import javax.servlet.ServletException;
2import javax.servlet.annotation.WebServlet;
3import javax.servlet.http.HttpServlet;
4import javax.servlet.http.HttpServletRequest;
5import javax.servlet.http.HttpServletResponse;
6import java.io.IOException;
7
8
9@WebServlet(name = "AjaxDemo", urlPatterns = "/ajaxServlet")
10public class AjaxDemo extends HttpServlet {
11
12    /**
13     * 接收ajax请求
14     */
15    @Override
16    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
17        response.setContentType("text/html;charset=utf-8");
18        response.getWriter().println("传智播客");
19    }
20}

jQuery的Ajax

js原生的Ajax虽然能够向后台发送请求，但是太过繁琐。jQuery对原生的Ajax方法进行了封装，下面是开发中使用的比较多的3种jQuery的Ajax实现。

【注意】以上3种方法都是基于jQuery实现的，所以在使用之前必须先导入jquery的类库。

1、GET请求

1.1、GET请求方式概述

​ 通过远程HTTP GET请求发送请求。这是一个简单的GET请求，以取代复杂的$.ajax。请求成功时可调用回调函数。如需复杂的ajax请求参数设置，请使用$.ajax 。

1.2、GET请求的语法格式

$.get(url,[data],[callback],[type])

其中，参数说明如下：

参数

说明

url

请求地址

data

发送给服务器端的请求参数，格式：<br />方式一：key=value&key=value<br />方式二：{key:value,key:value...}

callback

回调函数：当请求成功后触发的函数

type

返回参数类型：取值可以是xml, html, script, json, text, _defaul等

1.3、GET请求案例

【案例】GET请求案例

【需求】

  1. 点击按钮后，数据"name='张三'，age=18"发送到后台服务器；

  2. 后台接收到数据后，响应"OK"；

demo2.html

1<!--demo2.html-->
2<html>
3<head>
4    <title>Title</title>
5    <script src="js/jquery-3.3.1.js"></script>
6</head>
7<body>
8<button onclick="ajaxGetFn();">send</button>
9</body>
10<script>
11    //按钮单击事件
12    function ajaxGetFn() {
13
14        //Ajax的GET请求：
15        //方式一：key=value&key=value形式传值
16        // $.get("/getDemo","name='张三'&age=18",function (res) {
17        //     //处理响应数据
18        //     alert(res);
19        // },"text");
20
21        //方式二：{key:value,key:value}形式传值
22        $.get("/getDemo",{"name":"张三","age":18},function (res) {
23            //处理响应数据
24            alert(res);
25        },"text");
26
27    }
28</script>
29</html>

servlet代码

1import javax.servlet.ServletException;
2import javax.servlet.annotation.WebServlet;
3import javax.servlet.http.HttpServlet;
4import javax.servlet.http.HttpServletRequest;
5import javax.servlet.http.HttpServletResponse;
6import java.io.IOException;
7
8@WebServlet(name = "GetDemoServlet", urlPatterns = "/getDemo")
9public class GetDemoServlet extends HttpServlet {
10    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
11        //处理post请求和响应乱码问题
12        response.setCharacterEncoding("utf-8");
13        response.setContentType("text/html;charset=utf-8");
14        doGet(request,response);
15    }
16
17    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18            //获取请求参数
19        String name = request.getParameter("name");
20        String age = request.getParameter("age");
21        response.setContentType("text/html; charset=utf-8");
22        response.getWriter().print("ok!  name="+name+"; age="+age);
23    }
24}

2、POST请求

2.1、POST请求方式概述

​ 通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。

2.2、POST请求的语法格式

$.post(url, [data], [callback], [type])其中，参数说明如下：

参数

说明

url

请求的服务器端url地址

data

发送给服务器端的请求参数，格式可以是key=value，也可以是js对象

callback

当请求成功后的回调函数，可以在函数体中编写我们的逻辑代码

type

预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

2.3、POST请求案例

1<%@ page contentType="text/html;charset=UTF-8" language="java" %>
2<html>
3<head>
4    <title>Title</title>
5    <script src="js/jquery-3.3.1.js"></script>
6</head>
7<body>
8
9    <button onclick="ajaxPostFn();"> Ajax的post请求，发送数据到后台</button>
10</body>
11
12    <script>
13        //按钮单击事件
14        function ajaxPostFn(){
15
16            $.post("/postDemo",{"name":"李四","age":13},function(res){
17                alert(res)
18            });
19
20        }
21    </script>
22</html>
23
24import javax.servlet.ServletException;
25import javax.servlet.annotation.WebServlet;
26import javax.servlet.http.HttpServlet;
27import javax.servlet.http.HttpServletRequest;
28import javax.servlet.http.HttpServletResponse;
29import java.io.IOException;
30
31
32@WebServlet(name = "PostDemoServlet", urlPatterns = "/postDemo")
33public class PostDemoServlet extends HttpServlet {
34
35    @Override
36    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
37        //获取请求参数
38        String name = request.getParameter("name");
39        String age = request.getParameter("age");
40        response.setContentType("text/html;charset=utf-8");
41        response.getWriter().println("ok! name="+name+";age="+age);
42
43    }
44
45
46    @Override
47    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
48        //处理post请求和响应乱码问题
49        request.setCharacterEncoding("utf-8");
50        response.setContentType("text/html;charset=utf-8");
51        doGet(request, response);
52    }
53}

3、Ajax请求

3.1 Ajax请求概述

​ 通过 HTTP 请求加载远程数据。jQuery 底层 A JAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

3.2 A JAX请求方式语法

$.ajax([settings])其中，settings是一个js字面量形式的对象，格式是{name:value,name:value... ...}，常用的name属性名如下：

1<%@ page contentType="text/html;charset=UTF-8" language="java" %>
2<html>
3<head>
4    <title>Title</title>
5    <script src="js/jquery-3.3.1.js"></script>
6</head>
7<body>
8    <button onclick="ajaxDemoFn()">Ajax请求</button>
9</body>
10    <script>
11        /*
12        * 绑定事件
13        * */
14        function  ajaxDemoFn() {
15            $.ajax({
16                url:"/ajaxDemo",
17                data:{"name":"哈哈哈","age":4},
18                async:true,
19                type:"GET",
20                dataType:"text",
21                success:function (succRes) {
22                    alert(succRes);
23                },
24                error:function (errorRes) {
25                    alert("出现异常了")
26                }
27            });
28        }
29    </script>
30</html>
31
32package com.heima.ajax;
33
34import javax.servlet.ServletException;
35import javax.servlet.annotation.WebServlet;
36import javax.servlet.http.HttpServlet;
37import javax.servlet.http.HttpServletRequest;
38import javax.servlet.http.HttpServletResponse;
39import java.io.IOException;
40
41/**
42 * @author buguniao
43 * @desc
44 * @date 2018-07-02:16:40
45 * @copy 本项目版权归java31期所有，未经许可不得私自复制，否则，要承当法律责任
46 */
47@WebServlet(name = "AjaxDemo", urlPatterns = "/ajaxDemo")
48public class AjaxDemo extends HttpServlet {
49
50    /**
51     * 接收ajax请求
52     */
53    @Override
54    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
55        //获取请求参数
56        String name = request.getParameter("name");
57        String age = request.getParameter("age");
58        response.setContentType("text/html;charset=utf-8");
59        response.getWriter().println("ok! name="+name+";age="+age);
60    }
61
62
63    @Override
64    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
65        //处理post请求和响应乱码问题
66        request.setCharacterEncoding("utf-8");
67        response.setContentType("text/html;charset=utf-8");
68        doGet(request, response);
69    }
70}
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java将前端的json数组字符串转换为列表

记录下在前端通过ajax提交了一个json数组的字符串，在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang