JavaWeb - Ajax

版权声明：https://blog.csdn.net/Dream_Weave https://blog.csdn.net/Dream_Weave/article/details/83096317

一、简介

1. Ajax是一种用于创建快速动态网页的技术，能够实现动态刷新，提高用户的体验度，降低后台服务端程序的压力。
2. Ajax特点：
   - 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。
   - 传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
3. Ajax应用：百度搜索下拉框提示，百度地图...
4. 优点
   - 更新时只需要刷新局部，用户体验度好。
   - 由于只需要刷新局部的数据，对后台服务器的压力较小。
5. 待更新...

---

二、语法

1. url：请求的地址。
2. type：请求时数据的传递方式（常用的有get/post）。
3. data：用来传递的数据（建议使用json来传递）。
4. success：交互成功后要执行的方法data Type:ajax接收后台数据的类型（建议使用json）。
5. 注意事项：ajax和后台交互时，后台是不能够直接跳转到其他页面的。
6. 待更新...

---

三、应用

1. JQ版

   <script type="text/javascript">
   	$("#login").click(function(){
   		//单击登录按钮的时候触发ajax事件
   		$.ajax({
   			url:"<%=basePath%>/LoginServlet",
   			type:"post",
   			data:{
   				username:$("input[name=username]").val(),
   				password:$("input[name=password]").val()
   			},
   			dataType:"json",
   			success:function(result){
   				var flag = result.flag;
   				if(flag==true){
   					//如果登录成功则跳转到成功页面
   					window.location.href="<%=basePath%>/pages/front/success.jsp";
   				}else{
   					//跳回到Index.jsp登录页面，同时在登录页面给用户一个友好的提示
   					$(".tip").text("您输入的用户名或者密码不正确");
   				}
   			}
   			
   		});
   	});
   </script>

   package cn.java.servlet;
   
   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;
   import org.json.JSONObject;
   
   
   @WebServlet("/LoginServlet")
   public class LoginServlet extends HttpServlet {
   	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   		//1、首先获取jsp页面传递过来的参数信息
   		String username = request.getParameter("username");
   		String password = request.getParameter("password");
   		//2、如果username="15912345678"，password="12345678"则登录成功，否则登录失败
   		JSONObject jsonObject = null;
   		if("15912345678".equals(username) && "12345678".equals(password)){
   			System.out.println("username="+username);
   			System.out.println("password="+password);
   			jsonObject = new JSONObject("{flag:true}");
   		}else{
   			//如果登录失败，则给ajax返回数据
   			jsonObject = new JSONObject("{flag:false}");
   		}
   		response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
   		
   	}
   
   	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   		doGet(request,response);
   	}
   }

2. JS版

   <script type="text/javascript">
   	function showJava(){
   		//1、创建一个 xmlhttpRequest对象
   		var xmlhttp = new XMLHttpRequest();
   		//2、规定请求的类型、URL 以及是否异步处理请求。
   		xmlhttp.open("GET","<%=basePath%>/ListCouseServlet?flag=1",true);
   		//3、将请求发送到服务器。
   		xmlhttp.send();
   		//4、接收服务器端的响应(readyState=4表示请求已完成且响应已就绪    status=200表示请求响应一切正常)
   		xmlhttp.onreadystatechange=function(){
   			if (xmlhttp.readyState==4 && xmlhttp.status==200){
   				//responseText：表示的是服务器返回给ajax的数据
   		    	document.getElementById("div1").innerHTML=xmlhttp.responseText;
   		    	//alert(xmlhttp.responseText);
   		    }
   		}
   	}
   	
   	function showC(){
   		//1、创建一个 xmlhttpRequest对象
   		var xmlhttp = new XMLHttpRequest();
   		//2、规定请求的类型、URL 以及是否异步处理请求。
   		xmlhttp.open("GET","<%=basePath%>/ListCouseServlet?flag=2",true);
   		//3、将请求发送到服务器。
   		xmlhttp.send();
   		//4、接收服务器端的响应(readyState=4表示请求已完成且响应已就绪    status=200表示请求响应一切正常)
   		xmlhttp.onreadystatechange=function(){
   			if (xmlhttp.readyState==4 && xmlhttp.status==200){
   				//responseText：表示的是服务器返回给ajax的数据
   		    	document.getElementById("div1").innerHTML=xmlhttp.responseText;
   		    	//alert(xmlhttp.responseText);
   		    }
   		}
   	}
   </script>

   package cn.java.servlet;
   
   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;
   import org.json.JSONObject;
   
   
   @WebServlet("/ListCouseServlet")
   public class ListCouseServlet extends HttpServlet {
   	
   	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   		//1、获取ajax传递过来的参数信息
   		String flag = request.getParameter("flag");
   		//2、需要返回的数据信息
   		String data = "";
   		if("1".equals(flag)){//Java课程
   			data = "Java从入门到精通<br>java框架";
   		}else if("2".equals(flag)){//C课程
   			data = "C程序设计<br>C项目实战";
   		}
   		//3、将数据信息回写给ajax
   		response.getOutputStream().write(data.getBytes("utf-8"));
   	}
   
   	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   		doGet(request,response);
   	}
   }

3. 待更新...

---