json&&ajax

時間 2020-10-21

標籤 javascript php html java ajax 數據庫編程 json 跨域數組欄目 JavaScript 简体版

原文原文鏈接

Json&Ajax
Ajaxjavascript

1.爲何要使用Ajax
經過異步模式，提高了用戶體驗
優化了瀏覽器和服務器之間的傳輸，減小了沒必要要的數據往返，減小了帶寬佔用
Ajax引擎在客戶端運行，承擔了一部分原本由服務器承擔的工做，從而減小了大用戶量下的服務器負載php

缺點：
不支持瀏覽器back按鈕
安全問題，ajax暴露了與服務器交互的細節
對搜索引擎的支持比較弱
2.什麼是XMLHttpRequest對象
是一種異步請求的技術，它是Ajax的核心
應用：
能夠向服務器提出請求並處理響應，而不阻塞用戶
能夠在頁面加載以後進行頁面的局部更新html

3.如何使用Ajax
第一步：建立XMLHttpRequest對象，也就是建立一個異步調用對象
第二步：建立一個新的HTTP請求，並制定該HTTP請求的方法，URL
第三步：設置響應HTTP請求狀態變化的函數
具體步驟：
第一步：建立XMLHttpRequest對象java

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
</head>
<body>
    <script type=「text/javascript」>
    //封裝通用的xhr對象，兼容各個版本
    function creatXHR(){         //判斷瀏覽器是否將XMLHTTPRequest做爲本地對象實現，針對IE7，firefox，opera等
        if(typeof XMLHttpRequest != 「undefined」){
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject !=「undefined」){
            //將全部可能出現的版本放在一個數組中
            var xhrArr =[‘Microsoft.XMLHttp’, ‘ MSXML2.XMLHttp.6.0’ ,‘     MSXML2.XMLHttp.5.0’,‘ MSXML2.XMLHttp.4.0’,‘ MSXML2.XMLHttp.3.0’,‘ MSXML2.XMLHttp.2.0’];
            //須要遍歷建立XMLHttpRequest
            var len = xhrArr.length;
            for(var i =0;i<len;i++){
                try{
                //建立XMLHttpRequest對象
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }
                catch(ex){
                }
                return xhr;
            }else{
                throw new Error(‘No XHR object availabel.’);
            }
        }
    }
    var xhr = createXHR();
    </script>
</body>
</html>

第二步：如何建立HTTP請求
open方法：open(method,url,async)
功能：建立HTTP請求，規定請求類型，URL以及是否異步處理請求
method:請求類型，get或post，默認get
url：文件在服務器的位置
async：true（異步）或者false
⚠：open方法不會向服務器發送真正的請求，它至關於初始化請求並準備發送只能向同一個域中使用相同協議和端口的URL發送請求，不然會由於安全緣由報錯
url參數是open()方法中惟一一個必需要指定的參數，用來設置服務器上文件的地址，該文件能夠是任何類型的文件，如.txt 和 .xml，或者服務器腳本文件，如.asp和.phpajax

important：
get與post的區別
與post相比，get更簡單也更快，而且在大部分狀況下都能用，然而，在如下狀況中，必須使用post請求
1.沒法使用緩存文件（更新服務器上的文件或數據庫）
2.向服務器發送大量數據（post沒有數據量限制）
3.發送未知字符的用戶輸入數據庫

同步和異步的區別：
同步：提交請求－－>等待服務器處理－－>處理完畢返回這個期間客戶端瀏覽器不能幹任何事
異步：請求經過事件觸發－－>服務器處理（這時候瀏覽器仍然能夠作其餘事情）－－>處理完畢編程

async：
是一個boolean值，默認爲true表明異步json

第二步建立請求：
xhr.open(「get」,./server/slider.json」.true);跨域

如何使用Ajax
1.建立XMLHttpRequest對象，也就是建立一個異步調用對象
2.建立一個新的HTTP請求，並指定該HTTP請求的方法，URL
3.設置響應HTTP請求狀態變化的函數
分爲三步：請求發送服務器－－服務器根據請求生成響應－－傳回給XHR對象數組

第三步：

//響應xmlhttprequest對象狀態變化，onreadystatechange在readystatechange屬性發生////改變時觸發
xhr.onreadystatechange ＝ function(){
    //異步調用成功,響應內容解析完成(xhr.ready===4,status>=200表示異步調用成／////功，能夠在客戶端調用，304表示請求資源沒有被修改，表示以前請求成功過，並且和//上一次沒有發生改變
    if(xhr.ready===4){
        if(xhr.status >=200 && xhr.status <300) || xhr.status ===304){
        //得到服務器返回的數據
        
        }
    }
}

如何發送
語法：send(string)
功能：把請求發送給服務器
參數說明：string僅用於post請求

