AJAX 请求
2.1、什么是 AJAX 请求
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
2.2、原生 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">
//在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet?action=javaScriptAjax",true);
// 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + ",姓名" + jsonObj.name;
//alert(xmlhttprequest.responseText);
}
}
// 3、调用send方法发送请求
xmlhttprequest.send();
alert("我是最后一行代码");
}
</script>
</head>
<body>
<a href="http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet?action=javaScriptAjax">非Ajax</a> <br/>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</body>
</html>2.3、jQuery 中的 AJAX 请求
$.ajax 方法
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet",
//data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
//alert("服务器返回的数据是：" + data);
//var jsonObj = JSON.parse(data);
$("#msg").html("ajax 编号：" + data.id + ",姓名：" + data.name);
},
dataType: "json"
})
//alert("ajax btn");
});$.get 方法和$.post 方法 url 请求的 url 地址 data 发送的数据 callback 成功的回调函数 type 返回的数据类型
// ajax--get请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet",
"action=jQueryGet",
function (data) {
$("#msg").html("get 编号：" + data.id + ",姓名：" + data.name);
},"json");
//alert(" get btn ");
});// ajax--post请求
$("#postBtn").click(function(){
// post请求
$.post("http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet",
"action=jQueryPost",
function (data) {
$("#msg").html("post 编号：" + data.id + ",姓名：" + data.name);
},"json");
//alert("post btn");
});$.getJSON 方法 url 请求的 url 地址 data 发送给服务器的数据 callback 成功的回调函数
// ajax--getJson请求
$("#getJSONBtn").click(function(){
// 调用
$.getJSON("http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet",
"action=jQueryGetJSON",
function (data) {
$("#msg").html("getJSON 编号：" + data.id + ",姓名：" + data.name);
})
//alert("getJSON btn");
});表单序列化 serialize() serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。
// ajax请求
$("#submit").click(function(){
// 把参数序列化
//alert($("#form01").serialize());
$.getJSON("http://localhost:8080/JavaWeb_Code_AJAX/ajaxServlet",
"action=jQuerySerialize&" + $("#form01").serialize(),
function (data) {
$("#msg").html("Serialize 编号：" + data.id + ",姓名：" + data.name);
})
//alert("serialize()");
});