什么是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:请求服务器端地址
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));