AJAX 学习 - 技术栈

1. AJAX简介

AJAX（Asynchronous JavaScript And XML）是一种用于创建交互式网页的技术，允许在不刷新页面的情况下与服务器进行通信，从而实现页面的局部更新。

1.1 AJAX的优点

无需刷新页面：可以与服务器进行异步通信，无需重新加载整个页面。
提升用户体验：页面更新更加流畅，用户操作不会被中断。
减轻服务器负担：只传输必要的数据，而不是整个页面内容。

1.2 AJAX的缺点

无浏览历史：无法通过浏览器的后退按钮回到上一状态。
跨域问题：默认情况下，不能从一个域名向另一个域名发送AJAX请求（同源策略）。
搜索引擎优化（SEO）不友好：搜索引擎可能无法正确索引动态加载的内容。

2. AJAX的实现方式

AJAX可以通过多种方式实现，包括原生JavaScript、jQuery、fetch函数以及第三方库（如axios）。

2.1 原生AJAX（使用XMLHttpRequest）

原生AJAX通过XMLHttpRequest对象实现，是AJAX功能的基础。

核心步骤

创建 XMLHttpRequest对象

javascript 复制代码

var xhr = new XMLHttpRequest();

设置请求信息

javascript 复制代码

xhr.open(method, url); // method: 请求方法（GET、POST等），url: 请求地址
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送请求

javascript 复制代码

xhr.send(body); // GET请求不传body参数，POST请求需要传入请求体

接收响应

javascript 复制代码

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var responseText = xhr.responseText; // 获取响应文本
        console.log(responseText);
    }
};

2.2 jQuery中的AJAX

jQuery提供了简化的AJAX方法，如$.get、$.post和$.ajax。

示例

javascript 复制代码

$.ajax({
    url: 'http://127.0.0.1:8000/server',
    type: 'GET',
    dataType: 'json', // 响应数据类型
    success: function(data) {
        console.log(data);
    },
    error: function() {
        console.log('请求失败');
    }
});

2.3 Fetch API

Fetch是现代浏览器提供的原生API，用于发送HTTP请求。它返回一个Promise对象，支持Promise链式调用。

示例

javascript 复制代码

fetch('http://127.0.0.1:8000/server', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2.4 Axios

Axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境。它提供了简洁的API和丰富的功能，如拦截请求和响应、自动转换JSON数据等。

示例

javascript 复制代码

axios.get('http://127.0.0.1:8000/server')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

3. HTTP相关知识

AJAX的核心是通过HTTP协议与服务器进行通信。了解HTTP请求和响应的基本结构对于使用AJAX非常重要。

3.1 HTTP请求报文

请求行 ：method URL 协议版本（如：GET /index.html HTTP/1.1）
请求头 ：包含各种请求信息（如Host、Content-Type、Cookie等）
请求体：用于POST请求，包含要发送给服务器的数据

3.2 HTTP响应报文

响应状态行 ：status statusText（如：200 OK）
响应头 ：包含响应信息（如Content-Type、Content-Length等）
响应体：服务器返回的数据（如HTML、JSON、图片等）

3.3 常见的HTTP状态码

200 OK：请求成功
401 Unauthorized：未授权
404 Not Found：资源未找到
500 Internal Server Error：服务器内部错误

3.4 请求方法

GET：用于从服务器获取数据
POST：用于向服务器提交数据
PUT：用于更新服务器上的数据
DELETE：用于删除服务器上的数据

4. 数据传输格式

AJAX的数据传输格式主要有以下几种：

application/x-www-form-urlencoded ：键值对格式（如name=Tom&age=20）
application/json ：JSON格式（如{"name": "Tom", "age": 20}）
multipart/form-data：用于文件上传

5. 跨域问题

AJAX默认遵守同源策略，即协议、域名和端口号必须完全相同。跨域问题可以通过以下方式解决：

JSONP ：利用<script>标签的跨域能力，只支持GET请求。
CORS（Cross-Origin Resource Sharing） ：服务器设置响应头Access-Control-Allow-Origin，允许跨域请求。

5.1 JSONP原理

JSONP通过动态创建<script>标签来加载跨域资源。服务器返回的内容是一个JavaScript函数调用，客户端定义的回调函数会处理这些数据。

示例

客户端：

javascript 复制代码

function handle(data) {
    console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handle';
document.body.appendChild(script);

服务器返回：

javascript 复制代码

handle({"name": "Tom", "age": 20});

5.2 CORS原理

CORS通过在服务器响应头中设置Access-Control-Allow-Origin来允许跨域请求。浏览器会检查该响应头，如果允许，则放行请求。

示例

服务器设置：

javascript 复制代码

response.setHeader('Access-Control-Allow-Origin', '*');

6. AJAX的常见应用场景

动态加载数据：如分页加载、无限滚动
表单提交：无需刷新页面即可提交表单数据
实时交互：如聊天应用、评论系统
文件上传：通过AJAX实现异步文件上传

7. AJAX的状态码和事件

XMLHttpRequest对象的状态码readyState用于表示请求的当前状态：

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

8. AJAX的高级用法

设置请求超时

javascript 复制代码

xhr.timeout = 2000; // 设置超时时间为2秒
xhr.ontimeout = function() {
    console.log('请求超时');
};

取消请求

javascript 复制代码

xhr.abort(); // 取消请求

处理网络异常

javascript 复制代码

xhr.onerror = function() {
    console.log('网络异常');
};

9. 实际案例

9.1 GET请求

html 复制代码

<button id="btn">点击发送GET请求</button>
<div id="result"></div>
<script>
    document.getElementById('btn').onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById('result').innerHTML = xhr.responseText;
            }
        };
    };
</script>

9.2 POST请求

html 复制代码

<button id="btn">点击发送POST请求</button>
<div id="result"></div>
<script>
    document.getElementById('btn').onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://127.0.0.1:8000/server');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('name=Tom&age=20');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById('result').innerHTML = xhr.responseText;
            }
        };
    };
</script>

9.3 JSON数据请求

html 复制代码

<button id="btn">点击发送JSON请求</button>
<div id="result"></div>
<script>
    document.getElementById('btn').onclick = function() {
        var xhr = new XMLHttpRequest();