// 简易版 axios 请求封装
class SimpleAxios {
  // 发送 GET 请求
  static get(url, params) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url + '?' + this.encodeParams(params), true);
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.responseText));
          } else {
            reject(new Error(xhr.statusText));
          }
        }
      };
      xhr.onerror = () => reject(new Error('Network Error'));
      xhr.send(null);
    });
  }
 
  // 发送 POST 请求
  static post(url, data) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', url, true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.responseText));
          } else {
            reject(new Error(xhr.statusText));
          }
        }
      };
      xhr.onerror = () => reject(new Error('Network Error'));
      xhr.send(JSON.stringify(data));
    });
  }
 
  // 将参数对象转换为 URL 编码字符串
  static encodeParams(params) {
    return Object.keys(params)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
      .join('&');
  }
}
 
// 使用示例
SimpleAxios.get('https://api.example.com/data', { id: 123 })
  .then(response => console.log(response))
  .catch(error => console.error(error));
 
SimpleAxios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => console.log(response))
  .catch(error => console.error(error));

这个简易版的 axios 封装了 GET 和 POST 请求，并使用 Promise 处理异步操作。这个示例提供了如何使用原生的 XMLHttpRequest 对象来发送请求的方法，并演示了如何封装一个简单的 HTTP 客户端以发送 HTTP 请求。

下面是一个简单的Chrome扩展，它会拦截所有的Ajax请求，并在控制台输出请求的响应内容。

// manifest.json
{
  "name": "Ajax Response Modifier",
  "version": "1.0",
  "description": "Modifies Ajax responses",
  "permissions": ["<all_urls>", "webRequest", "webRequestBlocking"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

// background.js
chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    return {
      responseHeaders: details.responseHeaders.map(function(header) {
        // Replace Content-Type header to make sure response is parsed as JSON
        if (header.name.toLowerCase() === 'content-type' && header.value.indexOf('json') !== -1) {
          header.value = 'text/plain;charset=UTF-8';
        }
        return header;
      })
    };
  },
  {
    urls: ['<all_urls>'],
    types: ['xmlhttprequest']
  },
  ['blocking', 'responseHeaders']
);
 
chrome.webRequest.onResponseStarted.addListener(
  function(details) {
    // Read the response as JSON and log it
    var reader = new FileReader();
    reader.onloadend = function() {
      var response = JSON.parse(reader.result);
      console.log('Response modified:', response);
    };
    // Convert the array buffer to a string
    reader.readAsText(details.rawResponse);
  },
  {
    urls: ['<all_urls>'],
    types: ['xmlhttprequest']
  }
);

这个Chrome扩展通过chrome.webRequest API拦截Ajax请求，并在响应开始时读取原始响应数据。通过FileReader将ArrayBuffer转换为文本，然后解析并在控制台输出。这个例子只是一个简单的展示如何操作响应内容的示例，实际应用中可能需要根据具体需求修改处理逻辑。

在Web开发中，XMLHttpRequest对象用于在后台与服务器交换数据。Referer是一个HTTP头部，表示请求资源的页面来源。

XMLHttpRequest复习

创建XMLHttpRequest对象的方法：

// 标准的方式
var xhr = new XMLHttpRequest();
 
// 兼容IE的方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

使用XMLHttpRequest发送请求的基本步骤：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 打开请求，指定方法和URL
xhr.open('GET', 'http://example.com/data.json', true);
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应数据
        var response = xhr.responseText;
        console.log(response);
    }
};
 
// 发送请求
xhr.send();

Referer复习

Referer是一个HTTP请求头部，它包含了当前请求页面的来源页面的地址。服务器可以利用这个信息来进行分析，例如统计图片的点击来源。

设置XMLHttpRequest的Referer头部：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 打开请求，指定方法和URL
xhr.open('GET', 'http://example.com/data.json', true);
 
// 设置请求的Referer头部
xhr.setRequestHeader('Referer', 'http://yourdomain.com');
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应数据
        var response = xhr.responseText;
        console.log(response);
    }
};
 
