一障斋、 同步與異步
瀏覽網(wǎng)頁的時候兩種情況：
1、白屏 （同步）
2泪掀、頁面不刷新 （異步） 局部更新頁面不會全屏刷新
實現(xiàn)異步局部更新（不使用XMLHttpRequest）
Iframe
Iframe
表單提交后的相應頁面返回到iframe當中听绳，主頁面內(nèi)容不變
二、 原生ajax實現(xiàn)異步通信
var btn = document.getElementById('btn');
btn.onclick = function(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
//第一步：創(chuàng)建對象
//秘書出場
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//初始化
//準備好了
var url = './check.php?username='+username+"&password="+password;
xhr.open('get',url,true);//true代表異步异赫，false代表同步椅挣。
//這段代碼在xhr.send();執(zhí)行完之后才能執(zhí)行
//這件事做完了怎么辦
//事情辦完之后干什么
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(data == 1){
document.getElementById('showInfo').innerHTML = '用戶名或者密碼錯誤';
}else if(data == 2){
document.getElementById('showInfo').innerHTML = '登錄成功';
}
}
};
}
//實際的去做這件事
//去做這件事情
xhr.send(null);
}
check.php文件如下：
$username = $_GET['username'];
$password = $_GET['password'];
if($username == 'admin' && $password == '123'){
echo 2;
}else{
echo 1;
}
?>```
xhr.readyState
0：XMLHttpRequest對象創(chuàng)建完成
1：表示發(fā)送請求的動作準備好了，但是還沒有開始發(fā)送
2：表示已經(jīng)發(fā)送完成
3：服務器已經(jīng)返回了數(shù)據(jù)
4：服務器返回的數(shù)據(jù)已經(jīng)可以使用
xhr.status == 200 表示請求成功塔拳；
404表示沒有找到這個頁面或者數(shù)據(jù)
503表示服務器端發(fā)生錯誤
回調(diào)函數(shù)接到的數(shù)據(jù)類型
responseText
json html script
responseXML
json javascript object notation
相對于xml的優(yōu)點：數(shù)據(jù)量相對較小鼠证，解析比較方便。
###三蝙斜、jQuery的ajax語法
#####dataType為String類型
預期服務器返回的數(shù)據(jù)類型名惩。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷孕荠，比如XML
MIME類型就被識別為XML娩鹉。在1.4中，JSON就會生成一個JavaScript對象稚伍，而script則會執(zhí)行這個腳本弯予。隨后服務器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)个曙⌒饽郏可用值:
"xml": 返回 XML 文檔，可用 jQuery 處理垦搬。
"html": 返回純文本 HTML 信息呼寸；包含的script標簽會在插入dom時執(zhí)行。
"script": 返回純文本 JavaScript 代碼猴贰。不會自動緩存結(jié)果对雪。除非設(shè)置了"cache"參數(shù)。'''注意：'''在遠程請求時(不在同一個域下)米绕，所有POST請求都將轉(zhuǎn)為GET請求瑟捣。(因為將使用DOM的script標簽來加載)
"json": 返回 JSON 數(shù)據(jù) 馋艺。
"jsonp": JSONP格式。使用 JSONP形式調(diào)用函數(shù)時迈套，如 "myurl?callback=?" jQuery 將自動替換 callback=后面的? 為正確的函數(shù)名捐祠，以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串
#####date為Object/String類型
發(fā)送到服務器的數(shù)據(jù)桑李。將自動轉(zhuǎn)換為請求字符串格式踱蛀。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換芙扎。必須為 Key/Value 格式星岗。如果為數(shù)組填大，jQuery 將自動為不同值對應同一個名稱戒洼。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 "&foo=bar1&foo=bar2"。