快速了解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完成的區域重繪，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249083.html

標籤：其他

上一篇：HTML5 彈性布局

下一篇：學習HTML成長記 1

快速了解Ajax·全域重繪和區域重繪(Ajax)

快速了解Ajax

全域重繪和區域重繪(Ajax)

全域重繪

區域重繪(Ajax)