笔记——Ajax

什么是Ajax

AJAX(Asynchronous JavaScript and XML.)是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

js原生的Ajax

get请求

//创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				//接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}
		//绑定地址
		xmlHttp.open("GET","/ajax/ajaxServlet?name=zy",true);
		//发送请求
		xmlHttp.send();

post请求

//创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				//接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}	
	
		xmlHttp.open("POST","/ajax/ajaxServlet",true);
		//注意：如果是post提交,在发送请求之前设置一个头
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=zy");

servlet编写

String name = request.getParameter("name");
		response.getWriter().write(name+Math.random());

Jquery的Ajax技术

1.$.get(url, [data], [callback], [type]) 和 $.post(url, [data], [callback], [type])

urlString

待载入页面的URL地址

data (可选)Map

待发送 Key/value 参数。

callback (可选)Function

载入成功时回调函数。

type (可选)String

返回内容格式，xml, html, script, json, text, _default。

例子：

$.get(
			"/ajax/ajaxServlet2", //url地址
			{"name":"zy","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				document.getElementById("span1").innerHTML = data.name + "  " + data.age;
			},
			"json"
		);

2.$.ajax([options] )

常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

例子：

$.ajax({
			url:"/ajax/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"zy","age":18},
			success:function(data){
				document.getElementById("span3").innerHTML = data.name + "  " + data.age;
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});

3.servlet编写

1.直接使用java返回一个json格式的字符串

	String name = request.getParameter("name");
		String age = request.getParameter("age");	
		
		//java代码只能返回一个json格式的字符串
		response.setContentType("text/html;charset=UTF-8");
		String json = "{\"name\":\"" + name+ "\",\"age\":" + age + "}";
		response.getWriter().write(json);

2.使用json的转换工具将对象或集合转成json格式的字符串

jsonlib

	String name = request.getParameter("name");
		String age = request.getParameter("age");

		User user = new User();
		user.setAge(age);
		user.setName(name);
	
		JSONObject fromObject = JSONObject.fromObject(user);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write(fromObject.toString());

GSON

		String name = request.getParameter("name");
		String age = request.getParameter("age");

		User user = new User();
		user.setAge(age);
		user.setName(name);
		
		Gson gson = new Gson();
		response.getWriter().write(gson.toJson(user));