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()//将表单的内容都序列化的显示出来

原文链接：https://blog.csdn.net/qq_52534495/article/details/120953311