// 发送请求
xhr.send();

以上代码展示了如何创建和使用XMLHttpRequest对象，以及如何设置HTTP请求的Referer头部。

// 歌词同步显示的类
class LyricDisplay {
    constructor(lyric, tune) {
        this.lyric = lyric;
        this.tune = tune;
        this.currentLine = 0;
        this.interval = 1000; // 默认每行歌词显示的间隔时间为1000毫秒
    }
 
    // 开始同步显示歌词
    start() {
        const lines = this.lyric.split('\n');
        const timer = setInterval(() => {
            if (this.currentLine >= lines.length) {
                clearInterval(timer); // 所有歌词播放完毕，清除定时器
            } else {
                const currentLineLyric = lines[this.currentLine];
                // 根据实际需求处理歌词显示逻辑
                console.log(currentLineLyric);
                this.currentLine++;
            }
        }, this.interval);
    }
}
 
// 使用示例
const lyric = "这里是歌词\n第二行歌词\n第三行歌词";
const tune = "音乐文件路径或者音乐对象";
const displayer = new LyricDisplay(lyric, tune);
displayer.start();

这个简单的类展示了如何使用JavaScript创建一个可以同步显示歌词的基本框架。它将歌词分割成单独的行，并且在音乐播放时逐行打印出来。这个例子只是基础框架，实际应用中可能需要更复杂的逻辑来处理歌词的高亮显示、时间对齐等。

解释：

AJAX请求经常遇到的一个问题是跨域（CORS，Cross-Origin Resource Sharing）。当一个网页尝试请求另一个域（子域、主域、端口不同）的资源时，浏览器出于安全考虑会阻止这种请求。

解决方法：

1. 后端设置响应头：在服务器端设置Access-Control-Allow-Origin响应头，允许特定的域或任何域可以访问资源。

   
   
   
   Access-Control-Allow-Origin: https://example.com

   或者允许所有域：

   
   
   
   Access-Control-Allow-Origin: *

2. JSONP：使用<script>标签发送GET请求，而不是XMLHttpRequest对象，但这种方法只支持GET请求。
3. CORS预检请求：发送一个OPTIONS预检请求，以确认服务器是否允许跨域请求。
4. 代理服务器：在自己的服务器上设置代理，所有AJAX请求先发送到自己的服务器，由服务器转发请求到目标服务器，然后再将响应返回给网页。
5. 使用WebSocket代替AJAX：WebSocket不受同源策略影响，可以直接与其他域的服务器进行通信。

选择哪种方法取决于具体场景和需求。通常情况下，后端设置CORS响应头是最简单且推荐的方式。

要自定义修改input file按钮的名称，可以通过CSS隐藏原生的file input，然后创建一个自定义的按钮，并用JavaScript来触发文件选择。以下是一个简单的示例：

HTML:

<input type="text" id="file-name" disabled placeholder="选择文件">
<button id="file-upload">选择文件</button>
<input type="file" id="file-input" style="display: none;">

CSS:

#file-input {
  display: none;
}

JavaScript (使用jQuery):

$('#file-upload').on('click', function() {
  $('#file-input').click();
});
 
$('#file-input').on('change', function() {
  var fileName = $(this).val().split('\\').pop();
  $('#file-name').val(fileName);
});

这段代码创建了一个不可编辑的文本框来显示文件名，并创建了一个自定义的按钮来触发文件选择。当用户点击"选择文件"按钮时，隐藏的input file会被点击，用户选择文件后，文件名会显示在文本框中。

在前端开发中，使用 jQuery 结合 Ajax 和 Json 可以方便地进行数据的异步获取和交互。以下是一个简单的例子，展示了如何使用 jQuery 发送一个 Ajax 请求，并处理返回的 JSON 数据。

HTML 部分：

<button id="fetchData">获取数据</button>
<div id="dataContainer"></div>

JavaScript 部分（使用 jQuery）：

