jQuery_review之通过$.get()和$.post()方法来实现异步加载
浏览数：20 /
时间：2015年06月09日
$.get()和$.post()这两个方法，顾名思义，一个就是通过get方法来获取数据，另外一个通过post方法来获取数据。这两个方法在具体有什么区别呢？重点有三个方面的区别，第一个get传送的数据理论在2KB之内，post方法原则上是不受限制的。第二个方面，一个在地址栏上会显示当前的请求内容，这种在有用户名和密码的时候就不好了。另外一个是在请求体当中，这个虽然也不是很安全，但是至少要比GET方法要安全那么一点点了。第三个，其实get方法最初是用来设计请求静态内容的，而POST则是用来提交增删改数据的，只是后来的这个区分没那么明显而已了。
回头来说 $.get()和$.post这两个方法。这个两个方法都可以接受四个参数，第一个参数是告诉jQuery我要到什么地方去请求数据，第二个参数，是可选参数，是告诉jQuery我的请求数据是什么，这些请求数据会变成请求数据的一部分，主要是用于传递key/value的值到服务端进行处理。第三个参数是回调参数，回调参数只有在调用成功的时候才会调用。这里就有一个问题，如果回调不成功的话，应该怎么办？这时候就应该参考jQuery的全局方法中对于返回异常的处理了。最后一个参数，就是期望服务器传递回来的数据类型，这些数据类型包括但是不限于xml，html，json，script等等内容。尤其注意的是xml，xml这个东西其实和html是同源的，他们的老祖宗估计都是一个。所以，很多原本用于html的jquery方法，都是可以使用到xml上的，比如使用$()这个万能工厂，将返回的xml数据变成一个object对象，使用.find()来找到子元素，使用attr找到属性的值，使用.text()找到元素中的文本值。
还有一个要注意的是，前端写了期望后端发送的数据是xml，那么后端就应该按照前端的约定来发送数据：response.setContentType("text/xml;charset=UTF-8");
Server端的代码如下：
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String name = req.getParameter("name");
String address = req.getParameter("address");
StringBuffer sb = new StringBuffer();
sb.append("<div><span>hi! nice to meet you! ");
sb.append(name).append(",(");
sb.append(address).append("),");
sb.append("how are you getting along?</span></div>");
StringBuffer xmlSb = new StringBuffer();
xmlSb.append("<book>")
.append("<title>")
.append("No ventured No gained")
.append("</title>")
.append("<publish>")
.append("Chinses publish")
.append("</publish>")
.append("</book>");
//resp.setContentType("text/html;charset=utf-8");
resp.setContentType("text/xml;charset=utf-8");
resp.getWriter().print(xmlSb.toString());
}
前端的代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#getContentByAjax").click(function(){
//$.post("test",{name:"czz",address:"address"},callBack,"html");
//$.get("test",{name:"czz",address:"address"},callBack,"html");
$.get("test",{name:"czz",address:"address"},callBack,"xml");
});
function callBack(data,textStatus){
//$("#showText").html(data);
var title=$(data).find("title").text();
var publish = $(data).find("publish").text();
$("#showText").text(title+" "+publish);
}
});
</script>
</head>
<body>
<div id="showText"></div>
<input type="button" id="getContentByAjax" value="sendAjax">
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
