2024年前端最全Ajax进阶篇01---Ajax加强（含大量代码演示），零基础如何转行前端开发工程师

在学习Ajax进阶篇之前，我们需要对Ajax有一定的了解。Ajax，即“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页的技术。通过在后台与服务器交换数据，Ajax可以在不重新加载整个网页的情况下更新网页的部分内容。

以下是一些Ajax的进阶应用和示例代码：

1. 使用Ajax进行文件上传

var xhr = new XMLHttpRequest();
xhr.open("POST", "/file-upload", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log('Upload success');
  }
};
 
var data = new FormData();
data.append('file', fileInputElement.files[0]);
 
xhr.send(data);

2. 使用Ajax进行跨域请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
 
// 设置withCredentials为true可以允许跨域请求发送cookies
xhr.withCredentials = true;
 
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
 
xhr.send();

3. 使用Ajax进行JSONP请求（解决Ajax跨域问题的一种方法）

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);
 
// 回调函数
function handleResponse(data) {
  console.log(data);
}

4. 使用Ajax进行数据的实时更新（例如，实时显示网站的访客人数）

setInterval(function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/visitors-count", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById('visitorsCount').textContent = xhr.responseText;
    }
  };
  xhr.send();
}, 5000); // 每5秒钟发送一次请求

5. 使用Ajax进行跨域WebSocket通信（当需要实时双向通信时）

var ws = new WebSocket("ws://example.com/socket");
 
ws.onopen = function() {
  console.log('WebSocket connected');
};
 
ws.onmessage = function(event) {
  console.log('Received message: ' + event.data);
};
 
ws.onclose = function() {
  console.log('WebSocket closed');
};
 
// 发送消息
ws.send('Hello Server');

以上代码演示了Ajax的一些高级应用，对于零基础的学习者来说，需要花费一定的时间去理解和熟悉这些技术。在实际开发中，可以结合前端框架（如React, Vue, Angular）和后端框架（如Node.js）来应用这些技术，从而创建高性能和高可维护性的Web应用程序。