1. 什么是 Ajax
Ajax即是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术
Ajax是浏览器发起一种异步请求,局部更新页面技术
原生的Ajax请求
1、我们首先要创建XMLHttpRequest
2、调用open方法设置请求参数
3、在send方法前绑定XMLHttpRequest事件, 处理请求完成后的操作
4、调用send方法发送请求
创建一个htl页面发送请求
<script type="text/javascript">
function ajaxRequest() {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=ajaxReq",true);
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var responseText = xmlHttpRequest.responseText;
var jsonObj = JSON.parse(responseText);
document.getElementById("div01").innerText = "编号: "+jsonObj.id + "姓名: " + jsonObj.name;
}
}
xmlHttpRequest.send();
}
</script>
创建Servlet程序接收请求
public class AjaxServlet extends BaseServlet {
protected void ajaxReq(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("ajax请求过来了");
Person person = new Person(1,"Tim");
Gson gson = new Gson();
String jsonStr = gson.toJson(person);
response.getWriter().write(jsonStr);
}
}
从上面看出,使用原生的javascript创建Ajax请求非常不方便,而且会有浏览器兼容问题,那我们在工作中如何处理Ajax请求,我们一般会使用javascript框架来解决,比如我们使用jQuery来进行处理
2. JQuery中Ajax请求
JQuery的4个Ajax请求
$.ajax
$.get
$.post
$.getJSON
serialize()表单序列化方法
在JQuery中与Ajax有关的有4个方法
$.ajax请求参数:
url : 请求的地址
type : 请求的方式
data : 请求的参数
success : 请求成功,响应的回调函数
dataType : 数据类型(text、html、script、xml、json)
$.get请求参数:
url : 请求的地址
data : 请求的参数
callback : 请求成功,回调函数
type : 数据类型(text、html、script、xml、json)
$.post请求参数:
url : 请求的地址
data : 请求的参数
callback : 请求成功,回调函数
type : 返回内容格式(text、html、script、xml、json)
$getJSON
url : 待载入页面的 URL 地址
data : 请求的参数
callback : 请求成功的回调函数
以下是测试JQuery的Ajax请求回调输出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#ajaxBtn").click(function(){
$.ajax({
url : "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
type : "POST",
data : "action=ajaxReq",
success : function (data) {
$("#ajaxReq").html("编号: "+ data.id + ", 名称: " + data.name);
},
dataType : "json"
});
});
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
$("#ajaxReq").html("get 编号: "+ get.id + ", 名称: " + get.name);
},"json");
});
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
$("#ajaxReq").html("post 编号: "+ get.id + ", 名称: " + get.name);
},"json");
});
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq",function (get) {
$("#ajaxReq").html("getJSON 编号: "+ get.id + ", 名称: " + get.name);
});
});
$("#submit").click(function(){
var serializeForm = $("#form01").serialize();
alert(serializeForm);
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=ajaxReq&"+serializeForm,function (get) {
$("#ajaxReq").html("serializeForm&getJSON 编号: "+ get.id + ", 名称: " + get.name);
});
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJSONBtn">$.getJSON请求</button>
</div>
<br/><br/>
<div id="ajaxReq"></div>
<form id="form01" >
用户名：<input name="username" type="text" /><br/>
密码：<input name="password" type="password" /><br/>
下拉单选：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选：
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
单选：
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>
|