jQuery实现Ajax

Ajax概述

同步交互与异步交互

优缺点

使用jQuery实现Ajax

$.get()与$ .post()

Ajax概述

AJAX是Asynchronous JavaScript and XML的缩写，通过JavaScript 向服务器发送请求并接收响应的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步数据交换，从而更新网页的部分内容。

同步交互与异步交互

同步交互：客户端发出一个请求，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出请求后，无需等待服务器响应结束，就能发出下一个请求。

优缺点

优点：

AJAX最大的特点就是异步性，它允许在不刷新整个页面的情况下更新网页的部分内容，从而改善用户体验。

AJAX可以动态的获取和显示数据，提高交互性。

缺点：

AJAX并不适合所有场景，很多时候需要使用异步交互。

AJAX提高了用户体验，但无形中向服务器的请求次数增多了，导致服务器压力增大。

使用jQuery实现Ajax

jQuery已经将AJAX的相关操作进行了封装，比使用JavaScript更加简单方便：

步骤：

导入jQuery

调用方法触发$.ajax()发送HTTP请求

设置好ajax()里的各项参数

在Servlet中接收数据并处理，响应

调用请求成功的方法

先创建一个web项目，过程：IDEA2024如何创建Web项目以及配置Tomcat_idea社区版怎么配置tomcat-CSDN博客，

在页面文件<head>标签中插入：

复制代码

<script src="https://code.jquery.com/jquery.min.js"></script>

写一个触发事件触发方法，方法里面属于$.ajax():

html 复制代码

<html>
<head>
    <title>Title</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
    <script>
        function UseAjax() {
            const input = document.querySelector('input').value
            $.ajax({})
        }

    </script>
</head>
<body>
    用户名：<input class="input" type="text" name="username" onblur="UseAjax()"><br>
</body>
</html>

在ajax()内有很多参数如下：

参数	说明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

常用的有：

url: ....,

data: .....,

type: .......,

dataType: .......,

success function(){}

接下来补全参数：

javascript 复制代码

            $.ajax({
                url: "http://localhost:8080/Ajax_Text1_Web_exploded/AjaxText",
                type: "GET",
                data: {
                    username: input,
                    age: 18,
                    sex: "男"
                },
                dataType: JSON,
                success: function (data) {
                    alert(data)
                }
            })

编写一个Servlet进行收集和处理数据：

java 复制代码

@WebServlet("/Ajax_Text1_Web_exploded/AjaxText")
public class AjaxTextServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String username = req.getParameter("username");
        String age = req.getParameter("age");
        String sex = req.getParameter("sex");
        System.out.println(username+age+sex);
        resp.getWriter().print(username+age+sex)；


    }
}

一定要注意type请求方式要对应

$.get()与$ .post()

$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法，同理$ .post()也是，使用这两种方法可以不用配置type参数。

Ajax概述

同步交互与异步交互

优缺点

使用jQuery实现Ajax

.get()与.post()

$.get()与$ .post()