【前端面試】談談你對jQuery中的ajax方法的瞭解
阿新 • • 發佈:2019-01-03
什麼是 AJAX?
AJAX = 非同步 JavaScript 和 XML(Asynchronous JavaScript and XML)。簡短地說,在不過載整個網頁的情況下,AJAX 通過後臺載入資料,並在網頁上進行顯示。
1. jquery ajax怎麼寫 ?
$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:true, //或false,是否非同步
data:{
name:'yang',age:25
},
timeout:5000, //超時時間
dataType:'json' , //返回的資料格式:json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log('傳送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('錯誤')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('結束')
}
})
**
2.原生javascript怎麼實現?
**
$('#send').click(function(){
//請求的5個階段,對應readyState的值
//0: 未初始化,send方法未呼叫;
//1: 正在傳送請求,send方法已呼叫;
//2: 請求傳送完畢,send方法執行完畢;
//3: 正在解析響應內容;
//4: 響應內容解析完畢;
var data = 'name=yang';
var xhr = new XMLHttpRequest(); //建立一個ajax物件
xhr.onreadystatechange = function(event){ //對ajax物件進行監聽
if(xhr.readyState == 4){ //4表示解析完畢
if(xhr.status == 200){ //200為正常返回
console.log(xhr)
}
}
};
xhr.open('POST','url',true); //建立連線,引數一:傳送方式,二:請求地址,三:是否非同步,true為非同步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可無
xhr.send(data); //傳送
});
3.它與$.post , $.get ,$.getJSON 有什麼不同?
\$.post,這個函式其實就是對\$.ajax進行了更進一步的封裝,減少了引數,簡化了操作,但是運用的範圍更小了。
\$.post簡化了資料提交方式,只能採用POST方式提交。只能是非同步訪問伺服器,不能同步訪問,不能進行錯誤處理。在滿足這些情況下,我們可以使用這個函式來方便我們的程式設計,它的主要幾個引數,像method,async等進行了預設設定,我們不可以改變的。
語法:
$.post(URL,data,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("資料: \n" + data + "\n狀態: " + status);
});
});
$.get,和$.post一樣,這個函式是對get方法的提交資料進行封裝,只能使用在get提交資料解決非同步重新整理的方式上,使用方式和上邊的也差不多。
語法:
$.get(URL,callback);
必需的 URL 引數規定您希望請求的 URL。
可選的 callback 引數是請求成功後所執行的函式名。
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("資料: " + data + "\n狀態: " + status);
});
});
$.getJSON,這個是進一步的封裝,也就是對返回資料型別為Json進行操作。裡邊就三個引數,需要我們設定,非常簡單:url,[data],[callback]。
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
});
4. jquery ajax中都支援哪些資料型別?
dataType
型別:String
預期伺服器返回的資料型別。如果不指定,jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷,比如 XML MIME 型別就被識別為 XML。
可用值:
- “xml”: 返回 XML 文件,可用 jQuery 處理。
- “html”: 返回純文字 HTML 資訊;包含的 script 標籤會在插入 dom 時執行。
- “script”: 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 “cache” 引數。注意:在遠端請求時(不在同一個域下),所有 POST 請求都將轉為 GET 請求。(因為將使用 DOM 的 script標籤來載入)
- “json”: 返回 JSON 資料 。
- “jsonp”: JSONP 格式。使用 JSONP 形式呼叫函式時,如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函式名,以執行回撥函式。
- “text”: 返回純文字字串
5..json 和 jsonp 的區別
jsonp(JSON with Padding) 是 json 的一種”使用模式”,可以讓網頁從別的域名(網站)那獲取資料,即跨域讀取資料。
JSON和JSONP雖然只有一個字母的差別,但其實他們根本不是一回事兒:
JSON是一種資料交換格式,而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域資料互動協議。
我們拿最近比較火的諜戰片來打個比方,JSON是地下黨們用來書寫和交換情報的“暗號”,而JSONP則是把用暗號書寫的情報傳遞給自己同志時使用的接頭方式。看到沒?一個是描述資訊的格式,一個是資訊 傳遞雙方約定的方法。