浅谈Ajax

最新推荐文章于 2021-08-06 14:23:21 发布

有何不可有

最新推荐文章于 2021-08-06 14:23:21 发布

阅读量100

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_43542011/article/details/119276870

版权

Java Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、简介：

二、Ajax 的使用流程：

1.创建 XMLHttpRequest对象：

一、简介：

Asynchronous JavaScript And XML（异步的 JavaScript 和 XML ）
Ajax 可在不刷新页面的前提下，进行页面局部更新。
Ajax 不是新技术。
Ajax 不是W3C的标准（是民间厂商提供的技术）。

二、Ajax 的使用流程：

创建 XMLHttpRequest对象。
通过XMLHttpRequest对象发送 Ajax 请求。
通过JavaScript 处理服务器响应。

1.创建 XMLHttpRequest对象：

XMLHttpRequest 用于在后台与服务器交换数据，是 Ajax 的核心。
注意XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同。

var xmlhttp;
if(window.XMLHttpRequest){
  //可能是IE7+ 、Firefox、Chome、Opera、Safari等浏览器之一
  xmlhttp = new XMLHttpRequest();
}else{
  //可能是IE5、IE6等浏览器之一
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.发送 Ajax 请求：

xmlhttp.open() 用于创建请求。
xmlhttp.send() 用于发送请求。

//创建请求
xmlhttp.open("Get","http://localhost/test?name=admin",true);  //参数1是请求方式 参数2是请求地址 参数3是同步还是异步（true是异步，false是同步）
//发送到服务器
xmlhttp.send();

3.处理服务器响应：

xmlhttp.onreadystatechange() 事件用于监听Ajax的执行过程。
xmlhttp.readyState 属性说明 XMLHttpRequest 当前状态。

XMLHttpRequest 状态
readyState值	说明
readyState = 0	请求未初始化
readyState = 1	服务器连接已建立
readyState = 2	请求已被接收
readyState = 3	请求正在处理
readyState = 4（常用）	响应文本已被接收

xmlhttp.statue 属性表示服务器响应码（200：成功，404：未找到...）

		xmlhttp.onreadystatechange=function(){
			//响应已被接收且服务器处理成功才执行
			if(xmlhttp.readyState==4&&xmlhttpstatus==200){
				//获取响应体的文本
				var responseText=xmlhttp.responseText;
				//对服务器结果进行处理
				...
			}	
		}

例：

ContentServlet.java：

package com.ajax.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;

/**
 * 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().println("<b style='color:red'>I'm Isebal!</b>");
	}

}

index.html:

<!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>
	<script type="text/javascript">
		document.getElementById("btnload").onclick = function() {
			//1.创建XmlHttpRequest对象
			var xmlhttp;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			console.log(xmlhttp);
			//2.发送Ajax请求
			xmlhttp.open("GET", "/Ajax/content", true);
			xmlhttp.send();
			//3.处理服务器响应
			xmlhttp.onreadystatechange = function() {
				//响应已被接收且服务器处理成功才执行
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//获取响应体的文本
					var x = xmlhttp.responseText;
					//对服务器结果进行处理
					alert(x);
					document.getElementById("divContent").innerHTML = x; //innerHTML还会将HTML进行解释
				}
			}
		}
	</script>
</body>
</html>

注意若通过Ajax 进行前后端通信，Ajax发送请求时，Servlet中不再进行任何页面的跳转，而是直接提供用户需要的数据，数据通常用JSON格式。

三、利用Ajax实现新闻列表：

例：
News.java：

package com.ajax.servlet;

public class News {
	private String title;
	private String date;
	private String source;
	private String content;

	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}

	public News() {
		super();
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getDate() {
		return date;
	}

	public void setDate(String date) {
		this.date = date;
	}

	public String getSource() {
		return source;
	}

	public void setSource(String source) {
		this.source = source;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

}

NewsListServlet.java：

package com.ajax.servlet;

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 NewsListServlet
 */
@WebServlet("/newslist")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List< News> list=new ArrayList<News>();
		list.add(new News("第20金！卢云秀女子帆板RS：X级金牌", "2021-7-31", "百度新闻", "..."));
		list.add(new News("东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "央视网", "..."));
		list.add(new News("中国女排提前出局 创奥运最差战绩", "2021-7-31", "网易新闻", "..."));
		list.add(new News("中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "新浪新闻", "..."));
		String json=JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

news.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="container"></div>
	<script>
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2.发送Ajax请求
		xmlhttp.open("GET", "/Ajax/newslist", true);
		xmlhttp.send();
		//3.处理服务器响应
		xmlhttp.onreadystatechange = function() {
			//响应已被接收且服务器处理成功才执行
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取响应体的文本
				var text = xmlhttp.responseText;
				console.log(text);
				var json = JSON.parse(text); //注意此JSON是JavaScript的内置对象
				console.log(json);
				var html = "";
				for (var i = 0; i < json.length; i++) {
					var news = json[i];
					html = html + "<h1>" + news.title + "</h1>";
					html = html + "<h2>" + news.date + "&nbsp;" + news.source
							+ "</h2>";
					html = html + "<hr>";
				}
				document.getElementById("container").innerHTML = html;
			}
		}
	</script>
</body>
</html>

2点注意：

①在Servlet处理时，对原始数据（无论是使用list、set还是HashMap等），对外进行字符串序列化时，一律将其转换成JSON，这样能使数据得到有效描述。

②在客户端Web页面，通过Ajax方式将传递的字符串转换成JSON对象（此JSON是JavaScript的内置对象），再在当前页面中循环输出即可。

四、Ajax的同步和异步：

同步和异步决定了在发送数据时，程序是否继续向下执行。
同步：在数据发送过程中，代码不动，只有得到了结果，程序才会继续向下执行。
异步：在数据发送过程中，不会代码阻塞，程序继续向下执行。数据返回时是通过触发onreadystatechange事件来进行结果的获取和处理。
true 代表异步执行，false 代表同步执行。
Ajax默认是true。

五、jQuery对Ajax的支持：

jQuery对Ajax进行封装，提供了 $.ajax() 方法。
语法：$.ajax( JSON对象 )

常设置的JSON对象
常用设置项	说明
url	发送请求地址
type	请求类型（ get 或 post ）
data	向服务器传递的参数
dataType	服务器响应的数据类型（text、json、xml、html、jsonp、script(解决跨域传输问题)）
success	接收响应时的处理函数
error	请求失败时的处理函数

例：

NewsListServlet.java：

package com.ajax.servlet;

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 NewsListServlet
 */
@WebServlet("/newslist")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public NewsListServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String type = request.getParameter("t");
		List<News> list = new ArrayList<News>();
		if (type != null && type.equals("new")) {
			list.add(new News("NEW:第20金！卢云秀女子帆板RS：X级金牌", "2021-7-31", "new", "..."));
			list.add(new News("NEW:东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "new", "..."));
			list.add(new News("NEW:中国女排提前出局 创奥运最差战绩", "2021-7-31", "new", "..."));
			list.add(new News("NEW:中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "new", "..."));
		} else if (type == null || type.equals("111")) {
			list.add(new News("第20金！卢云秀女子帆板RS：X级金牌", "2021-7-31", "百度新闻", "..."));
			list.add(new News("东京奥运会第7个比赛日 中国代表团斩获4金3银2铜", "2021-7-31", "央视网", "..."));
			list.add(new News("中国女排提前出局 创奥运最差战绩", "2021-7-31", "网易新闻", "..."));
			list.add(new News("中国女篮战胜澳大利亚 提前晋级八强", "2021-7-31", "新浪新闻", "..."));
		}
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

jQuery_news.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajax({
			"url" : "/Ajax/newslist",
			"type" : "post",
			"data" : "t=new",
			//若有多个参数，则参数之间用&连接，参数名和参数值用=连接。
			//"data" : "t=new&x=123&y=77", 
			//多个参数更推荐用json格式，可读性更好，力于维护
			//"data" :{"t":"new","x":"123","y":"77"},
			"dataType" : "json",
			"success" : function(json) {
				console.log(json);
				for (var i = 0; i < json.length; i++) {
					$("#container").append("<h1>" + json[i].title + "</h1>");
				}
			},
			"error" : function(xmlhttp, errorText) {
				console.log(xmlhttp);
				console.log(errorText);
				if (xmlhttp.status == "405") {
					alert("无效的请求方式！")
				} else if (xmlhttp.status == "404") {
					alert("未找到URL资源！");
				} else if (xmlhttp.status == "500") {
					alert("服务器内部错误，请联系管理员！");
				} else {
					alert("产生异常，请联系管理员！");
				}
			}
		})
	})
</script>
</head>
<body>
	<div id="container"></div>
</body>
</html>

六、实现二级联动菜单：

Channel.java:

package com.ajax.servlet;

public class Channel {
	private String code;
	private String name;

	public Channel() {
		super();
	}

	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;
	}
}

ChannelServlet.java:

package com.ajax.servlet;

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<Channel> list=new ArrayList<Channel>();
		if (level.equals("1")) {
			list.add(new Channel("DaTong", "大同"));
			list.add(new Channel("ChengDu", "成都"));
		}else if (level.equals("2")) {
			if (parent.equals("ChengDu")) {
				list.add(new Channel("jinjiangqu", "锦江区"));
				list.add(new Channel("handuqu", "郫都区"));
				list.add(new Channel("shuagliuqu", "双流区"));
			}else if (parent.equals("DaTong")) {
				list.add(new Channel("chengqu","城区"));
				list.add(new Channel("kuangqu","矿区"));
				list.add(new Channel("yungangqu","云岗区"));
			}
		}
		String json=JSON.toJSONString(list);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

Cascade_menu.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.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 x = json[i];
					$("#lv1").append("<option value='" + x.code + "'>" + x.name+ "</option>")
				}
			}
		})
	})
    
	//第二步：给第一级数据绑定第二级数据
	$(function(){
		$("#lv1").on("change",function(){
			var parent=$(this).val();
			$.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 x=json[i];
						$("#lv2").append("<option value='"+x.code+"'>"+x.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>

有何不可有

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈Ajax

一、简介：Asynchronous JavaScript And XML（异步的 JavaScript 和 XML ） Ajax 可在不刷新页面的前提下，进行页面局部更新。 Ajax 不是新技术。 Ajax 不是W3C的标准（是民间厂商提供的技术）。二、Ajax 的使用流程：创建 XMLHttpRequest对象。通过XMLHttpRequest对象发送 Ajax 请求。通过JavaScript 处理服务器响应。1.创建 XMLHttpRequest对象：XMLHttpRequ
复制链接

扫一扫

专栏目录