原生JS的Ajax技术：https://blog.csdn.net/young_1004/article/details/81941458
Jquery 是一个优秀的 js 框架，自然对原生 ajax 进行了封装，封装后的ajax的操作方法更为的简洁，功能更加强大，与ajax操作相关的 jquery 方法有如下几种，但在开发过程中经常使用的有三种
1.$.ajax([options])
2.load(url,[data],[callback])
3.$get(url,[data],[fn],[type])
4.$getJSON(url,[data],[fn])
5.$getScript(url,[callback])
6.$post(url,[data],[fn],[type])
1)$get(url,[data],[fn],[type])
2)$post(url,[data],[fn],[type])
其中：
url ：代表请求的服务器端地址。
data : 代表请求服务器端的数据（可以是key=value形式，也可以是json格式）
callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type:表示服务器返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text,json,html等。
3)$.ajax([options])
常用的option有如下：
async : 是否异步，默认异步 true
data : 发送到服务器端的数据（建议使用Json）
dataType : 服务器端返回的数据类型（常用text和Json）
success : 成功响应后执行的函数
type : 请求方式，POST/GET
实例
1：text格式
1、导包
2、jquery_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn1() {
//get异步访问
$.get("/WEB22/ajaxServlet2",//url地址
{"name":"zhangsan","age":"20"},//请求数据
function(data){//执行成功后的回调函数
alert(data);
},
"text"//返回的参数类型
);
}
function fn2() {
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器" onclick="fn1()"><br>
<input type="button" value="同步访问服务器" onclick="fn2()"><br>
</body>
</html>
ajaxServlet2
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得参数
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name="+name +"//"+"age="+age);
response.getWriter().write("success...");
}效果
2：json格式
1、jquery_ajax.html
function fn1() {
//get异步访问
$.get("/WEB22/ajaxServlet2",//url地址
{"name":"zhangsan","age":"20"},//请求数据
function(data){//执行成功后的回调函数
alert(data.name);
},
"json"//返回的参数要被解析的类型
);
}2、ajaxServlet2
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得参数
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name="+name +"//"+"age="+age);
//java代码只能返回json格式的字符串
response.getWriter().write("{\"name\":\"Tom\",\"age\":20}");
}效果
post方式参考上面。
解决中文乱码问题
response.setContentType("text/html;charset=UTF-8");
3.第三种提交方法
function fn1() {
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"Lucy","age":18},
success:function(data){
alert(data.name);
},
dataType:"json"
}
);
}
优势：async可以选择同步或异步，默认true异步。