ajax不是一种新的编程语言，是指一种对网页某部分进行更新的技术，局部刷新，多个事件并行发生 ，事件不会相互影响，请求之后不刷新整张页面，页面不动，只是刷新页面的局部。
它的核心对象是XMLHttpRequest 是一个JavaScript对象 存在浏览器差异。当服务器端的响应不是简单的字符串类型而是集合或者对象时，则无法将对象响应给客户端 这时候 就用到了json 需要将对象以json字符串的形式响应给ajax。对应响应为对象类型的json字符串，响应内容不能直接使用，这时候需要将json字符串转化为js对象才可以在js中使用：success：function（result）{
var user = $.parseJSON(result);// 将json字符串转化为js对象
alert(user.id);//获取js对象中的值
}
Paste_Image.png
1.fastjson将对象转换为json
String json = JSONObject.toJSONStringWithDateFormat(user,"yyyy年MM月dd日");
2.将json输出到后台
HttpServletResponse resp = new ServletActionContext.getResponse();
// 设置响应头
resp.setContentType("application/json;charset=UTF-8");
resp.getWriter().print(json);
3.gson将 集合转换json字符串
//Gson转换对象为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请求 及流程
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//给用户名注册失去焦点事件
$("#name").blur(function(){
var username = $(this).val();
//1.创建xhr
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求并传递参数
xhr.open("GET","/ajax_day1/user/checkUsername?username="+username);
xhr.send();
//3.处理响应（完整正确的响应）
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>
一些小知识点：
1.$("#usernameMessage").html("<font color='red'>"+result+"</font>");
2.<form method="post" action="" enctype="application/x-www-form-urlencoded">
注意：enctype
3.将json字符串转为js对象 eval 与 append的运用
//result 是一个json类型的字符串
//将json字符串转为js对象|数组
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="通过ajax展示一个人"/><br/>
<ul id="ul" style="display: none;">
</ul>
</body>
5.Jquery框架封装的ajax发送ajax请求
$.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 既可以给页面中原有的标签注册事件 也可以给生成的标签注册事件
$("#btn").live("click",function(){
//发送ajax异步请求
/* $.ajax({
type:"POST",
url :"/ajax_day2/user/findUser",
dataType:"JSON",//预期数据为json text/plain text application/json json text/xml application/xml xml
success:function(result){
$("#ul").empty().hide(1000);
console.log(result);
//当服务器端的响应类型设置为application/json时 jquery框架自动将json字符串转换为js对象|数组
//当服务器端没有设置响应类型 但是在ajax中设置了dataType属性为json时 Jquery框架也会自动将结果转换为js对象|数组
//注意:当服务器端没有设置响应类型时 且 ajax函数中没有设置dataType时 result一定是json字符串 使用时需要转为js对象|数组处理
//推荐:使用 后端服务器设置相应类型 并且 前端ajax函数中设置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="展示一个人"/><br/>
<ul id="ul" style="display: none;">
</ul>
</body>
6.省市县 三级联动
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//发送ajax请求加载所有省份信息
$.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();
}
});
//当省份的下拉列表改变
$("#sheng").change(function(){
$("#shi").empty();
//获取当前选中的option属性的值 value
var provinceCode = $(this).val();
//console.log(provinceCode);
//发送ajax请求传递省份的编号到后台
$.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");
});
//当市改变发送ajax其请求获取当前市下的所有县
$("#shi").change(function(){
$("#xian").empty();
var cityCode = $(this).val();
//发送post请求根据市的编号查询所有县
$.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>
网友评论