JQuery_review implements asynchronous loading through the $. get () and $. post () methods.
$. Get () and $. post () are two methods. As the name suggests, one is to get data through the get method, and the other is to get data through the post method. What are the differences between the two methods? There are three key differences: the first get transfer data theory is within 2 kb, and the post method is not restricted in principle. In the second aspect, the current request content is displayed in the address bar, which is not good when there is a user name and password. The other is in the Request body. Although this is not very secure, it is at least a little safer than the GET method. Third, in fact, the get method was initially used to design the request for static content, while the POST method was used to submit the addition, deletion, and modification data, but the distinction later was not so obvious.
Let's look back at the $. get () and $. post methods. Both methods can accept four parameters. The first parameter is to tell jQuery where I want to request data. The second parameter is an optional parameter, it is used to tell jQuery what the request data is, and the request data will become part of the request data. It is mainly used to pass the key/value to the server for processing. The third parameter is the callback parameter, which is called only when the call is successful. There is a problem here. What should I do if the callback fails? At this time, you should refer to the jQuery global method for handling returned exceptions. The last parameter is the data type that the server expects to pass back. The data types include but are not limited to xml, html, json, script, and so on. In particular, xml, which is actually the same as html, is probably the same as their ancestor. Therefore, many jquery methods originally used in html can be used in xml. For example, the $ () Universal factory can be used to convert the returned xml data into an object. find () to find the child element, use attr to find the attribute value, and use. text () to find the text value in the element.
Another thing to note is that the front-end writes the data to be sent from the backend in xml format, so the backend should send the data according to the front-end Conventions: response. setContentType ("text/xml; charset = UTF-8 ");
The Server code is as follows:
@Overrideprotected 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("hi! nice to meet you! ");sb.append(name).append(",(");sb.append(address).append("),");sb.append("how are you getting along?");StringBuffer xmlSb = new StringBuffer();xmlSb.append("
") .append("
") .append("No ventured No gained") .append("") .append("
") .append("Chinses publish") .append("
") .append("
");//resp.setContentType("text/html;charset=utf-8");resp.setContentType("text/xml;charset=utf-8");resp.getWriter().print(xmlSb.toString());}
The front-end code is as follows:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <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>