AJAX（跨域AJAX尚未整理）
文章目录
Tips
可以参考W3School
-
Asynchronous Javascript And XML：异步 JavaScript 和 XML
-
一种 创建交互式网页应用 的 网页开发技术
-
浏览器通过 js 异步发起请求，局部更新页面的技术
浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
-
同步请求：等待AJAX请求结束，再往下执行
异步请求：AJAX请求执行时，其他代码继续执行
-
用处：不要为了ajax而ajax，使用ajax的唯一条件为：页面不需要刷新且需要向后台发送请求时
① 分页
② 加入购物车
③ 表单数据校验（是需要执行业务逻辑的数据校验）
④ 等页面无需刷新但需要向后台发送请求的场景
原生 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、定义请求对象
var xmlhttprequest;
// 2、解决浏览器兼容问题
if(XMLHttpRequest)
{
// Chrome Firefox 高版本IE
xmlhttprequest = new XMLHttpRequest();
}else{
//低版本IE
xmlhttprequest = new ActiveXObject("Microsoft.XMLHttp");
}
// 3、调用 open 方法设置请求参数
xmlhttprequest.open("GET","/ajaxServlet?action=javaScriptAjax",true)
// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" +
jsonObj.name;
}
}
// 5、调用 send 方法发送请求
//设置请求头为application/x-www-form-urlencoded
xmlhttprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01"></div>
</body>
</html>
实际开发中，后端 应该返回JSON格式的字符串！
public class AjaxServlet extends BaseServlet {
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("Ajax请求过来了");
Person person = new Person(1, "MMM");
// json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
// 返回json字符串
resp.getWriter().write(personJsonString);
}
}
W3School中相关基础知识
XHR 请求
JS 发送Ajax请求的唯一途径
对象的创建要兼容不同的浏览器内核
XHR 响应
XHR readyState
jQuery 中的 AJAX 请求
$.ajax
$("#ajaxBtn").click(function(){
$.ajax({
url:"/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是：" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
},
dataType : "json"
});
});
实际开发中，后端 应该返回JSON格式的字符串！
public class AjaxServlet extends BaseServlet {
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("Ajax请求过来了");
Person person = new Person(1, "MMM");
// json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
// 返回json字符串
resp.getWriter().write(personJsonString);
}
}
$.get 与 $.post
// ajax--get 请求
$("#getBtn").click(function(){
$.get("/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("/ajaxServlet","action=jQueryPost",function (data){
$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
},"json");
});
//Servlet部分同$.ajax
$.getJSON
// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("/ajaxServlet","action=jQueryGetJSON",function(data) {
$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
});
});
$(selector).load()
发送ajax请求，将响应数据以innerHTML方式放到对应的jquery对象中
function doLoad(){
$("#errMsg").load("/ckName?name=abc");
}
<span id="errMsg"></span>
<button onclick="doLoad()" >load</button>
表单序列化
可以把表单中所有表单项的内容都获取到，并以 name=value&name=value
// ajax 请求
$("#submit").click(function(){
// 把参数序列化
// 直接将 $("#form01").serialize() 拼接进去，不用一一输入表单项内容
$.getJSON("/ajaxServlet",
"action=jQuerySerialize&" +$("#form01").serialize(),
function (data) {
$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
}
);
});
跨域AJAX尚未整理
尚未整理
