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尚未整理

尚未整理