jQuery学习
Ajax介绍
Ajax本身属于js内核中的一部分，jQuery是js的一个框架，是对js的封装，因此jQuery中也维护着Ajax的内容。
什么是同步，什么是异步？
- 同步现象
客户端发送请求到服务器，当服务器返回响应前，客户端处于等待卡死状态 - 异步现象
客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死
Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行任意操作，知道服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
重点
jQuery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的Ajax操作方法更简单，功能更强大，与Ajax操作相关的jQuery方法很多种，但开发中常用的有三种：
- $.get(url, [data], [callback], [type]);
- String url：待载入页面的url地址
- Map data（可选）：待发送key/value参数
- Function callback（可选）：载入成功时的回调函数
- String type（可选）：返回内容格式，xml，html，script，json，text，_default
- $.post(url, [data], [callback], [type]);
- $.ajax({option1:value1,option2:value2});
测试jQuery是否引入成功的代码
$(function(){
alert();
});
get提交和post提交的区别有三点
- 请求参数位置不同
- get提交不安全，post提交相对安全
- get提交限制大小，post提交不限制大小
jQuery的get和post提交
post提交不用担心中文乱码，因为方法已经帮我们解决了。
jQuery的ajax方法
$.ajax({option1:value1,option2:value2});
常用的option如下：
- async：是否异步，默认是true，代表异步
- data：发送到服务器的参数，建议使用json格式
- dataType：服务器端返回的数据类型，常用text和json
- success：成功响应执行的函数，对应的类型是function类型
- type：请求方式，GET/POST
- url：请求服务器端地址
jQuery的Ajax技术：三种请求方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function fn1(){
// get异步访问
$.get(
"/web-ajax/ajaxServlet2",// 访问的url地址
{"name":"张三","age":18},// json格式的请求参数
// 执行成功的回调函数
function(data){
alert(data.age);
},
// 返回数据的格式，也就是data的格式
"json"
);
}
function fn2(){
// post异步访问
$.post(
"/web-ajax/ajaxServlet2",// 访问的url地址
{"name":"张三","age":18},// json格式的请求参数
// 执行成功的回调函数
function(data){
alert(data.name);
},
// 返回数据的格式，也就是data的格式
"json"
);
}
function fn3(){
// ajax异步访问
$.ajax({
// 访问的url
url:"/web-ajax/ajaxServlet2",
// json格式的请求参数
data:{"name":"张三","age":18},
// 请求方式
type:"POST",
// 请求成功的回调函数
success:function(data){
alert(data.name);
},
// 请求失败的回调函数
error:function(){
alert("请求失败");
},
// 预期服务器返回的数据类型
dataType:"json",
// 是否异步，默认为true
async:true
});
}
</script>
</head>
<body>
<input type="button" value="Ajax的get访问" onclick="fn1()"><br>
<input type="button" value="Ajax的post访问" onclick="fn2()"><br>
<input type="button" value="Ajax的ajax访问" onclick="fn3()"><br>
</body>
</html>