$(document).ready(function() {
    $('#fetchData').click(function() {
        $.ajax({
            url: 'your-api-endpoint.com/data', // 替换为你的 API 接口
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 假设返回的 JSON 数据是一个对象列表
                var list = '<ul>';
                $.each(data, function(key, val) {
                    list += '<li>Item ' + key + ': ' + val + '</li>';
                });
                list += '</ul>';
                $('#dataContainer').html(list);
            },
            error: function(xhr, status, error) {
                console.error("An error occurred: " + status + "\nError: " + error);
            }
        });
    });
});

在这个例子中，当用户点击按钮时，会发送一个 GET 请求到指定的 URL 获取 JSON 数据，然后在成功获取数据后遍历这些数据并将其显示在页面上的一个无序列表中。如果请求失败，它会在控制台输出错误信息。

Ajax（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术。它允许网页向服务器发送异步请求，从而更新部分网页内容而不需要重新加载整个页面。

以下是一个简单的Ajax请求示例，使用JavaScript和jQuery实现：

// 使用jQuery发送Ajax GET请求
$.ajax({
    url: 'your-server-endpoint', // 服务器端点URL
    type: 'GET', // 请求类型，可以是GET或POST
    dataType: 'json', // 期望从服务器返回的数据类型
    success: function(response) {
        // 请求成功后的回调函数
        // 例如，更新DOM元素
        $('#result').text(response.message);
    },
    error: function(xhr, status, error) {
        // 请求失败后的回调函数
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

在这个例子中，我们使用jQuery的$.ajax()函数发送一个异步GET请求到服务器端点。成功获取响应后，我们通过更新DOM中的元素来反映这个变化。如果请求失败，我们会在控制台打印出错误信息。

注意：确保在你的项目中包含了jQuery库，否则上述代码将不能正常工作。

在Vue中，通常推荐使用原生的JavaScript进行AJAX请求，因为Vue.js有自己的数据流处理方式。但如果你确实需要使用jQuery进行AJAX请求，可以在Vue的生命周期钩子中进行。

以下是一个使用jQuery的AJAX请求在Vue组件中的例子：

<template>
  <div>
    <div v-if="dataLoaded">
      <!-- 这里渲染你的数据 -->
      {{ data }}
    </div>
    <div v-else>
      <!-- 加载中的状态 -->
      Loading...
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: null,
      dataLoaded: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      $.ajax({
        url: '你的后端API地址',
        type: 'GET',
        dataType: 'json',
        success: (response) => {
          this.data = response;
          this.dataLoaded = true;
        },
        error: (xhr, status, error) => {
          console.error('An error occurred:', status, error);
        }
      });
    }
  }
};
</script>

在这个例子中，我们在Vue组件的mounted生命周期钩子中调用了loadData方法，该方法使用jQuery的$.ajax函数从后端API获取数据。成功获取数据后，我们更新组件的本地状态，并在模板中显示数据。

请注意，在现代的前端开发中，建议尽可能避免使用jQuery。如果你的项目中有其他依赖于jQuery的库或代码，除此之外，尽可能使用原生的Fetch API或者axios进行HTTP请求。

使用Ajax向后端传递参数通常涉及创建一个XMLHttpRequest对象，设置请求的方法、URL以及任何需要发送的参数，然后发送请求。以下是一个使用Ajax向后端发送数据的示例代码：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
// 这里使用POST方法，如果需要，也可以使用GET
xhr.open('POST', 'your-backend-endpoint.php', true);
 
// 设置请求头，这里设置为JSON内容类型
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 发送数据
xhr.send(JSON.stringify({
    key1: 'value1',
    key2: 'value2'
}));
 
// 监听请求完成
xhr.onload = function() {
    if (xhr.status === 200) {
        // 请求成功
        console.log(xhr.responseText);
    } else {
        // 请求出错
        console.error('Error: ' + xhr.status);
    }
};
 
// 监听错误
xhr.onerror = function() {
    console.error('Network Error');
};

在这个例子中，我们使用POST方法向服务器发送了一个JSON对象。你可以根据实际需求修改URL、HTTP方法、发送内容的格式以及发送的数据。