Ajax交互+Json数据传输

AJAX 请求

ajax是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

---

使用JavaScript语言发起Ajax请求，访问服务器AjaxServlet中JavaScriptAjax

1. 我们首先要创建XMLHttpRequest

var xmlhttprequest = new XMLHttpRequest();

2. 调用open方法设置请求参数

xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax","true")

4. 在send方法前绑定 onreadystatechange 事件，处理请求完成后的操作

每次当 readyState 改变时，就会触发 onreadystatechange 事件

属性	描述
onreadystatechange	存储函数（或函数名），每当readyState属性改变时，就会调用该函数
readyState	存有 XMLHttpRequest的状态。从 0 到 4 发生变化。 0：请求末初始化 1：服务器连接已建立 2：请求已接受 3：请求处理中 4：请求已完成，且响应已就绪
status	200: " OK " 404:未找到页面

xmlhttprequest.onreadystatechange = function(){

	if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
	
		var jsonObj = JSON.parse(xmlhttprequest.responseText);

	// 把响应的数据显示在数据上
		document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + ", 姓名:" + jsonObj.name;
	}

}
xmlhttprequest.responseText

3. 调用send方法发送请求

xmlhttprequest.send();

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	req.setCharacterEncoding("UTF-8");
	resp.setContenetType("text/html; charset=UTF-8");
	System.out.println("Ajax请求过来了");
	
	Person person = new Person(1,"SwaeLee");

	// json格式的字符串:一般我们要在客户端和服务器之间进行数据交换的时候,使用json字符串
	Gson gson = new Gson();
	String personJsonString = gson.toJson(person);

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

$.ajax方法

url : 表示请求的地址

type : 表示请求的类型GET 或 POST 请求

data : 表示发送给服务器的数据

格式有两种：
一：name=value&name=value
二：{key : value}

success : 请求成功，响应的回调函数

dataType : 数据类型

---

$("#ajaxBtn").click(function()){
	
	$.ajax({
		utl:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		data:"action=jQueryAjax",
		//data:{action:"jQueryAjax"},
		type:"GET",
		success:function(data) {
				//alert("服务器返回的数据是:" + data);
				// var jsonObj = JSON.parse(data);			

			// $("#msg").html("编号:" + jsonObj.id + ", 姓名:" + jsonObj.name);
			$("#msg").html("编号:" + data.id + ", 姓名:" + data.name);
		},
		dataType : "json" //这里写的是text纯文本,需要自己转成Json,如果写的是json,那就不需要自己再转成Json了
	});
}

<div id="msg">
	
</div>

---

Ajax-jQuery的get和post方法

$.get 方法和 $.post方法

url : 请求的url地址

data : 发送的数据

callback : 成功的回调函数

type : 返回的数据类型

$("#getBtn").click(function(){

	$.get(
	"http://localhost:8080/16_json_ajax_i18n/jQueryGet",
	"action=jQueryGet",
	function(data){
		$("#msg").html(" get 编号:" + data.id + ",姓名:" + data.name);
	},"json");	

});

$.getJSON 方法
url : 请求的url地址
data : 发送给服务器的数据
callback : 成功的回调函数
```html
$("#getJSONBtn").click(function(){

	$.getJSON(
	"http://localhost:8080/16_json_ajax_i18n/jQueryGetJSON",
	"action=jQueryGetJSON",
	function(data){
		$("#msg").html("JSON 编号:" + data.id + ",姓名:" + data.name);
	});	

});

---

AJAX-jQuery的serialize方法

表单序列化 serialize()

serialize() 可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

$("#submit").click(function(){

	alert( $("#form01").serialize() );	

	// 把参数序列化
		$.getJSON(
		"http://localhost:8080/16_json_ajax_i18n/Serialize",
		"action=jQuerySerialize&" + $("#form01").serialize(),
		function(){
		$("#msg").html(" Serialize编号:" + data.id + ", 姓名:" + data.name);
	});

});

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
	System.out.println("用户名:" + req.getParameter("username"));
	System.out.println("密  码:" + req.getParameter("password"));
	
	Person person = new Person(1,"SwaeLee");
	Gson gson = new Gson();
	String personJsonString = gson.toJson(person);

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