ajax相關試題

什麼是ajax和json，它們的優缺點

ajax的全稱：Asynchronous Javascript And XML。

異步傳輸+js+xml。實現無刷新狀態更新頁面和異步提交

所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

Ajax實現過程：

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

優勢：

不須要插件支持；用戶體驗極佳；提高Web程序性能；減輕服務器和寬帶的負擔

缺點：

前進後退按鈕被破壞；搜索引擎的支持不夠；不利於SEO；開發調試工具缺少

JSON（JavaScript Object Notation）和XML同樣也是一種簡單文本格式。是一種比較流行的標準格式，是數據的載體，相對於XML，JSON更加易讀、更便於肉眼檢查。在語法的層面上，JSON與其餘格式的區別是在於分隔數據的字符，JSON中的分隔符限於單引號、小括號、中括號、大括號、冒號和逗號。

優勢：

   做爲一種數據傳輸格式，JSON 與 XML 很類似，可是它更加靈巧。

   JSON不須要從服務器端發送含有特定內容類型的首部信息。

缺點：

   語法過於嚴謹；   代碼不易讀；   eval 函數存在風險

ajax的編寫步驟

//第一 建立request對象
var xhr = (function() {
    var xhr;
    //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 
　　 if (window.XMLHttpRequest) {     
        //code for IE7+, Firefox, Chrome, Opera, Safari   
        xhr = new XMLHttpRequest();     
        //針對某些特定版本的mozillar瀏覽器的BUG進行修正     
        if (xhr.overrideMimeType) {     
            xhr.overrideMimeType("text/xml"); 
　　　　　}    
     } else if (window.ActiveXObject) {     
         // code for IE6, IE5
        try{
            xhr = new ActiveXObject("MSXML2.XMLHTTP");
        }catch(e){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } 
     }     
     return xhr;      　
})()

//第二 將這個對象設置爲開啓狀態
/*open(method,url,async) : 1請求方式   2請求地址   3是否異步 */
xhr.open("get", url, true);

