JavaWeb后端入门13—Ajax-阿南达文事网

JavaWeb后端入门13—Ajax

1. Ajax概述

1.1 同步和异步

同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

1.2 运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

2.原生JS的Ajax技术（了解）

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

创建Ajax引擎对象
为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
绑定提交地址
发送请求
接受响应数据

前台代码：

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function fn1() {
		//1.创建ajax引擎对象---所有的操作都是通过引擎对象
		let xmlHttp  = new XMLHttpRequest();
		//2.绑定监听---监听服务器是否已经返回响应数据
		xmlHttp.onreadystatechange = function () {
			//5.接受响应数据
			if (xmlHttp.readyState==4 && xmlHttp.status==200)
				{
					let res = xmlHttp.responseText;
					document.querySelector("#span1").innerHTML=res;
				}
		}
		//3.绑定地址
		xmlHttp.open("GET","/web22/AjaxServlet?name=李四",true);
		//4.发送请求
		xmlHttp.send();
	}
	function fn2() {
		//1.创建ajax引擎对象---所有的操作都是通过引擎对象
		let xmlHttp  = new XMLHttpRequest();
		//2.绑定监听---监听服务器是否已经返回响应数据
		xmlHttp.onreadystatechange = function () {
			//5.接受响应数据
			if (xmlHttp.readyState==4 && xmlHttp.status==200)
				{
					let res = xmlHttp.responseText;
					document.querySelector("#span2").innerHTML=res;
				}
		}
		//3.绑定地址
		xmlHttp.open("POST","/web22/AjaxServlet",false);
		//4.发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=王五");
	}
</script>
</head>
<body>
	<input type="button" value="异步访问服务器" onclick="fn1()">
	<span id="span1"></span>
	<br><br>
	<input type="button" value="同步访问服务器" onclick="fn2()">
	<span id="span2"></span>
	<br><br>
	<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>

后台代码：

代码语言：javascript代码运行次数：0运行复制

package cn.wuter.ajaxdemo1;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 通过ajax获取信息的Servlet
 */
public class AjaxServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/HTML;charset=UTF-8");
		//response.getWriter().write("张三zhangsan");
		/*try {
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			// TODO 自动生成的 catch 块
			e.printStackTrace();
		}*/
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		response.getWriter().write(Math.random()+name);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

3. Json数据格式

Json有两种格式

对象格式 {"key1":obj,"key2":obj,"key3":obj...}
数组格式 [obj,obj,obj...]

4. JQuery的Ajax技术

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])

其中：

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）

常用的返回类型：text、json、html等

$.ajax( { option1:value1,option2:value2... } )

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2021-05-07 ，如有侵权请联系 cloudcommunity@tencent 删除数据ajax对象后端入门

JavaWeb后端入门13—Ajax