ajax不是一種新的編程語(yǔ)言碴卧，是指一種對(duì)網(wǎng)頁(yè)某部分進(jìn)行更新的技術(shù)弱卡，局部刷新，多個(gè)事件并行發(fā)生 住册，事件不會(huì)相互影響婶博，請(qǐng)求之后不刷新整張頁(yè)面，頁(yè)面不動(dòng)荧飞，只是刷新頁(yè)面的局部凡人。
它的核心對(duì)象是XMLHttpRequest 是一個(gè)JavaScript對(duì)象 存在瀏覽器差異。當(dāng)服務(wù)器端的響應(yīng)不是簡(jiǎn)單的字符串類型而是集合或者對(duì)象時(shí)叹阔，則無(wú)法將對(duì)象響應(yīng)給客戶端 這時(shí)候 就用到了json 需要將對(duì)象以json字符串的形式響應(yīng)給ajax挠轴。對(duì)應(yīng)響應(yīng)為對(duì)象類型的json字符串，響應(yīng)內(nèi)容不能直接使用耳幢，這時(shí)候需要將json字符串轉(zhuǎn)化為js對(duì)象才可以在js中使用：success：function（result）{
var user = $.parseJSON(result);// 將json字符串轉(zhuǎn)化為js對(duì)象
alert(user.id);//獲取js對(duì)象中的值
}
Paste_Image.png
1.fastjson將對(duì)象轉(zhuǎn)換為json
String json = JSONObject.toJSONStringWithDateFormat(user,"yyyy年MM月dd日");
2.將json輸出到后臺(tái)
HttpServletResponse resp = new ServletActionContext.getResponse();
// 設(shè)置響應(yīng)頭
resp.setContentType("application/json;charset=UTF-8");
resp.getWriter().print(json);
3.gson將 集合轉(zhuǎn)換json字符串
//Gson轉(zhuǎn)換對(duì)象為json字符串
/*String json2 = new Gson().toJson(user);
System.out.println(json2);*/
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
String json2 = gson.toJson(list);
System.out.println(json2);
4.ajax核心xhr get請(qǐng)求 及流程
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//給用戶名注冊(cè)失去焦點(diǎn)事件
$("#name").blur(function(){
var username = $(this).val();
//1.創(chuàng)建xhr
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.發(fā)送請(qǐng)求并傳遞參數(shù)
xhr.open("GET","/ajax_day1/user/checkUsername?username="+username);
xhr.send();
//3.處理響應(yīng)（完整正確的響應(yīng)）
xhr.onreadystatechange = function(){
//處理完整 正確
if(xhr.readyState==4 && xhr.status==200){
//alert(xhr.responseText);
$("#usernameMessage").text(xhr.responseText);
}
}
});
});
</script>
</head>
<body>
<form method="post" action="" enctype="application/x-www-form-urlencoded">
用戶名:<input type="text" id="name" name="name" /><span id="usernameMessage"></span><br/>
密碼:<input type="text" name="password" /><br/>
<input type="submit" value="提交" /><br/>
</form>
</body>
一些小知識(shí)點(diǎn)：
1.$("#usernameMessage").html("<font color='red'>"+result+"</font>");
2.<form method="post" action="" enctype="application/x-www-form-urlencoded">
注意：enctype
3.將json字符串轉(zhuǎn)為js對(duì)象 eval 與 append的運(yùn)用
//result 是一個(gè)json類型的字符串
//將json字符串轉(zhuǎn)為js對(duì)象|數(shù)組
var jsObject = eval("("+result+")");
var nameLi = $("<li></li>").text("姓名:"+jsObject.name);
var ageLi = $("<li></li>").text("年齡:"+jsObject.age);
var birLi = $("<li></li>").text("生日:"+jsObject.bir);
//添加
$("#ul").append(nameLi).append(ageLi).append(birLi);
//顯示
$("#ul").show(2000);
<body>
<input type="button" id="btn" value="通過(guò)ajax展示一個(gè)人"/><br/>
<ul id="ul" style="display: none;">
</ul>
</body>
5.Jquery框架封裝的ajax發(fā)送ajax請(qǐng)求
$.ajax
$.post
$.get
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
/* $("#btn").click(function(){
}); */
//live 既可以給頁(yè)面中原有的標(biāo)簽注冊(cè)事件 也可以給生成的標(biāo)簽注冊(cè)事件
$("#btn").live("click",function(){
//發(fā)送ajax異步請(qǐng)求
/* $.ajax({
type:"POST",
url :"/ajax_day2/user/findUser",
dataType:"JSON",//預(yù)期數(shù)據(jù)為json text/plain text application/json json text/xml application/xml xml
success:function(result){
$("#ul").empty().hide(1000);
console.log(result);
//當(dāng)服務(wù)器端的響應(yīng)類型設(shè)置為application/json時(shí) jquery框架自動(dòng)將json字符串轉(zhuǎn)換為js對(duì)象|數(shù)組
//當(dāng)服務(wù)器端沒(méi)有設(shè)置響應(yīng)類型 但是在ajax中設(shè)置了dataType屬性為json時(shí) Jquery框架也會(huì)自動(dòng)將結(jié)果轉(zhuǎn)換為js對(duì)象|數(shù)組
//注意:當(dāng)服務(wù)器端沒(méi)有設(shè)置響應(yīng)類型時(shí) 且 ajax函數(shù)中沒(méi)有設(shè)置dataType時(shí) result一定是json字符串 使用時(shí)需要轉(zhuǎn)為js對(duì)象|數(shù)組處理
//推薦:使用 后端服務(wù)器設(shè)置相應(yīng)類型 并且 前端ajax函數(shù)中設(shè)置dataType 屬性
var nameLi = $("<li></li>").text("姓名:"+result.name);
var ageLi = $("<li></li>").text("年齡:"+result.age);
var birLi = $("<li></li>").text("生日:"+result.bir);
$("#ul").append(nameLi).append(ageLi).append(birLi).show(2000);
}
}); */
/* $.get("/ajax_day2/user/findUser",function(result){
$("#ul").empty().hide(1000);
var nameLi = $("<li></li>").text("姓名:"+result.name);
var ageLi = $("<li></li>").text("年齡:"+result.age);
var birLi = $("<li></li>").text("生日:"+result.bir);
$("#ul").append(nameLi).append(ageLi).append(birLi).show(2000);
},"JSON"); */
$.post("/ajax_day2/user/findUser","name=zhangsan",function(result){
$("#ul").empty().hide(1000);
var nameLi = $("<li></li>").text("姓名:"+result.name);
var ageLi = $("<li></li>").text("年齡:"+result.age);
var birLi = $("<li></li>").text("生日:"+result.bir);
$("#ul").append(nameLi).append(ageLi).append(birLi).show(2000);
},"JSON");
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="展示一個(gè)人"/><br/>
<ul id="ul" style="display: none;">
</ul>
</body>
6.省市縣 三級(jí)聯(lián)動(dòng)
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//發(fā)送ajax請(qǐng)求加載所有省份信息
$.ajax({
type:"POST",
url:"user/queryProvinces",
dataType:"JSON",
success:function(result){
console.log(result);
//遍歷省份信息
/* $.each(result,function(i,province){
var poption = $("<option></option>").text(province.name).val(province.code);
$("#sheng").append(poption);
}); */
createOption(result, $("#sheng"));
//省的下拉列表改變
$("#sheng").change();
}
});
//當(dāng)省份的下拉列表改變
$("#sheng").change(function(){
$("#shi").empty();
//獲取當(dāng)前選中的option屬性的值 value
var provinceCode = $(this).val();
//console.log(provinceCode);
//發(fā)送ajax請(qǐng)求傳遞省份的編號(hào)到后臺(tái)
$.get("user/queryCitys",{"provinceCode":provinceCode},function(result){
/* $.each(result,function(i,city){
var coption = $("<option></option>").text(city.name).val(city.code);
$("#shi").append(coption);
}); */
createOption(result, $("#shi"));
//市的下拉列表改變
$("#shi").change();
},"JSON");
});
//當(dāng)市改變發(fā)送ajax其請(qǐng)求獲取當(dāng)前市下的所有縣
$("#shi").change(function(){
$("#xian").empty();
var cityCode = $(this).val();
//發(fā)送post請(qǐng)求根據(jù)市的編號(hào)查詢所有縣
$.post("user/queryAreas","cityCode="+cityCode,function(result){
/* $.each(result,function(i,area){
var xoption = $("<option></option>").text(area.name).val(area.code);
$("#xian").append(xoption);
}); */
createOption(result, $("#xian"));
},"JSON");
});
});
function createOption(result,parent){
$.each(result,function(i,res){
var coption = $("<option></option>").text(res.name).val(res.code);
parent.append(coption);
});
}
</script>
</head>
<body>
省:<select id="sheng"></select>
市:<select id="shi"></select>
縣:<select id="xian"></select>
</body>
