Ajax 學(xué)習(xí)記錄
一、ajax內(nèi)容簡介：
? ? (1)ajax的概念:局部刷新技術(shù)。不是一門新技術(shù)滑绒，是多種技術(shù)的組合。是瀏覽器端的技術(shù)隘膘。
? ? (2)ajax的作用:實現(xiàn)在當(dāng)前結(jié)果頁中顯示其他請求的響應(yīng)內(nèi)容疑故。
二、ajax簡單操作：
? ? (1)js下操作原生ajax:
? ? ? ? ①創(chuàng)建ajax引擎對象
????????var ajax;
? ? ? ? if(window.XMLHttpRequest){//火狐
????????????ajax=new XMLHttpRequest();
????????}else if(window.ActiveXObject){//ie
? ? ? ? ????ajax=new ActiveXObject("Msxml2.XMLHTTP");
????????}
? ? ? ? ②復(fù)寫onreadystatement函數(shù)
? ??????ajax.onreadystatechange=function(){
????????????//判斷Ajax狀態(tài)嗎
????????????if(ajax.readyState==4){
????????????????//判斷響應(yīng)狀態(tài)嗎
????????????????if(ajax.status==200){
????????????????????//獲取響應(yīng)內(nèi)容
????????????????????var result=ajax.responseText;
????????????????????//處理響應(yīng)內(nèi)容
????????????????????//獲取元素對象
????????????????????var showdiv=document.getElementById("showdiv");
????????????????????showdiv.innerHTML=result;
????????????????}else if(ajax.status==404){
????????????????????//獲取元素對象
? ? ? ? ? ? ? ? ? ? var showdiv=document.getElementById("showdiv");
????????????????????showdiv.innerHTML="請求資源不存在";
????????????????????}else if(ajax.status==500){
????????????????????????//獲取元素對象
????????????????????????var showdiv=document.getElementById("showdiv");
????????????????????????showdiv.innerHTML="服務(wù)器繁忙";
????????????????????}
? ? ? ? ? ? ? }else{
????????????????????//獲取元素對象
? ? ? ? ? ? ? ? ? ? ?var showdiv=document.getElementById("showdiv");
????????????????????showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
? ? ? ? ? ? ? ? ? ? ?}
????????????????}
????????//發(fā)送請求
????????ajax.open("get","ajax?name=qq&pwd=123",true);
????????ajax.send(null);
????????alert("哈哈");
}
（2）ajax的狀態(tài)碼
? ? ①ajax狀態(tài)碼:readyState：0,1,2,3,4弯菊。?4: 表示響應(yīng)內(nèi)容被成功接收
? ? ②響應(yīng)狀態(tài)碼:status 200:表示一切OK? ?404:資源未找到? ??500：內(nèi)部服務(wù)器錯誤
? ??③ajax的異步和同步:ajax.open(method,urL,async)
? ? ????async：設(shè)置同步代碼執(zhí)行還是異步代碼執(zhí)行
? ????? true代表異步纵势，默認(rèn)是異步
? ????? false代表同步
（3）get和post請求
? ? ? ①get請求將參數(shù)拼接在url中
? ? ? ②post請求參數(shù)需要在ajax.send(請求參數(shù));? 需要添加? ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
三、ajax使用json接收數(shù)據(jù)及后臺處理數(shù)據(jù)
（1）后端使用json 向js傳輸數(shù)據(jù)
? ?resp.getWriter().write(new Gson().toJson(h));? 導(dǎo)入gson jar包? ?
? ?百度連接：鏈接：https://pan.baidu.com/s/1c9ZnWYUO_DzlzotQYojxSA??提取碼：1111
（2）jsp頁面獲取json數(shù)據(jù)
? ??var result=ajax.responseText;????alert(result);????eval("var u="+result);
? ? 即可使用:u.xx獲取 內(nèi)容值
四、封裝
? ? 使用js封裝ajax代碼
? ??百度連接：鏈接：https://pan.baidu.com/s/1vLPhM4d-LQM0_-WKA31uPA? 提取碼：1111
五钦铁、使用JQuery封裝的AJAX方法
（1）引入jquery文件
$(document).ready(function(){
????$("button").click(function(){
????????$.ajax({url:"demo_test.txt",success:function(result){
????????$("#div1").html(result);
????????}});
????});
});
六软舌、
