Ajax加强(xhr、XML、JSON、xhr上传文件)
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
以下是使用原生JavaScript进行Ajax请求,包括获取服务器响应的XML、JSON数据,以及上传文件的示例代码:
// 1. 获取XML数据
function getXML() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-xml-url', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var xml = xhr.responseXML;
// 处理XML数据
}
};
xhr.send();
}
// 2. 获取JSON数据
function getJSON() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-json-url', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
// 处理JSON数据
}
};
xhr.send();
}
// 3. 上传文件
function uploadFile() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
var fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
xhr.open('POST', 'your-upload-url', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 上传成功
}
};
xhr.send(formData);
}
这些函数可以直接调用以执行相应的Ajax操作。注意替换your-xml-url
, your-json-url
, 和 your-upload-url
为你的实际URL。对于上传文件,你需要在HTML中有一个文件输入元素<input type="file">
供用户选择文件。
评论已关闭