WEB資料傳輸——ajax加載資料

ajax的出現實作了前後端分離 記一些常用的ajax方法。

1、原生js實作全平台相容XMLHttpRequest對象

function getXHR(){
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏覽器暫不支援Ajax!");
            }
        }
    }
    return xhr;
}
           

2、ajax實作檔案上傳

<input type="file" id="in">
<script>
    var input=document.getElementById("in");
    formData=new FormData();
    formData.append("file".input[]);
    var url="";
    method="POST";
    function ajax(url, method, data){
        var xhr = null;
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("您的浏覽器暫不支援Ajax!");
                }
            }
        }
        xhr.onerror = function(e){
            console.log(e);
        }
        xhr.open(method, url);
        try{
            setTimeout(function(){
                xhr.send(data);
            });
        }catch(e){
            console.log('error:',e);
        }
        return xhr;
    }
           

3、ajax請求圖檔

var xhr = new XMLHttpRequest(),
        url = ".png";
    xhr.open("GET", url);
    xhr.responseType = "newimg";
    xhr.onload = function(){
        if(this.status == ){
            var newimg = this.response;
            var img = document.createElement("img");
            img.src = window.URL.createObjectURL(newimg);//這裡blob依然占據着記憶體
            img.onload = function() {
                window.URL.revokeObjectURL(img.src);//釋放記憶體
            };
           

4、ajax請求文本

var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:8080/Information/download.jsp?data=node-fetch.js");
xhr.responseType = "blob";
xhr.onload = function(){
  if(this.status == ){
    var blob = this.response;
    var reader = new FileReader();
    reader.readAsBinaryString(blob);//該方法已被移出标準api,建議使用reader.readAsText(blob);
    reader.onload=function(){
      document.body.innerHTML = "<div>" + this.result + "</div>";
    }
  }
}
xhr.send();
           

未完待續。。。。