JavaWeb——AJAX

最新推荐文章于 2025-12-11 08:58:14 发布

原创最新推荐文章于 2025-12-11 08:58:14 发布 · 825 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #ecmascript

Java开发专栏收录该内容

25 篇文章

订阅专栏

本文介绍了AJAX的基本概念，它是一种用于创建交互式网页应用的技术，通过JavaScript实现异步数据请求。接着展示了原生JavaScript中实现AJAX请求的步骤，包括创建XMLHttpRequest对象、设置请求参数、发送请求及处理响应。此外，还详细讲解了jQuery中使用$.ajax、$.get、$.post和$.getJSON等方法进行AJAX请求的方法，以及如何处理返回的JSON数据。这些内容有助于开发者更高效地实现页面的局部更新和数据交互。

JavaWeb——AJAX

1、介绍

AJAX即"Asynchronous JavaScript And XML"异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术
是一种浏览器通过js异步发起请求，局部更新页面的技术

2、原生的JavaScript中的AJAX请求实例

<!DOCTYPE html>
<html lang="Ch_zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajaxRequest() {
        //1.首先创建XMLHttpRequest
        var xmlhttprequest= new XMLHttpRequest()
        //2.调用open方法设置请求参数，第三个参数表示是否异步，一般都是异步
        xmlhttprequest.open("GET","http://localhost:8080/javaweb0/ajaxServlet?action=javaScriptAjax",true)
        //4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
        xmlhttprequest.onreadystatechange=function () {
            if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
                var jsonObj=JSON.parse(xmlhttprequest.responseText)
                document.getElementsById("").innerHTML="编号"+jsonObj.id+"姓名"+jsonObj.name;
            }
        }
        //3.调用send方法发送请求
        xmlhttprequest.send()
        }
    </script>
</head>
<body>

</body>
</html>

3、jQuery中的AJAX请求

$.ajax方法

url：表示请求的地址
type：表示请求的类型GET和POST请求
data：需要服务器发送的数据
格式有两种：1、name=value 2、{key:value}
success：请求成功，响应的回调函数
dataType：响应的数据类型，常用的数据类型有：text、xml、json

<!DOCTYPE html>
<html lang="Ch_zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        $("#btn").click(function () {
            $.ajax({
                url:"http://localhost:8080/javaweb0/ajaxServlet",
                data:"action=jQueryAjax",
                type:"GET",
                success:function (data) {
                    alert("服务器返回的数据是："+data)
                },
                dataType:"json"
            })
        })
    </script>
</head>
<body>

</body>
</html>

$.get方法和 $.post方法

$.get("http://localhost:8080/javaweb0/ajaxServlet","action=jQueryAjax",
    function (data) {
    alert("服务器返回的数据是："+data)
},"json")

$.getJSON方法

$.getJSON("http://localhost:8080/javaweb0/ajaxServlet","action=jQueryAjax",
    function (data) {
    alert("服务器返回的数据是："+data)
})

表单序列化serialize()

可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接

$("#form1").serialize()//将表单的内容都序列化的显示出来