Ajax這種技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁面(即刷新）
一.實(shí)現(xiàn)同步流程：
1馍惹、得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
2怒竿、準(zhǔn)備/打開請(qǐng)求
open(請(qǐng)求類型GET/POST,請(qǐng)求的路徑,是否異步true/false);
3、發(fā)送請(qǐng)求
send(參數(shù)/null);
注：如果是get請(qǐng)求最楷，參數(shù)直接跟在請(qǐng)求路徑后面，send()方法中設(shè)置null;
如果是post請(qǐng)求，有參數(shù)則設(shè)置參數(shù)乡恕，無參數(shù)設(shè)置為null;
4、解析響應(yīng)數(shù)據(jù)
1俯萎、判斷響應(yīng)是否成功 status=200 （404=未找到資源;500=服務(wù)器異常;200=成功）
2傲宜、得到后臺(tái)響應(yīng)數(shù)據(jù)? responseText
例子：
<script type="text/javascript">
1、得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
console.log(xhr);
?2夫啊、準(zhǔn)備/打開請(qǐng)求? open(請(qǐng)求類型GET/POST,請(qǐng)求的路徑,是否異步true/false);
xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步請(qǐng)求
?3函卒、發(fā)送請(qǐng)求? send(參數(shù)/null);
xhr.send(null);
?4、解析響應(yīng)數(shù)據(jù)
if (xhr.status == 200) { // 1撇眯、判斷響應(yīng)是否成功 status=200
2报嵌、得到后臺(tái)響應(yīng)數(shù)據(jù)? responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
alert("失敗狀態(tài)碼：" + xhr.status + "，失敗原因：" + xhr.statusText);
}
</script>
二.實(shí)現(xiàn)異步流程：
1.得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
2.準(zhǔn)備/打開請(qǐng)求
open(請(qǐng)求類型get/post,請(qǐng)求的路徑熊榛，是否異步true/false);
3.發(fā)送請(qǐng)求
send(參數(shù)/null);
注：如果是get請(qǐng)求 锚国，參數(shù)直接跟在請(qǐng)求路徑后面，send()方法中設(shè)置null玄坦；
? ? ? ? 如果是post請(qǐng)求血筑，有參數(shù)則設(shè)置參數(shù)绘沉，無參數(shù)設(shè)置為null；
4.解析響應(yīng)數(shù)據(jù)：
? ? ? ? 1.判斷響應(yīng)是否成功? status=200? (404=未找到資源豺总；500=服務(wù)器異常车伞；200=成功連接)
? ? ? ? 2.得到后響應(yīng)數(shù)據(jù)? responseText
例子：
<script type="text/javascript">
1.得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
console.log(xhr);
2.準(zhǔn)備/打開請(qǐng)求 open（請(qǐng)求類型Get/post,請(qǐng)求的路徑，是否異步true/false）;
xhr.open("GET","js/data.json?uname=zhangsan$uage=10",true);//異步請(qǐng)求
3.發(fā)送請(qǐng)求? send（參數(shù)/null）喻喳；
shr.send(null);
//監(jiān)聽readystate事件? （0=尚未調(diào)用open·方法另玖； 1=已調(diào)用open方法未調(diào)用send方法，2=調(diào)用send方法沸枯，未接收到響應(yīng)日矫；3=接收到部分響應(yīng)；4=響應(yīng)完全接收）
xhr.onreadystatechange = function() {
//如果是異步請(qǐng)求绑榴，需要等待數(shù)據(jù)完全響應(yīng)再做處理
if(xhr.readyState == 4){
4.解析響應(yīng)數(shù)據(jù)? responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
}? else{
? ? ? console.log("失敗狀態(tài)碼：" + xhr.status + "哪轿，失敗原因：" + xhr.statusText);
????????????????}
? ? ? ? }
}
</script>
三.post請(qǐng)求
實(shí)現(xiàn)流程：
異步：
1、得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
2翔怎、準(zhǔn)備/打開請(qǐng)求
open(請(qǐng)求類型GET/POST,請(qǐng)求的路徑,是否異步true/false);
3窃诉、發(fā)送請(qǐng)求
send(參數(shù)/null);
注：如果是get請(qǐng)求，參數(shù)直接跟在請(qǐng)求路徑后面赤套，send()方法中設(shè)置null;
如果是post請(qǐng)求飘痛，有參數(shù)則設(shè)置參數(shù)，無參數(shù)設(shè)置為null;
4容握、解析響應(yīng)數(shù)據(jù)
1宣脉、判斷響應(yīng)是否成功 status=200 （404=未找到資源;500=服務(wù)器異常;200=成功）
2、得到后臺(tái)響應(yīng)數(shù)據(jù)? responseText
例子：
<script type="text/javascript">
?1剔氏、得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
console.log(xhr);
?2塑猖、準(zhǔn)備/打開請(qǐng)求? open(請(qǐng)求類型GET/POST,請(qǐng)求的路徑,是否異步true/false);
xhr.open("POST","js/data.json",true); // 異步請(qǐng)求
?由于Post請(qǐng)求的機(jī)制問題，需要模擬表單提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
?3谈跛、發(fā)送請(qǐng)求? send(參數(shù)/null);
xhr.send("uname=zhangsan&uage=10"); // post請(qǐng)求如果有參數(shù)羊苟，需要將參數(shù)設(shè)置在send方法中
監(jiān)聽readystate事件 （0=尚未調(diào)用open方法；1=已調(diào)用open方法未調(diào)用send方法感憾，2=調(diào)用send方法蜡励，未接收到響應(yīng)；3=接收到部分響應(yīng)阻桅；4=響應(yīng)完全接收）
xhr.onreadystatechange = function() {
?如果是異步請(qǐng)求凉倚，需要等待數(shù)據(jù)完全響應(yīng)后再做處理
if (xhr.readyState == 4) {
?4、解析響應(yīng)數(shù)據(jù)
if (xhr.status == 200) { // 1嫂沉、判斷響應(yīng)是否成功 status=200
?2稽寒、得到后臺(tái)響應(yīng)數(shù)據(jù)? responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
console.log("失敗狀態(tài)碼：" + xhr.status + "，失敗原因：" + xhr.statusText);
}
}
}
</script>
四.封裝
實(shí)現(xiàn)流程：同異步流程
例子：
<script type="text/javascript">
var obj = {
method:"GET",
url:"js/data.json?aa=11",
async:true,
data:{
uname:"zhangsan",
uage:18
},
success:function(data){
// 做想處理的事情
console.log(data);
}
};
function ajax(obj) {
// 1输瓜、得到核心對(duì)象XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
var params = formatParam(obj.data);
// 判斷是否是get請(qǐng)求，如果是則將參數(shù)拼接在url后面
if ("GET" == (obj.method).toUpperCase()) {
obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;
}
// 2、準(zhǔn)備/打開請(qǐng)求? open(請(qǐng)求類型GET/POST,請(qǐng)求的路徑,是否異步true/false);
xhr.open(obj.method,obj.url,obj.async);
// 判斷如果是POST請(qǐng)求
if ("POST" == (obj.method).toUpperCase()) {
// 由于Post請(qǐng)求的機(jī)制問題尤揣，需要模擬表單提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3搔啊、發(fā)送請(qǐng)求? send(參數(shù)/null);
xhr.send(params); // post請(qǐng)求如果有參數(shù)，需要將參數(shù)設(shè)置在send方法中
} else {
xhr.send(null); // get請(qǐng)求設(shè)置為null
}
// 判斷是同步請(qǐng)求還是異步請(qǐng)求
if (obj.async)? { // 異步請(qǐng)求
// 監(jiān)聽readystate事件 （0=尚未調(diào)用open方法北戏；1=已調(diào)用open方法未調(diào)用send方法负芋，2=調(diào)用send方法，未接收到響應(yīng)嗜愈；3=接收到部分響應(yīng)旧蛾；4=響應(yīng)完全接收）
xhr.onreadystatechange = function() {
// 如果是異步請(qǐng)求，需要等待數(shù)據(jù)完全響應(yīng)后再做處理
if (xhr.readyState == 4) {
// 處理響應(yīng)結(jié)果
callback();
}
}
} else { // 同步請(qǐng)求
// 處理響應(yīng)結(jié)果
callback();
}
// 處理響應(yīng)結(jié)果
function callback() {
// 4蠕嫁、解析響應(yīng)數(shù)據(jù)
if (xhr.status == 200) { // 1锨天、判斷響應(yīng)是否成功 status=200
// 2、得到后臺(tái)響應(yīng)數(shù)據(jù)? responseText
/* console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user); */
obj.success(xhr.responseText);
} else {
console.log("失敗狀態(tài)碼：" + xhr.status + "剃毒，失敗原因：" + xhr.statusText);
}
}
}
// formatParam({ uname:"zhangsan", uage:18 });
/*將對(duì)象格式的參數(shù)轉(zhuǎn)換成等號(hào)拼接的字符串*/
function formatParam(data) {
// 判斷參數(shù)是否存在
if (data == null) {
return "";
}
// 定義數(shù)組病袄，接收每個(gè)參數(shù)字符串
var params = [];
for(var key in data) {
// js中通過push()方法向數(shù)組的最后追加
params.push(key+"="+data[key]);
}
console.log(params.join("&"));
var param = params.join("&");// uname=zhangsan&uage=18
return param;
}
五jquery調(diào)用ajax方法
1.ajax。html
格式：$.ajax({});
參數(shù)：
type：請(qǐng)求方式GET/POST
url：請(qǐng)求地址url
async：是否異步赘阀，默認(rèn)是true表示異步
data：發(fā)送到服務(wù)器的數(shù)據(jù)
dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型
contentType：設(shè)置請(qǐng)求頭
success：請(qǐng)求成功時(shí)調(diào)用此函數(shù)
error：請(qǐng)求失敗時(shí)調(diào)用此函數(shù)
例子：
$.ajax({
type:"get", // 請(qǐng)求類型 GET/POST
url:"js/data.json", // 請(qǐng)求路徑
dataType:"json", // 預(yù)期服務(wù)器返回的數(shù)據(jù)類型
data:{ // 請(qǐng)求參數(shù)益缠，鍵值對(duì)的json對(duì)象
},
success:function(data){ // 請(qǐng)求成功時(shí)的回調(diào)函數(shù)
console.log(data);
}
});
post類型只需要將get改成post就可以了
2.get.html
1.請(qǐng)求get文件，忽略返回值
$.get('../js/cuisine_area.json');
2.請(qǐng)求get文件基公，傳遞參數(shù)幅慌，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.請(qǐng)求get文件,拿到返回值,請(qǐng)求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.請(qǐng)求get文件,傳遞參數(shù),拿到返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
例子：
/* 無參數(shù)，無返回值 */
// $.get("http://localhost:8080/jqueryAjax/ServletTest");
/* 有參數(shù)轰豆，無返回值 */
// $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});
/* 無參數(shù)胰伍，有返回值 */
/* $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
console.log(data);
}); */
/* 有參數(shù)，有返回值 */
/* $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
console.log(data);
}); */
post.html同上就是將get改成post
