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>