Ajax异步请求使用方法（详细）

最新推荐文章于 2024-08-03 21:03:47 发布
最新推荐文章于 2024-08-03 21:03:47 发布
阅读量2.5w 收藏 129
点赞数 17
分类专栏： java技术分享 文章标签： ajax json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45060598/article/details/120686932
版权

1.Ajax

1.1.概念

  •  ASynchronous JavaScript And XML 异步的JavaScript 和 XML
  • 异步和同步
    • 客户端和服务器端相互通信的基础上
    • 同步
      • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
    • 异步
      • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
    • 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
    • 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
    • 提升用户的体验。

1.2.实现方式

1.2.1原生的JS实现方式

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
        
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

1.2.2 JQeury实现方式

1. $.ajax()

* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数
                data:{"username":"jack","age":23},
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接受到的响应数据的格式
            });
        } 
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

2. $.get()：发送get请求

            * 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

测试案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function  fun() {
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

3. $.post()：发送post请求

            * 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        
        //定义方法
        function  fun() {
            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

4.jQuery 使用 JSONP

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

//向服务端发送删除指令
$.getJSON("userServlet?method=delete", {id: data.id}, function (result) {
    if (result.code == 0) {
        obj.del(); //删除对应行（tr）的DOM结构
        layer.alert("删除成功", {icon: 1, title: "提示"}, function (i) {
            layer.close(i);
            layer.close(index);
        });
        table.reload('test', {
            page: {
                curr: 1
            }
        })
    }
})

对应的servlet代码：

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");

       /* //处理业务逻辑。耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/
        //2.打印username
        System.out.println(username);

        //3.响应
        response.getWriter().write("hello : " + username);


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

1.2.3 html的form表单实现ajax请求（重要）

<!--
HTML页面三种方法加载ajax请求
1.去掉form标签
2.使用input type="submit"  需要设置<form onsubmit="return false">或者input type="button"
3.使用<button>标签，需要设置type="button"
-->

//在页面加载完成后
$(function () {
    $("#btn").click(function () {
        //获取username文本输入框的值
        // let username = document.getElementById("username").value;
        // let password = document.getElementById("password").value;
        //发送ajax请求
        $.ajax({
            url: "loginAjaxServlet",
            // data: {"username": username, "password": password},
            //序列化表单数据，根据input的name属性和value属性进行序列化，key(name):value(value),序列化之后自动变成json
            data:$("#myform").serialize(),
            dataType: "JSON",
            type: "POST",
            //返回的数据dataJSON格式
            success: function (data) {
                //具体操作
                if (data.code == 0) {
                    window.location.href = "showUser.html"
                } else {
                    alert(data.msg)
                }
            }
        });
    });
});

1.2.4html页面之间传递参数（重要）

Js获取参数方法

//根据传递过来的参数name获取对应的值
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

1. var r = location.search.substr(1).match(reg);
location.search.substr(1) 用于获得 URL 的查询部分 (?后面的内容).
比如地址栏中的地址是
r[0] = “&name=QQ&” 是整个正则表达式匹配到的内容
r[1] = “&” 是正则表达式中第一个括号匹配到的内容,即 (^|&) 匹配到的内容
r[2] = “QQ” 是正则表达式中第二个括号匹配到的内容,即 ([^&]*)匹配到的内容
r[3] = “&” 是正则表达式中最后一个括号匹配到的内容即 (&|$) 匹配到的内容

测试案例：

//传值案例
window.location.href = "updateUser.html?id=" + id;

//取值页面的代码
<script src="./js/getParameter.js"></script>
</style>
<script>
    $(function () {
        let id = getParameter("id");
        })
</script>

爱笑的tiger
关注
  • 17
    点赞
  • 踩
  • 129
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax异步请求实战案例讲解
06-17
本动手实战项目介绍了如何在前端使用Ajax向后端请求数据并展示在Web页面，并且在Web页面提供了“增、删、查、改”的功能。 ? 一、融汇贯通 将Python语言和Django基础知识，以实际应用为媒介，有机组织、融汇贯通。让你的理论与实践结合起来，由知道变成会用。使用了大量的Django高级特性和Bootstrap前端框架，展示了真实的项目部署过程。 ? 二、贴近实战 本系列课程为练手项目实战：学生管理系统v3.0的开发，项目包含了如下几个内容：项目的总体介绍、当前项目的介绍，Ajax介绍和应用场景、Ajax常见的应用案例讲解、实战项目的初始化和项目准备、使用Ajax访问后台的接口并获得数据展示在web页面、在前端使用Ajax对后端进行请求完成对学生数据的增删改查。课程具有极强的实战性。 ? 三、课程亮点 在本案例中，最大的亮点在于使用了Ajax的异步请求，理解Ajax的使用场景和常见的语法规范，对Ajax理解后，为后期前后端分离的架构做了技术储备 ? 学习收获： 在学习完本系列中所有的课程后，从前端页面的实现，到后台代码的编写，再到数据库的管理，一人可以搞定一个公司网站的所有事情，
怎么使Ajax设为同步和异步
z13903931414的博客
05-21 976
Ajax（Asynchronous JavaScript and XML）最初的设计就是异步的，这意味着当发送请求时，浏览器不会等待服务器的响应就会继续执行后续的JavaScript代码。然而，有时你可能需要同步请求，即浏览器会等待服务器的响应，然后再继续执行后续的JavaScript代码。因此，如果你正在使用jQuery并且需要同步请求，你可能需要寻找其他方法或库来实现你的需求。总的来说，尽管有时可能需要同步请求，但你应该尽量避免使用它们，并尽可能利用异步请求的优势来提供更好的用户体验。
使用$.ajax实现异步请求
聚娃科技开发者博客
06-28 531
.ajax是jQuery库中用于执行异步HTTP请求的核心函数之一。它支持多种HTTP请求方式（如GET、POST等），可以自定义请求头、发送数据，并且提供了丰富的回调函数来处理请求的成功和失败情况。通过$.ajax，开发者可以在不刷新页面的情况下与服务器进行数据交换，实现动态更新网页内容的目的。
AJAX （异步的JavaScript 和 XML）
/*多学习 不油腻*/
04-17 1278
主要内容：1.AJAX用于异步交互、网页动态加载与局部更新。2.实现注册时用户名校验并提示的功能.3.使用jQeury实现AJAX（jQuery对AJAX技术进行了封装和简化）。
AJAX——百闻不如一见
weixin_34111790的博客
06-01 419
AJAX 一、AJAX简介 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 有很多使用...
Ajax异步请求
Hackpatrick的博客
03-04 213
Ajax AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面 但是在很...
Ajax异步请求方法(详细)
weixin_46721191的博客
04-26 5612
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面情况下，能够更新部分网页的技术。同步和异步同步互交：指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求，期间有个等待过程；异步互交：指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待；
Ajax异步请求的五个步骤
qq_62380657的博客
05-05 9881
AJAX（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的局部进行更新。 1.建立xmlHttpRequest异步对象 const xhr=new XMLHttpRequest(); 2.创建HTTP请求（设置请求方法和URL） //get方式 xhr.open('GET',URL); //post方式发送数据
AJAX异步请求
HHHHHAOGG的博客
01-04 3716
1.什么是AJAX的异步请求： 我们知道，在同步请求模型中，浏览器是直接向服务器发送请求，并直接接收、处理服务器响应的数据的。这就导致了浏览器发送完一个请求后，就只能干等着服务器那边处理请求，响应请求，在这期间其它事情都做不了。但是异步请求就可以省略浏览器不会出现干等着的状态 2.异步请求的原理： 异步请求正是基于以上所述的模式，浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控
ajax 同步请求和异步请求的差异分析
09-05
在实际开发中，通常我们会使用异步请求，并在`onreadystatechange`事件中定义回调函数，以处理服务器返回的数据。当`readyState`属性等于4（表示请求已完成），且`status`属性等于200（表示请求成功）时，说明服务器...
原生JavaScrpit中异步请求Ajax实现方法
11-27
在前端页面开发的过程中，经常使用到Ajax...JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpRequest对象，使用这个对象来进行异步发送请求，具体实现参考下面代码： function ajax
ajax异步请求小结
08-31
**Ajax异步请求小结** Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术，它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，...
ajax异步请求详解
11-26
在本文中，我们将深入探讨AJAX异步请求的使用，包括jQuery库中的相关方法。 1. **jQuery的引用**：在HTML文档中引入jQuery库通常有两种方式：一是下载jQuery.js文件并将其添加到页面的`<head>`或`<body>`标签中；二...
Ajax异步请求技术实例讲解
10-19
Ajax异步请求技术是Web开发中的核心组成部分，它使得网页能够在不刷新整个页面的情况下与服务器进行通信，更新局部内容。这极大地提升了用户体验，特别是在交互频繁的Web应用中。Ajax的全称是Asynchronous ...
AJAX 异步请求详细教程
qq_54525448的博客
03-04 8638
Ajax 全称为 Asynchronous JavaScript And Xml -- 异步 js 和 xml，用来进行交互式网页的制作；也是一种动态的网页开发技术，在不加载整个页面的前提下进行页面局部内容的刷新；Ajax 在后台与服务器进行少量的数据交互，使用网页实现异步更新，比传统的刷新整个页面带给服务器的压力要小很多；让程序的运行更加顺畅；Ajax 分为原生 js 实现和 Jquery 框架实现；
Day17_1--AJAX学习之GET/POST传参
gitee_nanzhi66的博客
08-03 347
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其实AJAX就可以理解为就是JS。
宏景eHR /ajax/ajaxService SQL注入漏洞复现
最新发布
0xSec
08-03 337
​宏景eHR /ajax/ajaxService 接口处存在SQL注入漏洞，,未经身份验证的远程攻击者通过利用SQL注入漏洞配合数据库xp_cmdshell可以执行任意命令，从而控制服务器。经过分析与研判，该漏洞利用难度低，建议尽快修复。
用ajax异步请求 ajax异步请求
07-25
当使用Ajax进行异步请求时，你需要创建一个XMLHttpRequest对象，并使用它来发送HTTP请求。以下是一个使用Ajax进行异步请求的示例： ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', 'https://api.example.com/data', true); // 设置请求头（可选） xhr.setRequestHeader('Content-Type', 'application/json'); // 监听请求状态的变化 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理返回的数据 var response = JSON.parse(xhr.responseText); console.log(response); } else if (xhr.readyState === 4 && xhr.status !== 200) { // 请求失败，处理错误信息 console.error('Error:', xhr.status); } }; // 发送请求 xhr.send(); ``` 在这个示例中，我们创建了一个GET请求，并指定了请求的URL。你可以根据你的需求来设置请求方法（GET、POST等）和URL。然后，我们可以通过设置请求头来传递额外的信息。在`onreadystatechange`事件处理程序中，我们检查请求的状态和响应的状态码，根据情况处理返回的数据或错误信息。 请注意，示例中的URL是一个示意的API地址，你需要根据你的实际需求来设置正确的URL。 希望这个示例对你有帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱笑的tiger

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值