AJAX-day03-AJAX进阶

在AJAX进阶中，我们将会学习到更多的AJAX相关的知识，包括如何处理错误、如何使用JSONP进行跨域请求、以及如何使用AJAX上传文件等内容。

1. 错误处理

在AJAX中，我们可以使用onerror和onreadystatechange事件来处理错误。

var request = new XMLHttpRequest();
request.open("GET", "http://example.com/missing", true);
 
request.onerror = function() {
  console.log("There was a network error.");
};
 
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    if (request.status == 404) {
      console.log("The resource was not found.");
    } else if (request.status == 500) {
      console.log("There was a server error.");
    }
  }
};
 
request.send();

2. 使用JSONP进行跨域请求

JSONP是一种跨域请求的方法，它通过<script>标签的src属性发送请求，并在服务器端返回可执行的JavaScript函数调用。

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

3. 使用AJAX上传文件

在AJAX中，我们可以使用FormData对象来上传文件。

var formData = new FormData();
formData.append('file', fileInputElement.files[0]);
 
var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/upload');
 
request.onreadystatechange = function() {
  if (request.readyState == 4 && request.status == 200) {
    console.log("File uploaded successfully.");
  }
};
 
request.send(formData);

以上就是AJAX进阶的一些基本内容，实际上AJAX是非常强大而灵活的技术，还有很多高级的用法和技巧，需要我们在实践中逐渐去探索和掌握。