4.Cesium通過GroundPrimitive實現流動水面效果

阿新 • • 發佈：2021-02-03

Ajax到底是什麼？

Ajax （Asynchronous JavaScript And XML）非同步的 JavaScript 和 XML，實現了可以在不重新整理頁面的同時，進行區域性頁面的更新

Ajax如何使用？

建立XmlHttpRequest物件
傳送Ajax請求
處理伺服器響應

xmlhttp.onreadystatechange() 事件用於監視Ajax的執行過程
xmlhttp.readyState 屬性說明XMLHttpRequest當前狀態

readyState值	說明
0	請求沒有初始化
1	伺服器連線建立
2	請求已被接受
3	請求正在處理
4	響應文字已被接收

舉個小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input id="btnload"  type="button" value="載入">
	<div id="divContent"></div 
>
	<!-- 點選載入後，對div進行區域性重新整理載入 -->
	<script type="text/javascript">
			document.getElementById("btnload").onclick= function(){
				//建立XmlHttpRequest物件
				var xmlhttp;
				if(window.XMLHttpRequest){
					// IE7+，Firefox，Chrome，Opera，Safari瀏覽器執行程式碼
					xmlhttp=new XMLHttpRequest 
();
				}else{
					// IE6，IE5 瀏覽器執行程式碼
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				//傳送Ajax請求
				xmlhttp.open("GET","/ajax/content",true);//建立請求
				xmlhttp.send();//傳送到伺服器
				
				//處理伺服器響應
				xmlhttp.onreadystatechange =function(){
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
						var t= xmlhttp.responseText;//獲取響應體的文字
						//對伺服器結果進行處理
						alert(t);
						document.getElementById("divContent").innerHTML = t;
					}	
				}
				
				
			}
	</script>
</body>
</html>

package com.ajax;

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

/**
 * Servlet implementation class ContentServlet
 */
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ContentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			response.getWriter().print("<b>I'm server content</b>");
	}

}

在這裡插入圖片描述

Ajax實現表單的二級聯動

JavaBean類

package com.ajax;

public class Channel {
	private String code;
	private String name;
	
	public Channel() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public Channel(String code, String name) {
		super();
		this.code = code;
		this.name = name;
	}

	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

Servlet類

package com.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class ChannelServlet
 */
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChannelServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			
			String level = request.getParameter("level");
			String parent = request.getParameter("parent");
			List chlist=new ArrayList();
			if(level.equals("1")) {
				chlist.add(new Channel("ai","前沿/區塊鏈/人工智慧"));
				chlist.add(new Channel("web","前端/小程式/JS"));
			}else if(level.equals("2")) {
				if(parent.equals("ai")) {
					chlist.add(new Channel("micro","微服務"));
					chlist.add(new Channel("blockchain","區塊鏈"));
					chlist.add(new Channel("other","……"));
				}else if (parent.equals("web")) {
					chlist.add(new Channel("html","HTML"));
					chlist.add(new Channel("css","CSS"));
					chlist.add(new Channel("other","……"));
				}
			}
			String json =JSON.toJSONString(chlist);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(json);
		
	}



}

html頁面顯示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二級聯動選單</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
		$(function(){
			$.ajax({
				"url" : "/ajax/channel",
				"data" : { "level" : "1" },
				"type" : "get" ,
				"dataType" : "json",
				"success" : function(json){
					//console.log(json);
					for(var i =0; i< json.length ; i++){
						var ch = json[i];
						$("#lv1").append("<option value='"+ch.code+"'>"+ ch.name +"</option>");
					}
				}
			})
		})
		$(function(){
			$("#lv1").on("change" , function(){
				var parent = $(this).val();
				console.log(parent);
				$.ajax({
					"url" : "/ajax/channel",
					"data" : {"level" : "2" , "parent" : parent},
					"dataType" : "json",
					"type" : "get",
					"success" : function(json){
						console.log(json);
						//移除所有lv2下的原始option
						$("#lv2>option").remove();
						for(var i = 0;i< json.length; i++){
							var ch=json[i];
							$("#lv2").append("<option value='" + ch.code +"'>"+ch.name+"</option>");
						}
					}
				})
			})
		})	
</script>
</head>
<body>
	<select id ="lv1" style="width:200px;height:30px">
			<option selected="selected">請選擇</option>
	</select>
	<select id ="lv2" style="width:200px;height:30px"></select>
		
</body>
</html>