jQuery中的ajax
JQuery中的ajax（常用方法及实例）
jquery对Ajax操作进行了封装，在JQuery中，$.ajax()方法属于最底层的方法，第二层为$.load（）、$.get（）、$.post（），其中$.get ( ) 和$.post ( )是最为常用的，在这里为首要介绍。
JQuery中的 $.get() 方法详解：
$.get()方法使用 GET 方式来进行异步请求。
它的结构为： $.get( url , [data] , [ callback ] , [ type ])
| 参数名称 | 类 型 | 说 明 |
| url | String | 请求目的地的URL地址 |
| data（可选） | object | 要发送至目的地的数据，建议使用key/value的形式，数据会附加到请求的URL中 |
| callback（可选） | function | 调用ajax后的回调函数（当Response的回复状态为success时才调用），服务端返回的状态和数据会传递给该方法 |
| type（可选） | String | 服务器返回内容的格式，包括html，xml，script，json，text，_default，scrip等 |
在此特殊介绍一下 callback 这个参数
callback 一般的书写格式为
function（data，textStatus）
{
//data : 为服务器返回的具体数据
// textStatus: 服务器返回的请求状态，共有：success（常见），error（常见），notmodified，timeout四种
}
$.get()的一般使用格式：
1 $("#send").click(function(){ 2 $.get( 3 "servlet/php",//请求的服务器地址 4 { 5 "username": value, 6 "content":value 7 }, // Json方式传递请求数据 8 function（data,textStatus）{ 9 10 //具体回调内容（对data的处理） 11 }， 12 “text” 13 ) 14 })
同时 $.get() 方法在一些小数据传输中（不计较安全性）可以简用为
$.get ( " servlet?key=value " )
JQuery中的 $.post()方法详解：
$.post()方法使用 POST 方式来进行异步请求。
它的结构为： $.post( url , [data] , [ callback ] , [ type ])
| 参数名称 | 类 型 | 说 明 |
| url | String | 请求目的地的URL地址 |
| data（可选） | object | 要发送至目的地的数据，建议使用key/value的形式，数据不会附加到请求的URL中 |
| callback（可选） | function | 调用ajax后的回调函数（当Response的回复状态为success时才调用），服务端返回的状态和数据会传递给该方法 |
| type（可选） | String | 服务器返回内容的格式，包括html，xml，script，json，text，_default，scrip等 |
在此特殊介绍一下 callback 这个参数
callback 一般的书写格式为
function（data，textStatus）
{
//data : 为服务器返回的具体数据
// textStatus: 服务器返回的请求状态，共有：success（常见），error（常见），notmodified，timeout四种
}
$.post()的一般使用格式：
1 $("#send").click(function(){ 2 $.post( 3 "servlet/php",//请求的服务器地址 4 { 5 "username": value, 6 "content":value 7 }, // Json方式传递请求数据 8 function（data,textStatus）{ 9 10 //具体回调内容（对data的处理） 11 }， 12 “text” 13 ) 14 })
$.get()与$.post()方法的比较
1.GET请求会将参数跟在URL中进行传递，而POST请求则是将内容作为HTTP消息的实体内容发送给WEB服务器。
2.GET请求在数据传输量上有大小限制（通常不大于2KB），而POST请求则几乎不受限制（理论上）
3.GET请求的数据会在服务器的缓存中缓存起来，因此可以从浏览历史记录中读取这些数据，因此GET存在严重的安全性问题，而POST则不会
通常在使用中尽量优先选择post方式
具体基于javaWeb的servlet的ajax实例（post方式）：
html（含ajax）部分代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div> <div> <input type="text" name="texts" /> </div> <textarea class="content"></textarea> </div> <script tyep="text/javascript"> $(function(){ $("input[name=texts]").keyup(function(){ $string = $("input[name=texts]").val(); $.post("Ajaxtext", {"name": $string}, function(data,textStatus){ $(".content").html(textStatus+data); }, "text" ); }); }) </script> </body> </html>
servlet部分代码
@WebServlet("/Ajaxtext")
public class Ajaxtext extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Ajaxtext() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String s = request.getParameter("name");
response.getWriter().append(s);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
JQuery中的ajax（）方法（jquery中ajax的核心、最底层方法）
$.ajax() 方法是jquery 中最底层的ajax实现，post（）和get（）方法都是由它为基础封装而来。
它的结构为： $ajax ( options ) ,
其中options 这个参数包含了ajax方法所需要的所有请求设置及回调函数等信息，参数以key/value的形式存在，所有参数可选， 常用参数如下图：
| 参数名称 | 描述 |
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
