【每日知识】Ajax选择题部分

'# 【每日知识】Ajax选择题部分

一、背景与问题

在Web开发中，Ajax（Asynchronous JavaScript and XML）技术已经成为构建动态交互式网页的核心手段。对于选择题场景（如在线考试、问卷调查、即时反馈系统），传统页面刷新的交互方式存在显著缺陷：用户需要等待整个页面重新加载，导致用户体验中断，且无法实时展示答题结果。

本篇将深入探讨Ajax在选择题场景中的应用，包括其核心原理、实现细节、性能优化策略以及常见陷阱。我们将结合实际开发场景，通过代码示例展示如何构建一个完整的在线考试系统。

二、基本原理

Ajax的核心原理是通过JavaScript发起异步HTTP请求，与服务器进行数据交互，而无需重新加载整个页面。其工作流程如下：

用户触发事件（如点击按钮、选择选项）
JavaScript创建XMLHttpRequest对象（或使用Fetch API）
发送异步请求到服务器端
服务器返回响应数据（通常为JSON格式）
更新页面局部内容（通过DOM操作）

关键组成部分：

HTTP协议：规定请求/响应格式
JavaScript：处理前端逻辑
服务器端：处理请求并返回数据
数据格式：JSON作为首选格式

三、环境准备

1. 前端环境

浏览器支持：现代浏览器（Chrome 55+、Firefox 45+、Safari 9+）
开发工具：VS Code、Chrome DevTools
依赖：无（原生JavaScript即可）

2. 后端环境（模拟）

使用Node.js + Express模拟服务器端：

npm init -y
npm install express

四、核心实现

1. 基础Ajax请求（GET）

// 简单的GET请求示例
function fetchQuestions() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/questions', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const questions = JSON.parse(xhr.responseText);
      renderQuestions(questions);
    }
  };
  xhr.send();
}

关键代码解释：

XMLHttpRequest对象创建
open方法指定请求方法、URL和异步标志
onreadystatechange事件处理函数
readyState === 4表示请求完成
status === 200表示成功响应
JSON.parse将响应数据转换为JavaScript对象

2. 带参数的GET请求

