Ajax的请求响应

Ajax的全称是Asynchronous JavaScript and XML，即异步的JavaScript和XML（传输储存数据）。它是一种在不重新加载整个页面的情况下更新部分页面的技术。

Ajax的原理

1.用户通过页面上的操作（如点击按钮）触发JavaScript函数的执行；

2.JavaScript函数通过XMLHttpRequest对象向服务器发送请求；

3.服务器接收请求后处理数据，并将结果以XML、JSON等格式返回给浏览器；

4.浏览器接收到响应后，使用JavaScript解析数据并进行页面的更新；

5.页面的更新可以是添加、删除或修改DOM元素，也可以是更新部分页面的内容。

Ajax原理中的关键点是异步通信和DOM操作。异步通信指的是浏览器发送请求后可以继续执行其他的操作，并不需要等待服务器返回响应；而DOM操作指的是通过JavaScript动态修改页面的内容。

使用Ajax可以实现快速、动态的页面更新，提高用户的体验和交互性。

使用Ajax请求接收JSON数据

javascript 复制代码

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的URL和方法
var url = 'https://api.example.com/data'; // 替换为你的API地址
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求

// 设置请求头（如果需要的话）
xhr.setRequestHeader('Content-Type', 'application/json'); // 通常用于POST请求

// 定义回调函数，处理服务器响应
xhr.onload = function () {
  if (xhr.status === 200) { // 检查响应状态码是否为200（OK）
    try {
      // 尝试解析返回的JSON数据
      var jsonData = JSON.parse(xhr.responseText);
      
      // 在这里处理JSON数据
      console.log(jsonData);
      // 或者将其传递给其他函数进行进一步处理
      processData(jsonData);
    } catch (error) {
      // 如果解析JSON失败，打印错误信息
      console.error('Error parsing JSON:', error);
    }
  } else {
    // 如果状态码不是200，打印错误信息
    console.error('Request failed. Status:', xhr.status);
  }
};

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

// 处理数据的函数（示例）
function processData(data) {
  // 在这里处理数据
  // 例如，更新DOM，发起其他请求等
}

使用Ajax请求接收XML数据（不设置请求头是因为默认返回的数据是XML形式）

javascript 复制代码

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的URL和方法
var url = 'https://api.example.com/data.xml'; // 替换为你的API地址，确保返回XML格式数据
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求

// 设置响应类型为XML
xhr.responseType = 'document';

// 定义回调函数，处理服务器响应
xhr.onload = function () {
  if (xhr.status === 200) { // 检查响应状态码是否为200（OK）
    // 响应成功，处理XML数据
    var xmlDoc = xhr.responseXML; // 这是一个XML文档对象
    if (xmlDoc) {
      // 解析XML数据
      var items = xmlDoc.getElementsByTagName('item'); // 假设<item>是你要获取的元素
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        // 处理每个item元素，例如读取属性和文本内容
        var id = item.getAttribute('id');
        var name = item.getAttribute('name');
        var value = item.textContent;
        
        // 在这里可以使用这些数据，例如更新DOM或执行其他操作
        console.log('ID: ' + id + ', Name: ' + name + ', Value: ' + value);
      }
    } else {
      console.error('Failed to load XML document');
    }
  } else {
    // 如果状态码不是200，打印错误信息
    console.error('Request failed. Status:', xhr.status);
  }
};

// 设置错误处理函数
xhr.onerror = function () {
  console.error('XMLHttpRequest error occurred');
};

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

扩展：Ajax的封装Axios

1.请求传参

javascript 复制代码

import axios from 'axios';

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error posting data:', error);
  }
}

postData();

在上面示例中，我们传递了一个包含firstName和lastName属性的对象作为第二个参数给axios.post方法。axios会自动将这个对象转换为以下的JSON字符串：

javascript 复制代码

{
  "firstName": "Fred",
  "lastName": "Flintstone"
}

同时，axios会自动的设置请求的Content-Type为application/json，告诉服务器它正在发送一个JSON格式的数据体。

如果需要发送一个原始的字符串，例如XML数据，可以这样做：

javascript 复制代码

import axios from 'axios';

async function postXMLData() {
  try {
    const xmlString = '<request><data>Some XML content</data></request>';

    const response = await axios.post('https://api.example.com/data', xmlString, {
      headers: {
        'Content-Type': 'application/xml' // 手动设置
      }
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error posting XML data:', error);
  }
}

postXMLData();

2.接收返回值

在这个例子中，response.data通常是一个JavaScript对象，因为axios默认会将JSON字符串解析为对象。因此，你可以直接访问它的属性和方法，就像处理普通的JavaScript对象一样。

javascript 复制代码

axios.get('https://api.example.com/data')
  .then(response => {
    // response.data 通常是服务器返回的JSON数据，已经自动被axios解析为JavaScript对象
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，通过设置responseType为'text'，我们告诉axios不要自动解析响应数据，这样我们就可以手动使用JSON.parse()来解析它。不过，在大多数情况下，让axios自动处理JSON解析会更加方便。

javascript 复制代码

axios.get('https://api.example.com/data', { responseType: 'text' })
  .then(response => {
    // 手动解析JSON字符串为JavaScript对象
    let data = JSON.parse(response.data);
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

获取XML格式的数据并使用：

javascript 复制代码

<template>
  <div>
    <div v-if="error">Error: {{ error }}</div>
    <div v-else>
      <ul>
        <li v-for="item in xmlData" :key="item.id">
          {{ item.nodeName }} - {{ item.textContent }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      xmlData: null,
      error: null
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/data', {
        responseType: 'document' // 指定返回XML格式数据
      });

      // 解析XML数据
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(response.data, 'text/xml');

      // 从XML文档中读取数据
      const items = xmlDoc.getElementsByTagName('item'); // 假设每个item是你想要的数据节点
      this.xmlData = [];
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        // 这里可以根据XML结构读取属性或文本内容
        const data = {
          id: item.getAttribute('id'),
          name: item.getAttribute('name'),
          value: item.textContent
        };
        this.xmlData.push(data);
      }

    } catch (error) {
      this.error = 'An error occurred while fetching the XML data.';
      console.error(error);
    }
  }
};
</script>