前言:学过JavaScript原生操作Ajax的都知道,那些操作太繁琐了,而且大多数都是重复的代码,如每次发起Ajax请求都要创建XMLHttpRequest。JQuery封装了Ajax,使得我们操作起来更加简洁。
提交Ajax请求
JQuery.ajax(options)是JQuery Ajax支持的底层实现,该方法返回创建的XMLHttpRequest对象。大部分时候开发者无需理会它返回的XMLHttpRequest对象那个,但在特殊情况下其可用于手动终止请求。该函数只需要一个options参数,此参数是一个形如{key1:val1,key2:val2…}的JavaScript对象,用于指定发送Ajax请求的各种选项,各选项的说明如下:
- contentType:指定发送请求到服务器时所使用的内容编码类型。默认为"applicaiton/x-www-form-urlencoded"。
- data:发送本次Ajax请求的请求参数。该选项可以是JavaScript对象或查询字符串。如果是JavaScript对象,JQuery会自动将其转化为查询字符串(除非将pocessData设为false)。当该选项值为形如{key1:val1,key2:val2…}的对象,且其中val为数组时,JQuery会自动将它们转换为多个请求参数,例如{foo:["bar1","bar2"]}将会被转换为'&foo=var1&foo=bar2'(traditional为true的情况下。默认情况下traditional值为false,会转换为'&foo[]=var1&foo[]=bar2')
- dataType:指定服务器响应的数据类型。如果不指定,JQuery会自动根据响应的MIME信息返回responseXML或responseText,并将响应传给回调函数对应的参数。该选项支持如下值:
xml,返回可使用jQuery处理的XML文档
html,返回HTML文本。该HTML文本里可以使用<script.../>标签包含JS脚本。
script,返回JS脚本,此时将禁止从浏览器缓存里加载信息。JQuery会自动执行服务器响应的JS脚本。
json,返回一个符合JSON格式的字符串,JQuery会将响应转换成JS对象。
jsonp。
text,返回普通文本响应。
- processData:指定是否需要处理请求数据。默认为true,如果data选项是一个JS对象,则jQuery会自动将其转换为查询字符串。指定为false,将不会转换。
示例1:客户端给服务器发送文本内容,服务器返回文本
jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery实现Ajax</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<%
String path=request.getSession().getServletContext().getContextPath();
%>
<script>
$(function () {
$("#but").click(function () {
var name=$("#name").val();
$.ajax({
//请求路径
url:"<%=path%>/ajaxServlet",
//请求方法
type:"post",
//参数
data:{
"name":name,
age:1
},
//接收的服务端响应数据的烈性
dataType:"text",
//服务端成功响应后的回调函数
success:function (msg) {
alert(msg);
},
//出现异常的处理函数
error:function () {
alert("出错了");
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="but" value="提交">
</body>
</html>
AjaxServlet:
package test;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String name=request.getParameter("name");
PrintWriter out=response.getWriter();
out.write("hello:"+name);
}
}
运行结果:
虽然形式不同,但其实和JavaScript发起Ajax请求实质是相同的,url和type相当于open(),data相当于send(),dataType:text相当于responseText,dateType:xml相当于responseXML.success相当于onreadystatechange最后成功状态的那次回调函数。
示例2:服务器向客户端返回XML
jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery实现Ajax</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<%
String path=request.getSession().getServletContext().getContextPath();
%>
<script>
$(function () {
$("#but").click(function () {
$.ajax({
//请求路径
url:"<%=path%>/ajaxServlet",
//请求方法
type:"post",
//接收的服务端响应数据的烈性
dataType:"xml",
//服务端成功响应后的回调函数
success:function (msg) {
alert(msg.getElementsByTagName("empname")[0].firstChild.nodeValue);
},
//出现异常的处理函数
error:function () {
alert("出错了");
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="but" value="提交">
</body>
</html>
AjaxServlet:
package test;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml");
String xml="<allEmps>\n" +
"<emp>\n" +
"<empno>1</empno>\n" +
"<empname>小明</empname>\n" +
"</emp>\n" +
"</allEmps>";
response.getWriter().write(xml);
}
}
运行结果:
示例3:服务器向客户端返回JSON
JQuery封装后的Ajax有接收类型为json,它直接封装了将服务器发送来的文本字符串转换为JSON对象的操作,所以我们不用再去解析字符串。
jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery实现Ajax</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<%
String path=request.getSession().getServletContext().getContextPath();
%>
<script>
$(function () {
$("#but").click(function () {
$.ajax({
//请求路径
url:"<%=path%>/ajaxServlet",
//请求方法
type:"post",
//接收的服务端响应数据的烈性
dataType:"json",
//服务端成功响应后的回调函数
success:function (msg) {
alert(msg.cities[0].name)
},
//出现异常的处理函数
error:function () {
alert("出错了");
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="but" value="提交">
</body>
</html>
AjaxServlet:
package test;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String str="{\"name\":\"浙江\",\"cityCount\":2,\"cities\":[{\"name\":\"宁波\",\"id\":1},{\"name\":\"杭州\",\"id\":2}]}";
response.getWriter().write(str);
}
}
运行结果:
使用POST和GET方式提交Ajax
使用post和get方式提交Ajax可以有更简洁的方法:
$.post(url,[data],[function],[dataType]);
$.get(url,[data],[function],[dataType])
- url:ajax请求路径。
- data:是一个JS对象,用于指定请求参数。
- function:服务器响应成功后的回调函数。该函数是一个形如function(data,status,jqXHR){...}的函数,其中data是服务器响应,status是服务器响应类型的描述信息,jqXHR表示发送异步请求的XMLHttpRequest对象。
- dataType:接收服务器的返回数据的类型,如text,xml,json,script,text。
示例1:使用post提交
jsp页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JQuery实现Ajax</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<%
String path=request.getSession().getServletContext().getContextPath();
%>
<script>
$(function () {
$("#but").click(function () {
$.post("<%=path%>/ajaxServlet",{"name":"小明","age":1},function (data,status) {
alert(data.name+status);
},"json");
});
});
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" id="but" value="提交">
</body>
</html>
AjaxServlet:
package test;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(urlPatterns= "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
System.out.println(request.getParameter("name"));
String str="{\"name\":\"浙江\",\"cityCount\":2,\"cities\":[{\"name\":\"宁波\",\"id\":1},{\"name\":\"杭州\",\"id\":2}]}";
response.getWriter().write(str);
}
}
运行结果:
使用get方式提交只要把jsp页面中的"post"修改为"get"即可。如果不需要对失败进行处理,那么以上的方法要比直接使用ajax()更加容易。