ajax介紹
問題：用戶注冊的時候，沒有，用戶名是否可用提示，導致用戶需要反復的提交表單，用戶體驗不好。
優化：用戶在書寫完用戶名，就有一個提示，告訴當前書寫的用戶名是否可用
Ajax 特點：
ajax 執行，不需要用戶控制，自動發送請求和接收響應
ajax 發送請求的時候，依然按照 http 協議
ajax 請求和響應，數據量小
總結什么是 ajax：自動發送請求，接受響應，數據量非常小，依然按照 http 協議做網絡的
傳輸，這個就是 ajax 技術。
獲取 XMLHttpRequest 對象（ajax 核心對象，ajax 引擎）
<script type="text/javascript">
//獲取 ajax 核心對象的方法
function getXHR() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5與其他瀏覽器不同
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
alert(getXHR());
</script>
向服務器發送請求——使用 open 方法和 send 方法
//測試使用 ajax 核心對象，發送請求
function test1(){
var xhr = getXHR();
xhr.open("get","/day18/ajax?username=張三",true);
//是什么：規定請求的類型、 URL 以及是否異步處理請求。
//當是post提交時請求參數放在send（）中
xhr.send();
}
test1();
接收服務器響應
//測試 ajax 獲取響應
function test2(){
var xhr = getXHR();
xhr.open("get","/day18/ajax?username=張三",true);
xhr.send();
/**
有一個妹子，半夜十二點，搜索一些東西
妹子（上海），百度的服務器（北京）（網絡延遲）
服務器發送響應到瀏覽器（網絡延遲）
為什么獲取響應數據沒有效果？
就是沒有考慮網絡延遲的問題
*/
//瀏覽器端準備接受響應
var data = xhr.responseText;
alert(data);
}
設置 onreadystatechange 事件執行函數（等待服務器響應）
//測試設置 ajax 等待服務器響應
function test3(){
//獲取核心對象
var xhr = getXHR();
//設置等待服務器響應
xhr.onreadystatechange=function(){
//4: 請求已完成，且響應已就緒,200: "OK"
if (xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
alert(data);
}
}
//發送請求
xhr.open("get","/day18/ajax?username=張三",true);
xhr.send();
}
test3()
ajax 小結（ajax 代碼怎么寫）
獲取核心對象
設置等待服務器響應
發送請求
onreadystatechange 屬性
是什么：
存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
第三個參數 async： True（異步） 或 False（同步）？
async false 所有的請求和響應，需要排隊執行（同步）
async true 所有的請求和響應,不需要排隊執行（插隊執行）（異步）
readyState 屬性
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
status 屬性
是什么：存儲響應狀態碼
jQuery Ajax 支持的 API
jQuery 對 Ajax 的使用提供了非常好的封裝，簡單的很！
load(url, [data], [callback]) 載入 HTML 代碼并插入至 DOM中，例如： $(“#mydiv”).load(“a.html”);
$.get(url, [data], [callback], [type]) Ajax 的 get 方式請求，一般用于獲取數據
$.post(url, [data], [callback], [type]) Ajax 的 post 方式請求，一般用于發送表單數據
$.getJSON(url, [data], [fn]) Ajax 跨域獲取服務器數據 例子： www.taobao.com 支付 www.alipay.com
$.getScript(url, [callback]) 載入并執行一個跨域的 js 文件
url：待載入頁面的URL地址
data：待發送Key/value參數。
callback：載入成功時回調函數。
type:返回內容格,xml,html,script,json,text,_default.
$.ajax(url, [settings])
$.ajax({
//請求方式 type: "POST",
//請求路徑 url: "${root}/ajax",
//發送參數? data: "name=John&location=Boston",
//返回的數據類型：
/**
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含的script標簽會
在插入dom時執行。
"script": 返回純文本 JavaScript 代碼。
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。
"text": 返回純文本字符串
*/
dataType: "text",
//回調函數
//請求成功的回調函數
success: function(msg){
alert( "Data Saved: " + msg );
},
//請求失敗的回調函數
error:function(msg){
alert( "Error");
}
});
</script>
get
/*
url:待載入頁面的URL地址
data:待發送 Key/value 參數。
callback:載入成功時回調函數。
type:返回內容格式， xml, html, script, json, text, _default。
*/
$.get("ajax", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded1: " + data);
});
?
post
/*
url:待載入頁面的URL地址
data:待發送 Key/value 參數。
callback:載入成功時回調函數。
type:返回內容格式， xml, html, script, json, text, _default。
*/
$.post("ajax", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded2: " + data);
});
});
JSON 技術
Json 介紹
Xml 問題：導致傳輸的數據量變大，解析和創建的操作復雜
JSON 字符串轉換為 JavaScript 對象：? eval() 或 JSON.parse() 方法
JavaScript對象轉換為 JSON 對象：? JSON.stringify()
java對象轉成JSON
