编辑“︁JavaScript Ajax基础”︁

= JavaScript Ajax基础 =

'''Ajax'''（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。它通过JavaScript的<code>XMLHttpRequest</code>对象或现代的<code>fetch</code> API实现异步通信，广泛应用于动态网页开发。

== 介绍 ==
Ajax允许网页在后台与服务器交换数据，从而实现局部更新，提升用户体验。其核心特点是：
* '''异步通信'''：无需刷新页面即可获取数据。
* '''轻量级传输'''：通常使用JSON或XML格式传输数据。
* '''事件驱动'''：通过回调函数或Promise处理响应。

== XMLHttpRequest 基础 ==
=== 创建请求 ===
使用<code>XMLHttpRequest</code>对象发起Ajax请求的基本步骤：

<syntaxhighlight lang="javascript">
// 1. 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 2. 配置请求（方法、URL、是否异步）
xhr.open('GET', 'https://api.example.com/data', true);

// 3. 设置响应类型（可选）
xhr.responseType = 'json';

// 4. 发送请求
xhr.send();

// 5. 处理响应
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('成功获取数据:', xhr.response);
    } else {
        console.error('请求失败:', xhr.statusText);
    }
};

// 6. 错误处理
xhr.onerror = function() {
    console.error('网络错误');
};
</syntaxhighlight>

=== 请求方法 ===
常见HTTP方法：
* <code>GET</code>：获取数据
* <code>POST</code>：提交数据
* <code>PUT</code>/<code>DELETE</code>：更新/删除数据

=== 发送数据 ===
POST请求示例：
<syntaxhighlight lang="javascript">
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ username: 'Alice', age: 25 }));
</syntaxhighlight>

== Fetch API ==
现代JavaScript推荐使用<code>fetch</code> API，基于Promise实现更简洁的异步操作：
<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) throw new Error('网络响应异常');
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('请求失败:', error));
</syntaxhighlight>

=== 异步/await 写法 ===
<syntaxhighlight lang="javascript">
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
}
</syntaxhighlight>

== 数据格式 ==
常见的数据交换格式：
{| class="wikitable"
|-
! 格式 !! 特点 !! 示例
|-
| JSON | 轻量、易解析 | <code>{"name":"Alice","age":25}</code>
|-
| XML | 可扩展但冗长 | <code><user><name>Alice</name><age>25</age></user></code>
|}

== 实际案例 ==
=== 实时搜索建议 ===
以下示例展示如何实现搜索框的实时建议：
<syntaxhighlight lang="javascript">
document.getElementById('search').addEventListener('input', async (e) => {
    const query = e.target.value;
    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    const suggestions = await response.json();
    displaySuggestions(suggestions);
});
</syntaxhighlight>

=== 用户登录验证 ===
<syntaxhighlight lang="javascript">
document.getElementById('login-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify(Object.fromEntries(formData)),
        headers: { 'Content-Type': 'application/json' }
    });

    if (response.ok) {
        window.location.href = '/dashboard';
    } else {
        alert('登录失败: ' + (await response.text()));
    }
});
</syntaxhighlight>

== 跨域请求（CORS） ==
浏览器出于安全考虑会限制跨域请求。解决方法：
* 服务器设置<code>Access-Control-Allow-Origin</code>头
* 使用JSONP（仅限GET请求）
* 代理服务器转发请求

== 性能优化 ==
* 使用缓存（<code>Cache-Control</code>头）
* 压缩数据（gzip）
* 批量请求减少HTTP次数
* 取消不必要的请求（<code>AbortController</code>）

<mermaid>
graph TD
    A[发起Ajax请求] --> B{请求成功?}
    B -->|是| C[处理数据]
    B -->|否| D[错误处理]
    C --> E[更新DOM]
    D --> F[显示错误信息]
</mermaid>

== 数学表示 ==
Ajax请求的延迟可表示为：
<math>
T_{total} = T_{request} + T_{process} + T_{response}
</math>
其中：
* <math>T_{request}</math>：请求发送时间
* <math>T_{process}</math>：服务器处理时间
* <math>T_{response}</math>：响应返回时间

== 参见 ==
* [[JavaScript/Promise]]
* [[JavaScript/异步编程]]
* [[RESTful API设计]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript网络请求]]