//第三
//請求完成後的動做
if(xhr.onload){
    xhr.onload = function(){
        alert(xhr.responseText);
    }
} else {
    xhr.onreadystatechange = function(){//xhr.readyState  取值範圍  0  1  2  3  4
        if(xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
}

//第四 發送
/*send(string), string：僅用於 POST 請求*/
xhr.send();

若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：

語法：setRequestHeader(header,value)，向請求添加 HTTP 頭。header: 規定頭的名稱 value: 規定頭的值 

xhr.open("POST","ajax_test.asp",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("fname=Bill&lname=Gates");

tips:常見的請求頭（以表格中）

• application/x-www-form-urlencoded： 窗體數據被編碼爲名稱/值對。這是標準的編碼格式。
•  multipart/form-data： 窗體數據被編碼爲一條消息，頁上的每一個控件對應消息中的一個部分，這個通常文件上傳時用。
•  text/plain： 窗體數據以純文本形式進行編碼，其中不含任何控件或格式字符。

open(method,url,async),非異步請求

當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可：

xhr.open("GET","test1.txt",false);

xhr.send();

document.getElementById("myDiv").innerHTML=xhr.responseText;

得到來自服務器的響應，xhr.responseText 與 xhr.responseXML

responseText   得到字符串形式的響應數據。
responseXML    得到 XML 形式的響應數據。

來自服務器的響應並不是 XML，請使用 responseText 屬性。

onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

tips:onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

ajax請求攜帶cookie

xhr屬性withCredentials，默認值爲false，表示請求時不攜帶cookie

xhr.withCredentials = true； // 支持跨域發送cookies

寫一段ajax提交的js代碼

View Code

get請求和post請求的區別？

 GET 仍是 POST？ 與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

 然而，在如下狀況中，請使用 POST 請求： 

• 沒法使用緩存文件（更新服務器上的文件或數據庫）
•  向服務器發送大量數據（POST 沒有數據量限制） 
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

jQuery中的ajax：

$.ajax({  
    //默認狀況下，Ajax請求方式使用GET方法  
    type:"get|post",  
    //指定服務器返回的數據處理方式，默認狀況下將自動根據 HTTP 包 MIME 信息來智能判斷  
    //若是獲取的數據文件存放在遠程服務器上（域名不一樣，也就是跨域獲取數據），則須要使用jsonp類型。  
    //這種狀況下，$.ajax()再也不返回一個XMLHttpRequest對象，而且也不會傳遞事件處理函數，好比beforeSend。  
    dataType:"XML|html|json|jsonp|script|text",  
    //請求地址  
    url:"",  
    //是否異步，異步：全部的操做都是並行的，完成的順序沒有先後關係  
    async:true,  
    //默認狀況下，請求總會被髮出去，但瀏覽器有可能從他的緩存中調取數據。  
    //要禁止使用緩存的結果，能夠設置cache參數爲false。  
    cache:false,  
    //data選項既能夠包含一個查詢字符串，好比 key1=value1&key2=value2   
    //也能夠是一個映射，好比 {key1: 'value1', key2: 'value2'}  
    //發送到服務器的數據。將自動轉換爲請求字符串格式。如上則轉換爲：&key1=value1&key2=value2  
    data:"",  
    //data選項傳遞進來的數據是否轉換成一個查詢字符串  
    processData:"true"  
    //當datatype："jsonp"時有效，指定回調函數的參數名來取代默認的callback  
    jsonp:"callback_replace",  
    //爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。  
    jsonpCallback:"cb",  
    //當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。  
    success:function(data,successStr){},  
    //error 在請求出錯時調用。傳入XMLHttpRequest對象，錯誤信息以及一個異常對象（若是有的話）  
    // 一般 textStatus 和 errorThrown 之中，只有一個會包含信息  
    error :function(xhr, textStatus, errorThrown)},  
    //發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。  
    //這是一個 Ajax 事件。若是返回false能夠取消本次ajax請求。  
    beforeSend :fucntion(xhr){  
        this; // 調用本次AJAX請求時傳遞的options參數  
    },  
    //一個額外的"{鍵:值}"對映射到請求一塊兒發送。此設置被設置以前beforeSend函數被調用;  
    //所以，消息頭中的值設置能夠在覆蓋beforeSend函數範圍內的任何設置。  
    headers:"",  
    //一個mime類型用來覆蓋XHR的 MIME類型。  
    mimeType:"",  
    //用於響應HTTP訪問認證請求的用戶名  
    username:"",  
    //用於響應HTTP訪問認證請求的密碼  
    password:"",  
    //在請求成功以後調用。傳入返回的數據以及"dataType"參數的值。  
    //而且必須返回新的數據（多是處理過的）傳遞給success回調函數。  
    dataFilter:function(data,type){  
        var _data = data;  
        return _data;  
    },  
    //當請求完成以後調用這個函數，不管成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。  
    complete:function(xhr,textStatus){},  
    //一個以"{字符串:正則表達式}"配對的對象，用來肯定jQuery將如何解析響應，給定其內容類型。  
    contents:"",  
    //這個對象用於設置Ajax相關回調函數的上下文。以下，則success回調函數的上下文（this）爲這個DOM元素  
    context: document.body,  
    //讓回調函數內this指向這個對象（若是不設定這個參數，那麼this就指向調用本次AJAX請求時傳遞的options參數）。  
    //MIME發送信息至服務器時內容編碼類型,默認 application/x-www-form-urlencoded   
    contentType:,  
    //Ajax請求是限時的，因此錯誤警告被捕獲並處理後，能夠用來提高用戶體驗設置請求超時時間（毫秒）。此設置將覆蓋全局設置。  
    //請求超時這個參數一般就保留其默認值，要不就經過jQuery.ajaxSetup來全局設定，不多爲特定的請求從新設置timeout選項。  
    timeout:"",  
    //默認： 取決於數據類型。  
    //內容類型發送請求頭，告訴服務器什麼樣的響應會接受返回。若是accepts設置須要修改，推薦在$.ajaxSetup()方法中作一次。  
    accepts:"",  
    //一個數據類型對數據類型轉換器的對象。每一個轉換器的值是一個函數，返回響應的轉化值  
    converters: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML},  
    //(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件，  
    //如 ajaxStart 或 ajaxStop 可用於控制不一樣的 Ajax 事件。  
    global:true,  
    //容許給<script>標籤的請求設定一個特定的字符集，用於script或者jsonp相似的數據。  
    //只有當請求時dataType爲"jsonp"或"script"，而且type是"GET"纔會用於強制修改charset。一般只在本地和遠程的內容編碼不一樣時使用。  
    scriptCharset："utf-8", 
    //一對「文件名-文件值」在本機設置XHR對象。例如，若是須要的話，你能夠用它來設置withCredentials爲true的跨域請求。
    xhrFields: {withCredentials: true},
　　//默認： 同域請求爲false 跨域請求爲true若是你想強制跨域請求（如JSONP形式）同一域，設置crossDomain爲true。這使得例如，服務器端重定向到另外一個域
    crossDomain: true,
}); 

  jquery中ajax 跨域攜帶COOKIE

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    dataType: 'jsonp',
    xhrFields: {withCredentials: true},
    crossDomain: true,
})

服務器端設置cors跨域：

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");

tips：此外zepto中ajax請求參數配置基本與jquery一致

其餘的ajax請求：

Axios是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。API：http://www.cnblogs.com/fanlinqiang/p/7756474.html
這裏要注意的是：axios默認提交數據的格式是json， 即： 

Fetch API它被定義在BOM的window對象中，你能夠用它來發起對遠程資源的請求。 該方法返回的是一個Promise對象，讓你可以對請求的返回結果進行檢索。
　　API：http://www.cnblogs.com/fanlinqiang/p/7954354.html

application/json;charset=utf-8

 

JSON.stringify報錯

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 't'
    |     property '_cfg' -> object with constructor 'Object'
    --- property 'canvas' closes the circle"

緣由是：對象有一個循環引用

解決方法：

                var cache = [];
                var str = JSON.stringify(data, function(key, value) {
                    if (typeof value === 'object' && value !== null) {
                        if (cache.indexOf(value) !== -1) {
                            // Circular reference found, discard key
                            return;
                        }
                        // Store value in our collection
                        cache.push(value);
                    }
                    return value;
                });
                cache = null; // Enable garbage collection