24 Ajax

Ajax

1.1 什么是 Ajax？

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的
网页开发技术。
ajax 是一种浏览器异步发起请求。局部更新页面的技术

1.2、javaScript 原生 Ajax 请求

原生的 Ajax 请求，
1、我们首先要创建 XMLHttpRequest 对象
2、调用 open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

<script type="text/javascript">
			//在这里使用javasc语言发起ajax请求，访问服务器AjaxServlet
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
				 var xmlhttprrequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
				xmlhttprrequest.open("GET","http://localhost:8081/11_json/ajaxServlet?action=javaScriptAjax",true);

// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlhttprrequest.onreadystatechange = function () {
					if (xmlhttprrequest.readyState == 4 && xmlhttprrequest.status == 200){

						var jsonObj = JSON.parse(xmlhttprrequest.responseText);

						//把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = "编号："+jsonObj.id + "姓名："+jsonObj.name;
					}
				}
				//3、调用send方法发送请求
				xmlhttprrequest.send();
			}

		</script>

创建一个 AjaxServlet 程序接收请求

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");

        Person person = new Person(1,"hh");

        //json格式的字符串
        Gson gson = new Gson();

        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}

1.3、JQuery 的 Ajax 请求(重点****)

四个 Ajax 请求方法
$.ajax 方法
$.get 方法
$.post 方法
$.getJSON 方法

一个表单序列化方法：serialize()表单序列化方法

如何使用上面的五个方法：
在 JQuery 中和 Ajax 请求有关的方法有四个

$.ajax 请求参数
url： 请求的地址
type : 请求的方式 get 或 post
data : 请求的参数 string 或 json
success: 成功的回调函数
dataType: 返回的数据类型 常用 json 或 text
下面的方法必须遵守参数的顺序

$.get 请求和$.post 请求
url:请求的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。

Jquery 的$.getJSON
url:待载入页面的 URL 地址

data:待发送 Key/value 参数。
callback:载入成功时回调函数。

表单的序列化
serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去我们很多不必要的工作。

由于$.get、$.post 和 getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

		<script type="text/javascript">
			$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					
					$.ajax({
						url:"http://localhost:8081/11_json/ajaxServlet",
						data:"action=jQueryAjax",
						type:"GET",
						success:function (data) {
							alert("服务器返回的数据是"+data);
							$("#msg").html("ajax编号："+data.id+"姓名"+data.name);
						},
						dataType:"json"
					});

				});

				// ajax--get请求
				$("#getBtn").click(function(){

					$.get("http://localhost:8081/11_json/ajaxServlet","action=jQueryAjax",function () {
						$("#msg").html("get编号："+data.id+"姓名"+data.name);
					},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					$.post("http://localhost:8081/11_json/ajaxServlet","action=jQueryAjax",function () {
						$("#msg").html("post编号："+data.id+"姓名"+data.name);
					},"json");
					
				});

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
					$.getJSON("http://localhost:8081/11_json/ajaxServlet","action=jQueryGetJSON",function () {
						$("#msg").html("post编号："+data.id+"姓名"+data.name);
					});

				});

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
                    $.getJSON("http://localhost:8081/11_json/ajaxServlet","action=jQuerySerialize&"+$("#form01").serialize(),function () {
						$("#msg").html("Serialize编号："+data.id+"姓名"+data.name);
					});
				});
				
			});
		</script>