原生Ajax

Eric 發布于2019-08-21 11:32 / 692人閱讀

摘要：異步的創建一個對象以下如果是方法要給傳參數并且要設置請求頭等待服務器返回的內容工作狀態初始化正在發送發送完成正在解析完成請求返回的內容就被存放在這個屬性下面當狀態值發生改變的時候觸發服務器狀態狀態碼將獲取到的數據轉換成對象循環獲得到

Ajax 異步的JavaScript and XML

window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
    // 1.創建一個ajax對象
        // ie6以下 ActiveXObject("Microsoft.XMLHTTP")
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("get","getlist.php","true");
        xhr.send();
        /*
        如果是post方法要給send傳參數data,并且要設置請求頭;
        xhr.open("post","getlist.php","true");
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(data);
        */

        //等待服務器返回的內容
        /*
            readyState: ajax工作狀態 0初始化 1正在發送 2發送完成 3正在解析 4完成
            responseText: ajax請求返回的內容就被存放在這個屬性下面
            onreadystatechange：當readyState狀態值發生改變的時候觸發

            status：服務器狀態 http狀態碼
        */
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    
                    var data = JSON.parse(xhr.responseText); //將獲取到的數據轉換成對象
                    var list = document.getElementById("list");
                    var html = "";
                    for(var i = 0; i < data.length;i++){ //循環獲得到的新聞數組
                        html +="" + data[i].title + " [" + data[i].date + "]"
                    }

                    list.innerHTML = html;//innerHTML改變元素里的內容
                        
                }else{
                    alert("出錯了，error:" + xhr.status);
                };
            };
        }
    }
}

補充


//JSON.stringify()將對象轉換成字符串
var arr = [1,2,3];
alert(JSON.stringify(arr));

var arr = {left:100};
alert(JSON.stringify(arr));

//JSON.parse() 將數組字符串轉換成對象
var string = "[100,200,300]";
var date = JSON.parse(string);
alert(date[0]);

var string = "{"left":100}";//★JSON的鍵名必須用雙引號★
var date = JSON.parse(string);
alert(date.left);

云服務器 GPU云服務器原生ajax 原生php ajax ajax原生js實現原生js封裝ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86836.html

原生JS與jQuery對AJAX的實現

摘要：原生與對的實現一定義里這么解釋異步的和。二原生實現所有現代瀏覽器以及均內建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創建相應的內部服務錯誤，多為后臺錯誤。基本上通過發送的數據及傳回的數據就能定位問題所在了。原生JS與jQuery對AJAX的實現一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
原生JS封裝ajax以及request

摘要：一封裝原生的為類以及用法見之前的文章根據確定請求的頭部以及別的信息。二封裝實用性的類在項目中經常需要將進行封裝，使用類發起請求。請求不帶請求帶請求不帶請求帶請求不帶請求帶這個方法感覺可以再次進行封裝。完整代碼點擊查看以上。一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據url確定請求的頭部以及別的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 評論0 收藏0
原生javaScript實現Ajax 和 jQuery實現Ajax

摘要：作者后臺使用的是語言，所以這里以后臺為例子不影響學習一原生使用方法創建對象兼容處理處理低版本不兼容問題準備發送請求方式接口參數名參數值異步執行發送回調是表示數據解析完成，后臺處理完成了。是表示處理的結果是的。作者后臺使用的是php語言，所以這里以php后臺Api為例子,不影響學習Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.創建對象兼容處理 var ...

ssshooter 2019-08-23 17:03 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

newsning 2019-08-02 15:56 評論0 收藏0
原生JS封裝AJAX請求

摘要：一直在用方法來寫請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現請求，網上看了很多前輩們的關于請求的封裝方法，也借鑒了很多經驗，于是乎就出現了小弟的一個原生封裝的版本，希望大家看了之后能夠明白，下面一直在用jQuery方法來寫ajax請求，用的多了，不免對這其中是怎么實現的產生了興趣，于是乎，小弟閑來無聊研究了一下原生實現ajax請求，網上看...

hiyang 2019-08-30 13:08 評論0 收藏0