⚠：僅在post請求時能夠傳入參數，不須要發送null，在調用send方法以後請求被髮送服務器
如何添加HTTP頭
若是須要像HTML表單那樣POST數據，需使用setRequestHeader()來添加HTTP頭，而後在send()方法中規定但願發送的數據
語法：xmlhttp.setRequestHeader(header,value)
使用：xmlhttp.setRequestHeader(「Content-type」,」application/x-www-form-urlencoded」);
寫在建立請求後面
xhr.send(null);
xhr.setRequestHeader(「Content-type’
如何獲取異步調用的數據
在收到響應後相應數據會填充到XHR對象的屬性，有四個相關屬性會被填充

－responseText:從服務器進程返回數據的字符串形式
-responseXML：從服務器進程返回的DOM兼容的文檔數據對象
-status：從服務器返回的數字代碼，如404（未找到）和200（已就緒）
-status Text：伴隨狀態碼的字符串信息

json
什麼是json
json全稱是javascript對象表示法，它是一種數據交換的文本格式，而不是一種編程語言，用於讀取結構化數據，目的是取代繁瑣笨重的XML格式
json的語法規則

1簡單值：
簡單值使用和JS相同的語法，能夠在JSON中表示字符串，數值，Boolean值，和null
字符串必須用雙引號表示，不能使用單引號，數值必須以十進制表示，且不能使用NaN和infinity
⚠：JSON不支持JS中的特殊值undefined

2.對象：
JSON中對象的鍵名必須放在雙引號裏面，由於JSON不是JS語句，因此沒有末尾的分毫
⚠：同一個對象中不該該出現兩個同名屬性

3.數組
數組也是一種複雜的數據類型，表示一組有序的值的列表，能夠經過數值索引來訪問其中的值
⚠：數組或對象最後一個成員的後面，不能加逗號

JSON對象
JSON對象的兩個使用方法：
1.parse()
語法：JSON.parse()
功能：用於將JSON字符串轉化成JS可用的對象
2.stringify()
用於將一個值轉換爲字符串，該字符串應該符合JSON格式，而且能夠被JSON.parse()方法還原。把js的對象轉換成JSON格式的字符串
JSON對象總結
－JSON之因此流行，是由於能夠把JSON數據結構解析爲有用的JS對象
－JSON對象的stringify(()和parse()這兩個方法能夠分別把用JS對象序列化爲JSON字符串和把JSON字符串解析爲原生JS值
－JS的eval()相似於JSON.parse()方法，能夠將json字符串轉換爲json對象可是，eval()執行不符合JSON格式的代碼，有可能包含惡意代碼

data.JSON.parse(xhr.responseText)
jQuery的ajax方法
$.ajax()
$.ajax({
    url: 「./server/slider.json」,//請求地址
    type:」post」,                       //請求方式
    async:true            //同步異步
    dataType:」json」        //數據格式
    success:function(imgData){
        console.log(imgData);
    }
});                    //請求成功的回調
$.get()
$.post()
$.getJson()

什麼是跨域：
在用open這個方法的時候，有一個接口
同源策略：同源是指域名，協議，端口均相同
如何解決跨域：
1.跨域資源共享
2.使用JSONP：JSONP是應用JSON的一種新方法，也是一種跨域解決方法

JSONP由兩部分組成，回調函數和數據，回調函數是當響應到來時應該在        頁面中調用的函數，而數據就是傳入回調函數中的JSON數據
    JSONP的原理：直接使用XMLHttpRequest請求不一樣域上的數據時，是不能夠的，可是在頁面上引入不一樣域上的js腳本文件倒是能夠的，jsonp正是利用這個特性來實現的，步驟：1。經過script標籤引入js文件2.js文件載入成功後3.執行咱們在url中指定的參數

2.修改document.domain
4.使用window.name
跨域封裝&&跨域url處理

function getJSONP(url,callback){
    if(!url){
        return;
    }
    //聲明一個數組來隨機生成函數名
    var a =[‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’],
        r1 = Math.floor(Math.random()*10),
        r2 = Math.floor(Math.random()*10),
        r3 = Math.floor(Math.random()*10),
        name = ‘getJSONP’ + a[r1]+a[r2]+a[r3],
        cbname = ‘getJSONP.’+name;
        //判斷url中是否還有問好
        if(url.indexOf(‘?’)===-1){//跨域url處理
            url+=‘?jsonp=‘ + cbname;
        }else{
            url+=‘&jsonp=‘ +cbname;
        }
        //動態建立script標籤
        var script = document.createElement(‘script’);
        //定義被腳本執行的回調函數
        getJSONP[name] = function(data){
            try{    
                callback && callback(data);
            }catch(e){
            }
            finally{
                delete getJSONP[name];
                script.parentNode.removeChild(script);
            }
        }
        //定義script中的src
        script.src = url;
        document.getElementByTagName(「head」)[0].appendChild(scrpt);
    }

getJSONP

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。