9

快速了解Ajax·全局刷新和局部刷新(Ajax)

 3 years ago
source link: https://blog.csdn.net/zjlwdqca/article/details/112612927
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

快速了解Ajax

全局刷新和局部刷新(Ajax)

全局刷新：整个浏览器被新的数据覆盖,需要在网络中传输大量的数据。浏览器需要加载，渲染页面。相当于我们正常点击访问网站的方式。
局部刷新：在浏览器的内部，发起请求，获取数据，改变页面的部分内容。其余的页面无需加载和渲染，网络中的数据传输量少，给用户感觉好。
而我们网页的局部刷新使用的就是Ajax!

首先我们编辑一个小程序来更好的理解什么叫做全局刷新。
bmiindex.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全局刷新</title>
</head>
<body>
	<p>全局刷新计算bmi</p>
	<form action="bmiServlet" method="get">
		姓名：<input type="text" name="name"/>
		体重(公斤)：<input type="text" name="w"/>
		身高(米)：<input type="text" name="h"/>
		<input type="submit" value="提交"/>
	</form>
</body>
</html>

BmiPrintServlet.java

package com.test.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BmiPrintServlet extends HttpServlet {
	public BmiPrintServlet() {
		// TODO Auto-generated constructor stub
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//接收请求参数
				String name = req.getParameter("name");
				String height = req.getParameter("h");
				String weight = req.getParameter("w");
				
				//计算bmi bmi = 体重/身高的平方
				float h = Float.valueOf(height);
				float w = Float.valueOf(weight);
				float bmi = w / (h * h);
				//判断bmi的范围
				String msg = "";
				if(bmi <= 18.5){
					msg = "您比较瘦";
				}else if(bmi > 18.5 && bmi <= 23.9){
					msg = "你的bmi是正常的";			
				}else if(bmi > 23.9 && bmi <= 27){
					msg = "你的身体比较胖";
				}else{
					msg = "你的身体肥胖";
				}
				msg = "您好："+name+"先生/女士，您的bmi的值是："+bmi+","+msg;
				// 使用HttpServletResponse输出数据
				resp.setContentType("text/html;charset=utf-8");
				// 输出PrintWriter
				PrintWriter pw = resp.getWriter();
				//输出数据
				pw.println(msg);
				//清空缓存:可以加速网页加载
				pw.flush();
				//关闭pw
				pw.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
	}

}

web.xml

<!-- HttpServletResponse输出数据 -->
  <servlet>
  		<servlet-name>BmiPrintServlet</servlet-name>
  		<servlet-class>com.test.controller.BmiPrintServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>BmiPrintServlet</servlet-name>
  	<url-pattern>/bmiPrint</url-pattern>
  </servlet-mapping>

打开bmiindex.jsp
在这里插入图片描述
输入你的基本信息，点击提交。
在这里插入图片描述
这种提交全局刷新后显示的过程叫做全局刷新。

局部刷新(Ajax)

上边讲到了全局刷新，现在讲一下使用ajax的局部刷新。
在使用ajax进行网页局部刷新时，主要使用XMLHttpRequest异步对象完成的。
1.首先，新建jsp,使用XMLHttpRequest异步对象。
使用异步对象有以下四个步骤：

  • 初始化请求
  • 发送请求
    2.然后，创建服务器的servlet，接收并处理数据，把数据输出给异步对象。
    ajaxbmiindex.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax局部刷新</title>
	<script type="text/javascript">
		//使用内存的异步对象，代替浏览器发送请求。异步对象使用js创建和管理的。
		function doAjax() {
			// 1.创建异步对象
			var xmlHttp = new XMLHttpRequest();
			// 2.绑定事件
			xmlHttp.onreadystatechange = function() {
				// 处理服务器返回的数据，更新当前页面
				if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
					var data = xmlHttp.responseText;
					document.getElementById("mydata").innerText = data;
				}
			}
			// 获取dom对象的value属性值
			var name  = document.getElementById("name").value;
			var w = document.getElementById("w").value;
			var h = document.getElementById("h").value;
			var param = "name="+name+"&w="+w+"&h="+h;
			// 3.初始请求数据
			xmlHttp.open("get", "bmiAjax?"+param, true);
			// 4.发起请求
			xmlHttp.send();
		}
	</script>
</head>

<body>
	姓名：<input type="text" id="name"/><br>
	体重(公斤)：<input type="text" id="w"/><br>
	身高(米)：<input type="text" id="h"/><br>
	<input type="button" value="计算bmi" onclick="doAjax()"/>
	<p id = "mydata"></p>

</body>
</html>

可以看到我们的提交已经不是通过form表单完成，而是使用了doAjax()这个点击事件，使用内存的异步对象，代替浏览器发送请求，而异步对象使用js创建和管理的。
注意点：var param = “name=”+name+"&w="+w+"&h="+h;此处就是在模拟get方式的数据发送格式。

BmiAjaxServlet.java

package com.test.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BmiAjaxServlet extends HttpServlet {
	public BmiAjaxServlet() {
		// TODO Auto-generated constructor stub
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//接收请求参数
		String name = req.getParameter("name");
		String height = req.getParameter("h");
		String weight = req.getParameter("w");
		
		//计算bmi bmi = 体重/身高的平方
		float h = Float.valueOf(height);
		float w = Float.valueOf(weight);
		float bmi = w / (h * h);
		//判断bmi的范围
		String msg = "";
		if(bmi <= 18.5){
			msg = "您比较瘦";
		}else if(bmi > 18.5 && bmi <= 23.9){
			msg = "你的bmi是正常的";			
		}else if(bmi > 23.9 && bmi <= 27){
			msg = "你的身体比较胖";
		}else{
			msg = "你的身体肥胖";
		}
		msg = "您好："+name+"先生/女士，您的bmi的值是："+bmi+","+msg;
		// 相应ajax的数据，使用HttpServletResponse输出数据
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter pw = resp.getWriter();
		pw.println(msg);
		pw.flush();
		pw.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub	
	}
}

这个servlet服务器的代码和全局刷新区别不大，最大的区别就是他是回调到发起请求的那个页面。
运行ajaxbmiindex.jsp,输入相应信息。
在这里插入图片描述
点击计算bmi。
在这里插入图片描述
回调信息直接显示在页面上，其他地方都没有改变，这就是我们使用ajax完成的局部刷新。
在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK