前端ajax，ajax下載，瀏覽器http請求一些見解
阿新 • • 發佈：2018-11-10
正如我們知道的前端ajax請求是以Web Api XMLHttpRequest為核心的。如果不瞭解ajax和 XMLHttpResquest的同學，點選連結自行了解～
分享一些ajax的另類用法
1. ajax請求檔案例子
2. ajax怎麼實現下載檔案？
3. ajax跨域請求中的options請求是什麼情況？
ajax請求檔案會發生什麼？
示例請求圖片程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta 當不使用 xhr.responseType = “blob”; 告知瀏覽器返回值型別是，瀏覽器會預設放回的是字串，把圖片內容當成字串。
URL請用允許跨域訪問的圖片，可以看到頁面顯示一張圖片，控制檯資訊為：
ajax怎麼實現下載檔案？
tip:這裡為了方便使用FileSaver.js ,具體用法自行檢視
程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<div id="result"></div>
<body>
<script src="./FileSaver.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "http://localhost:8080/static/shoes.jpg");
xhr.responseType = "blob";
xhr.onreadystatechange = () => {
if (xhr.readyState === 2) {
var headerO = xhr.getResponseHeader("Content-Length");
console.log(headerO)
}
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(xhr.response)
saveAs(xhr.response, "pretty image.png");
}
}
}
xhr.send();
</script>
</body>
</html>結果下載檔案成功。
ajax跨域請求中的options請求是什麼情況？
這裡分享一個MDN連結了，上面已經寫的很好了。
歡迎交流～