JSON
想要学习ajax，除了要会html,jQuery,javaScript（能够简单使用，或者看懂简单地代码就可以了）,我们还要了解什么是JSON。
JSON是一种数据结构，对于AJAX来说十分重要，是JavaScript Object Notation缩写，是一种轻量级的数据交换格式，你可以把他理解成同一首歌，你的格式是mp3, 而其他人的格式 m4a格式，是用来存储数据的一种形式
特点是：
- 易于程序员阅读和理解
- 易于计算机解析和生成
- 其实是JavaScript的子集，原生JavaScript支持JSON
那么它究竟长什么样子呢，笼统的说就是一个集合，有点像Java里Map，是键值对的格式
<script type="text/javascript">
var student = {
name:'小明',
age:23,
print:function(){
console.log(this.name+"----"+this.age)
}
}
// 它甚至可以是个数组
List<Student>: [{},{}]
[
{
"id" : 12,
"name" : "java1711",
"age" : 20,
"gender" : "男"
}
,
{
"id" : 13,
"name" : "java1712",
"age" : 21,
"gender" : "女"
}
]
</script>
我们可以看到，JSON数据可以存放键值对，其中的值可以使数字，字符串格式，甚至可以是个方法，就像上面的那个 print属性就是一个方法属性。
Jason使用的规则是规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null
Ajax
看到这里了，相信你已经对JSON有一定简单地了解了，毕竟笔者写的不深，希望你能看懂。
说道ajax，有了解的人就会想到异步请求，局部刷新，接下来笔者就来说说个人见解，希望抛砖引玉：
什么是异步请求，什么是同步请求呢
同步请求：换个大家都能听懂的说法，你在吃饭，嘴里塞满了食物，那么你想说话的话，是不是得等把食物咽下去才能开口？将理论放进例子，将服务器比作你的嘴，将食物比作一个请求，将说话也比作一个请求，很明显，你需要处理完一个请求，下一个请求才能够再次执行，这就是同步请求。
异步请求：继续举例子，你边吃饭边玩手机，是不是多线程工作（笑），双方是不是一点也不耽误（举例子是一回事，但是咱并不推荐吃饭玩手机），同样将吃饭比作一个请求，将玩手机也比作一个请求，我们作为浏览器，是不是可以在执行一个请求的时候，无论是否相应，都可以提交另一个请求，这就是异步请求。
总结一下：
同步请求，相当于排队进行打饭
异步请求：你传输吧，我去做我的事了，你传输完了告诉我一声。
Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，
在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，
从而执行自定义的js逻辑代码完成某种页面功能
Jquery的Ajax技术（重点）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种
1）
.
g
e
t
(
u
r
l
,
[
d
a
t
a
]
,
[
c
a
l
l
b
a
c
k
]
,
[
t
y
p
e
]
)
后
面
三
个
是
可
选
的
可
以
没
有
2
）
.get(url, [data], [callback], [type]) 后面三个是可选的可以没有 2）
.get(url,[data],[callback],[type])后面三个是可选的可以没有2）.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax( { option1:value1,option2:value2… } );
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
<script>
$(function(){
$.ajax({
url:'这里写上你出发这个function后触发的请求网址',
type:'Post',//这里填post或者get
dataType:{'age':18}, // 这里传递要发送的数据
success:function(obj){ // success你可以理解为上面请求成功了执行这个方法，可以传递参数，可以不传递
console.log(obj);
}
});
}
)
</script>
使用实践
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
<option>--请选择--</option>
</select>
<select id="cityId" onchange="selectArea(this)">
<option>--请选择--</option>
</select>
<select id="areaId">
<option>--请选择--</option>
</select>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery.js"></script>
<script>
$(function (){
$.ajax({
url:'<%=request.getContextPath()%>/location?method=selectProvince',
type:'POST',
dataType:'json',
success:function (jsonObj){
console.log(jsonObj);
$(jsonObj).each(function (){
$('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>');
});
}
})
});
function selectCity(obj){
console.log(obj);
var provinceId = $(obj).val();
$.ajax({
url: '<%=request.getContextPath()%>/location?method=selectCity',
type: 'post',
dataType: 'json',
data: {'provinceId': provinceId},
success : function (jsonObj) {
console.log(jsonObj);
$('#cityId option :gt(0)').remove();
$(jsonObj).each(function (){
$('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>')
})
}
});
}
function selectArea(obj){
console.log(obj);
var cityId = $(obj).val();
$.ajax({
url:'<%=request.getContextPath()%>/location?method=selectArea',
type:'post',
dataType:'json',
data:{'cityId':cityId},
success:function (jsonObj){
$('#areaId option :gt(0)').remove();
$(jsonObj).each(function (){
$('#areaId').append('<option value="'+this.id+'">'+this.area+'</option>')
})
}
})
}
</script>
</body>
</html>
2369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
