JQuery中使用Ajax请求的四种方法

1. 什么是AJAX?

• AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
• AJAX的实际意义是，不发生页面跳转、异步请求载入内容并改写局部页面内容的技术。
• AJAX也可以简单的理解为通过JS向服务器发送请求。
• AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。
• 同步处理与异步处理
  • 同步处理：
    • AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。
    • 这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。
  • 异步处理：
    • 而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
    • 使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

2.javaScript原生Ajax请求

如今基本不会有人用，在这里就不介绍了

3.JQuery的Ajax请求

• 四个Ajax常用请求方法（一共有六个方法）
  • $.ajax方法
  • $.get方法
  • $.post方法
  • $.getJSON方法
• 一个表单序列化方法： serialize()表单序列化方法

方法一： $.ajax请求参数

jQuery.ajax(url,[settings])

• url: 请求的地址

• type : 请求的方式 get或post

• data : 请求的参数 string或json

• success: 成功的回调函数

• error: 失败的回调函数

• dataType: 返回的数据类型 常用json或text (默认text)

  •   <script type="text/javascript">
      	$(function() {
      		$("#btn").click(function() {
      			 $.ajax({
      				type : "POST",
      				url : "AjaxServlet",
      				data : "name=John&location=Boston",
      				success : function(msg) {
      					alert("Data Saved: " + msg);
      				},
      			    error:function(){
      				   alert("请求失败！");
      			    }
      			}); 
      		})
      </script>
    

  •   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      	request.setCharacterEncoding("UTF-8");
      	response.setContentType("text/html;charset=UTF-8");
    
      	String name = request.getParameter("name");
      	String location = request.getParameter("location");
      	System.out.println("name:"+name);
      	System.out.println("location:"+location);
      	
      	//返回值
      	response.getWriter().write("请求成功");
      }
    

剩下三种方法必须遵守参数的顺序

方法二、三：$.get请求和$.post请求

jQuery.get(url, [data], [callback], [type])
jQuery.post(url, [data], [callback], [type])

• url:请求的URL地址

• data:待发送 Key/value 参数。

• callback:载入成功时回调函数。

• type:返回内容格式，xml, html, script, json, text。

  •   <script type="text/javascript">
      	$(function() {
      		$("#btnOne").click(function() {
      			$.post("AjaxServlet","name=John&location=Boston",
      					function(re){
      						alert(re.name);
      					},
      			"json");
      		});
      		$("#btnTwo").click(function() {
      			$.get("AjaxServlet","name=John&location=Boston",
      				function(re){
      					alert(re.name);
      				},
      			"json");
      		});
      	})
      </script>
    

方法四：Jquery的$.getJSON（返回值是JSON类型）

jQuery.getJSON(url, [data], [callback])

• url:待载入页面的URL地址

• data:待发送 Key/value 参数。

• callback:载入成功时回调函数。

  •   <script type="text/javascript">
      	$(function() {
      		$("#btn").click(function() {
      			$.getJSON("AjaxServlet","name=John&location=Boston",
      				function(re){
      					alert(re.name);
      				}
      			);
      		});
      	})
      </script>