function fetchAnswers(questionId) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/api/answers?questionId=${questionId}`, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const answers = JSON.parse(xhr.responseText);
      displayAnswers(answers);
    }
  };
  xhr.send();
}

注意点：

URL参数编码应使用encodeURIComponent防止特殊字符问题
服务器端需正确解析查询参数

3. POST请求提交答案

function submitAnswer(answer) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      showResult(result);
    }
  };
  xhr.send(JSON.stringify(answer));
}

关键点：

设置Content-Type头指定请求体格式
使用JSON.stringify将对象转换为JSON字符串
服务器端需正确解析JSON数据

五、完整案例

1. 在线考试系统实现

前端代码（index.html）：

<!DOCTYPE html>
<html>
<head>
  <title>在线考试</title>
</head>
<body>
  <div id="questionContainer"></div>
  <button onclick="submitAllAnswers()">提交答案</button>
  <div id="result"></div>

  <script>
    let currentQuestion = 0;
    const questions = [];

    function renderQuestions(questions) {
      questions.forEach((q, index) => {
        const container = document.createElement('div');
        container.innerHTML = `
          <p><strong>${index+1}. ${q.text}</strong></p>
          <label><input type="radio" name="q${index}" value="A"> ${q.options[0]}</label>
          <label><input type="radio" name="q${index}" value="B"> ${q.options[1]}</label>
          <label><input type="radio" name="q${index}" value="C"> ${q.options[2]}</label>
          <label><input type="radio" name="q${index}" value="D"> ${q.options[3]}</label>
        `;
        container.querySelector(`input[name="q${index}"]`).checked = true;
        document.getElementById('questionContainer').appendChild(container);
      });
    }

    function submitAllAnswers() {
      const answers = [];
      document.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
        answers.push({
          questionId: radio.name.split('q')[1],
          answer: radio.value
        });
      });
      submitAnswers(answers);
    }

    function submitAnswers(answers) {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/submit', true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const result = JSON.parse(xhr.responseText);
          document.getElementById('result').innerText = `得分: ${result.score}/10`;
        }
      };
      xhr.send(JSON.stringify(answers));
    }
  </script>
</body>
</html>

后端代码（server.js）：

const express = require('express');
const app = express();
const port = 3000;

// 模拟数据
const questions = [
  { id: 1, text: 'JavaScript是什么?', options: ['脚本语言', '编译语言', '机器语言', '汇编语言'] },
  { id: 2, text: 'Ajax的核心是?', options: ['XML', 'HTTP', 'DOM', 'CSS'] },
  { id: 3, text: 'JSON的全称是?', options: ['JavaScript Object Notation', 'Java Script Object Notation', 'JavaScript Object Notation', 'Java Script Object Notation'] }
];

app.use(express.json());

// 获取题目
app.get('/api/questions', (req, res) => {
  res.json(questions);
});

// 提交答案
app.post('/api/submit', (req, res) => {
  const correctAnswers = {
    1: 'A', 2: 'B', 3: 'A'
  };
  const { score } = req.body.reduce((acc, answer) => {
    const correct = correctAnswers[answer.questionId] === answer.answer;
    acc.score += correct ? 1 : 0;
    acc.correct.push(correct);
    return acc;
  }, { score: 0, correct: [] });
  
  res.json({ score, correct: req.body.map((a, i) => ({
    questionId: a.questionId,
    answer: a.answer,
    correct: correctAnswers[a.questionId] === a.answer
  })) });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

关键实现细节：

前端使用DOMContentLoaded事件初始化
使用querySelectorAll获取所有选中的答案
后端使用express.json()解析JSON请求体
计算得分时使用reduce方法
返回包含详细结果的响应

六、源码解析

1. 前端代码解析

renderQuestions函数：

使用DOM操作动态创建题目容器
自动选择第一个选项作为默认值
使用命名规则（q+索引）确保每个问题的单选组独立

submitAllAnswers函数：

遍历所有选中的单选按钮
构建包含问题ID和答案的数组
调用submitAnswers函数发送请求

2. 后端代码解析

路由处理：

/api/questions：返回所有题目
/api/submit：处理答案提交并计算得分

评分逻辑：

使用reduce方法遍历答案数组
比较用户答案与正确答案
计算总分和正确率

七、进阶使用

1. 增强功能

实时反馈：

function checkAnswer(questionId, answer) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', `/api/check?questionId=${encodeURIComponent(questionId)}`, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      showFeedback(result.correct, questionId);
    }
  };
  xhr.send(JSON.stringify({ answer }));
}

防重提交：

let isSubmitting = false;
function submitAnswers(answers) {
  if (isSubmitting) return;
  isSubmitting = true;
  
  // ...原有代码...
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      isSubmitting = false;
      // ...原有代码...
    }
  };
}

2. 安全增强

CSRF防护：

// 前端
function getCsrfToken() {
  const token = document.querySelector('meta[name="csrf-token"]').content;
  return token;
}

// 后端
app.use((req, res, next) => {
  const csrfToken = crypto.randomBytes(16).toString('hex');
  res.cookie('XSRF-TOKEN', csrfToken, { secure: true, httpOnly: true });
  res.locals.csrfToken = csrfToken;
  next();
});

八、性能与工程实践

1. 性能优化策略

1. 响应式加载：

function loadQuestions() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/questions', true);
  xhr.responseType = 'json';
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      renderQuestions(xhr.response);
    }
  };
  xhr.send();
}

2. 资源压缩：

使用Gzip压缩响应数据
使用WebP格式的图片（如题目插图）

3. 缓存策略：

function fetchQuestions() {
  const cached = localStorage.getItem('questions');
  if (cached) {
    renderQuestions(JSON.parse(cached));
    return;
  }
  
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/questions', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const questions = JSON.parse(xhr.responseText);
      localStorage.setItem('questions', JSON.stringify(questions));
      renderQuestions(questions);
    }
  };
  xhr.send();
}

2. 异常处理

错误处理示例：

function fetchQuestions() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/questions', true);
  
  xhr.onerror = function() {
    console.error('网络错误');
    // 显示错误提示
  };
  
  xhr.ontimeout = function() {
    console.error('请求超时');
    // 显示超时提示
  };
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        renderQuestions(JSON.parse(xhr.responseText));
      } else {
        console.error(`HTTP错误: ${xhr.status}`);
      }
    }
  };
  
  xhr.send();
}

九、常见问题与踩坑

1. 常见错误

错误示例1：

// 错误：未处理错误状态
fetch('/api/questions')
  .then(response => response.json())
  .then(data => console.log(data));

错误分析：

未处理网络错误（如404、500）
未处理超时情况
未处理JSON解析错误

改进方案：

fetch('/api/questions')
  .catch(error => {
    console.error('请求失败:', error);
    // 显示错误提示
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    console.error('解析失败:', error);
    // 显示错误提示
  });

错误示例2：

// 错误：未设置Content-Type头
fetch('/api/submit', {
  method: 'POST',
  body: JSON.stringify({ answer: 'A' })
});