【Java Web】Ajax 介绍及 jQuery 实现

AJAX介绍

AJAX（Asynchronous JavaScript and XML）是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互，从而提供更流畅的用户体验。尽管名字中包含了XML，但实际上，AJAX可以使用任何格式的数据，包括JSON、HTML等。

AJAX的工作原理

1. 客户端请求：用户在网页上执行某些操作（如点击按钮），触发JavaScript代码发送一个异步请求到服务器。
2. 服务器处理：服务器接收请求后，处理这些请求，并返回响应给客户端。
3. 客户端处理：客户端通过JavaScript接收到服务器的响应，并根据需要更新页面的一部分，而不需要刷新整个页面。

AJAX与传统Web的主要区别

XMLHttpRequest

XMLHttpRequest (XHR) 是一个内置在浏览器中的API，是实现AJAX功能的核心技术之一。用于在客户端和服务器之间异步交换数据。

主要方法和属性

open()：初始化一个新的请求。这个方法接受三个参数：请求的方法（GET、POST等）、请求的URL以及是否异步执行该请求。

xhr.open('GET', 'https://example.com/data', true);

send()：发送请求。对于POST请求，可以在 send() 方法中传递请求体数据。

xhr.send(data);

setRequestHeader()：设置HTTP请求头。这对于发送带有特定头部信息的请求非常有用。

xhr.setRequestHeader('Content-Type', 'application/json');

onreadystatechange：当 readyState 属性改变时调用的事件处理器。

readyState 的值有五个：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status 和 statusText：分别表示HTTP状态码和状态消息，如 200 OK、404 Not Found 等。

responseType：指定响应的数据类型，如 'text', 'json', 'document', 'arraybuffer' 或 'blob'。

response 和 responseText：分别用于获取响应数据。response 是根据 responseType 设置的响应类型，而 responseText 总是返回字符串形式的响应。responseXML 将XML格式的响应内容解析成DOM对象。

jQuery实现Ajax

$.ajax()

通过 HTTP 请求加载远程数据

语法：jQuery.ajax([settings])

• settings：可选。用于配置 Ajax 请求的键值对集合

$("#b01").click(function(){
    htmlobj = $.ajax({url:"/jquery/test1.txt",async:false});
    $("#myDiv").html(htmlobj.responseText);
});

参数

常见配置选项

$.ajax({
    url: '请求的URL',
    type: '请求类型（如GET、POST等）',
    data: '要发送的数据（如果是GET请求，通常将数据附加到URL中）',
    contentType: '发送数据的内容类型（默认为"application/x-www-form-urlencoded; charset=UTF-8"）',
    dataType: '预期服务器返回的数据类型（如html、json、xml、script、text等）',
    success: function(data, textStatus, jqXHR) {
        // 请求成功时执行的函数
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败时执行的函数
    },
    complete: function(jqXHR, textStatus) {
        // 请求完成后执行的函数，无论成功还是失败
    },
    beforeSend: function(jqXHR, settings) {
        // 在请求发送之前执行的函数
    },
    async: true, // 默认情况下为异步请求，设置为false则变为同步请求
    cache: true, // 默认情况下GET请求会被缓存
    timeout: 0, // 请求超时时间（毫秒），默认为0（无超时）
    global: true, // 触发全局AJAX事件
    processData: true, // 默认情况下会尝试处理发送的数据为查询字符串
    traditional: false, // 用于序列化数组的参数
});

$().load()

从服务器加载数据，并把返回的数据放入被选元素中

语法：$(selector).load(URL [, data] [, callback]);

• selector：一个 CSS 选择器字符串，用于匹配 DOM 元素。
• URL：一个字符串，指定要加载的 HTML 文件的 URL。
• data：可选参数，一个对象，包含要发送到服务器的数据，这些数据会以 POST 方式发送。
• callback：可选参数，一个函数，当请求完成时调用（在文档片段被插入到 DOM 中之后）。

【data.html】
<p>Hello from data.html</p>

<div id="content"></div>
<script>
    $(document).ready(function() {
        $('#content').load('data.html', function(response, status, xhr) {
            if (status == 'success') {
                console.log('加载成功');
            } else if (status == 'error') {
                console.error('加载失败: ' + xhr.status + ' ' + xhr.statusText);
            } else if (status == 'complete') {
                console.log('加载完成');
            }
        });
    });
</script>

#content 元素将会被填充 data.html 文件的内容。

$.get()

通过 HTTP GET 请求从服务器上请求数据

语法：$.get(url, [data], [callback], [dataType]);

• url：必需，一个字符串，表示请求的 URL。

• data：可选，一个对象或字符串，表示要发送到服务器的数据。

• callback：可选，一个函数，当请求成功时执行。此函数接受三个参数：

  ​ data：服务器返回的数据。

  ​ statusText：HTTP 状态文本，如 “success” 或 “error”。

  ​ jqXHR：jQuery 的 XMLHttpRequest 对象。

• dataType：可选，预期服务器返回的数据类型，如 “xml”, “html”, “script”, “json”, “text”, “jsonp” 等。

// 带数据的 GET 请求
$.get('https://api.example.com/data', { key: 'value' }, function(data, status) {
    console.log('请求成功，状态：' + status);
    console.log('返回的数据：', data);
});

// 错误处理
$.get('https://api.example.com/data', function(data, status, jqXHR) {
    if (status === 'success') {
        console.log('请求成功，返回的数据：', data);
    } else if (status === 'error') {
        console.error('请求失败，状态码：' + jqXHR.status);
    }
});

$.post()

通过 HTTP POST 请求从服务器上请求数据

语法：$.post(url, [data], [callback], [dataType]);

参数同上

// 简单的 POST 请求
$.post('https://api.example.com/data', { key: 'value' }, function(data, status) {
    console.log('请求成功，状态：' + status);
    console.log('返回的数据：', data);
});

// 指定数据类型
$.post('https://api.example.com/data', { key: 'value' }, function(data) {
    console.log('请求成功，返回的数据：', data);
}, 'json');

// 错误处理
$.post('https://api.example.com/data', {key:'value'}, function(data,status,jqXHR) {
    if (status === 'success') {
        console.log('请求成功，返回的数据：', data);
    } else if (status === 'error') {
        console.error('请求失败，状态码：' + jqXHR.status);
    }
});

除上述基本用法外，$.post() 还可以接受一个配置对象，类似于 $.ajax() 方法的选项

$.post({
    url: 'https://api.example.com/data',
    data: { key: 'value' },
    success: function(data, status, jqXHR) {
        console.log('请求成功，状态：' + status);
        console.log('返回的数据：', data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求失败，状态码：' + jqXHR.status);
        console.error('错误信息：' + errorThrown);
    },
    complete: function(jqXHR, textStatus) {
        console.log('请求完成，状态：' + textStatus);
    },
    dataType: 'json',
    async: true, // 默认为 true，表示异步请求
    cache: false, // 默认情况下，POST 请求不会被缓存
    timeout: 3000 // 请求超时时间（毫秒）
});

• $.post(URL,data,success,“json”);
• $.getJSON(URL,data,success)
• $.get(URL,data,success,“json”)