Javaweb-AJAX的实现原理

最新推荐文章于 2024-04-23 00:29:43 发布

德曼特。

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量550

点赞数 1

分类专栏：菜鸟学编程文章标签： AJAX XMLHttpRequest原理 XMLHttpRequest对象详解

本文链接：https://blog.csdn.net/De_ManTe/article/details/92852119

版权

菜鸟学编程专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Javaweb-AJAX

1、AJAX基本了解

1、AJAX介绍
AJAX 是一种用于创建快速动态网页的技术。AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

2、AJAX的优点

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好

3、AJAX的基本原理

AJAX基本原理

2、AJAX的应用

第一步：获取一个XMLHttpRequest对象

第二步：设置一个回调函数

回调函数它的作用就是用于处理服务器响应的数据

通过XMLHttpRequest对象的onreadystatechange设置回调函数

第三步：设置请求方式GET/POST的URL等

如果是POST还需要设置头

通过XMLHttpRequest对象的open方法 的

第四步：真正向服务器发送请求

通过XMLHttpRequest对象的send方法 的

第五步：在回调函数中获取服务器响应的数据

通过XMLHttpRequest对象的responseText

3、XMLHttpRequest对象详解

1、获取XMLHttpRequest 对象

1、对于大部分浏览器可以直接通过 new XMLHttpRequest();

2、对于IE5 IE6 new ActiveXObject(\"Microsoft.XMLHTTP\")

2、XMLHttpRequest常用属性

1、onreadystatechange 它是用于绑定回调函数，当服务器响应数据回来后，我们可以在指定的回调函数中进行数据处理。

2、readyState 它描述的http请求的状态

**5个状态中每一个都有一个相关联的非正式的名称，下面列出了状态、名称和含义

状态名称描述
0 Uninitialized 初始化状态，XMLHttpRequest 对象已创建或已被 abort()方法重置
1 Open Open() 方法已调用，但是Send() 方法未调用。请求还没有被发送
2 Send Send() 方法已调用，HTTP请求已发送到web服务器。未接收到响应
3 Receiving 所有响应头部都已经接收到。响应体开始接收但是未完成
4 Loaded HTTP 响应已经完全接收

3、status 它描述的http状态码 200 404 405 500…

4、获取服务器响应数据

使用responesText或responseXML来获取

3、XMLHttpRequest常用方法

1、open它是用于设置请求方式，url及是否异步

参数1：HTTP 请求方式 POST/GET。

参数2:url路径

参数3:true/false 代表是否异步

2、send它是真正向服务器发送请求

如果请求方式是get，那么我们使用send(null) 原因:get请求方式是没有http请求体

只有post请求方式时，才有请求体,所以send的参数只是在post请求时使用例如

Xmlhttp.send(“username=xxx&password=xxx”);

3、setRequestHeader

注意：如果请求方式是POST,那么我们在使用时，必须设置一个请求头，就需要使用setRequestHeader方法来完成

xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

4、AJAX案例

案例、省市二级联动

第一步:创建html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/web08/js/my.js"></script>
<script type="text/javascript">
	// 当页面加载的时显示省份
	function getPro() {
		//获取XMLHttpRequest对象
		var xmlHttp = getXmlHttpRequest();
		// 设置回调函数
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//将服务器得到的信息处理
					var pro = xmlHttp.responseText; //湖北,湖南,浙江,江苏
					var p = pro.split(","); // 将返回的数据切割成一个数组

					// 使用Html dom 来完成数据的填充到下拉菜单中
					for (var i = 0; i < p.length; i++) {
						// 每次创建一个option
						var option = document.createElement('option');
						option.text = p[i];
						// 然后将得到的值添加到下拉框中
						document.getElementById("pro").add(option);
					}
				}
			}
		}
		// open 
		xmlHttp.open("POST", "/web08/ProServlet");
		// send 
		xmlHttp.setRequestHeader("content-type",
				"application/x-www-form-urlencoded");
		xmlHttp.send("method=pro");   // 发送pro代表是去找省份  
	};
// ==================================================================================
	// 获取城市的信息
	function getCity() {
		// 得到省份的名称
		var getID = document.getElementById("pro")
		var pros = getID.options; //得到的是一个数组
		// 获取当前选中的某个省份<option>某省份</option>
		var pro = pros[getID.selectedIndex];
		// 再获取某个省份的名称
		var pname = pro.text;

		//项服务器发送请求
		//获取XMLHttpRequest对象
		var xmlHttp = getXmlHttpRequest();
		// 设置回调函数
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//将服务器得到的信息处理
					var citynames = xmlHttp.responseText;
					// 切割后得到城市的数组
					var cityname = citynames.split(",");
					// 清空城市下拉框的信息恢复到原始的
					document.getElementById("city").innerHTML = "<option>--请选择城市--</option>"

					// 使用Html dom 来完成数据的填充到下拉菜单中
					for (var i = 0; i < cityname.length; i++) {
						// 每次创建一个option
						var option = document.createElement('option');
						option.text = cityname[i];
						// 然后将得到的值添加到下拉框中
						document.getElementById("city").add(option);
					}
				}
			}
		}
		// open 
		xmlHttp.open("POST", "/web08/ProServlet");
		// send 
		xmlHttp.setRequestHeader("content-type",
				"application/x-www-form-urlencoded");
		xmlHttp.send("method=" + pname);   //  给出选择的省份去找出城市
	};
</script>
</head>
<body onload='getPro()'>
	<h1>请选择省份和城市</h1>
	<select id="pro" onchange="getCity()">
		<option>--请选择省份--</option>
	</select>
	<select id="city">
		<option>--请选择城市--</option>
	</select>

</body>
</html>

第二步:在服务器端创建一个工具类CityUtil它可以获取省份与城市信息

package com.dome;

import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class CityUntils {
	// 创建一个工具类，保存省份和城市的信息
	private static final Map<String, String> citys = new HashMap<String, String>();

	static {
		citys.put("湖北", "武汉,宜昌,十堰,荆州");
		citys.put("湖南", "长沙,岳阳,张家界,衡阳");
		citys.put("江苏", "南京,苏州,无锡,常州");
		citys.put("浙江", "杭州,嘉兴,宁波,温州");
	};

	// 获取省份 返回一个"xx,xx,xx"的形式
	public static String getPros() {
		Set<String> keys = citys.keySet();
		// 设置获取省份的初始值
		String pro = "";
		for (String key : keys) {
			pro += key + ",";
		}
		return pro.substring(0, pro.length() - 1);
	}

	// 根据省份获取城市
	public static String getCitys(String pro) {
		return citys.get(pro);
	}

	//public static void main(String[] args) {
	//	String pro = getPros();
	//	System.out.println(pro); // 返回的值 湖北,湖南,浙江,江苏
	//	System.out.println(getCitys("湖北"));
	// }
}

第三步:向服务器发送请求获取省份和城市信息填充到省份下拉框

package com.dome;

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

public class ProServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 处理请求体中文乱码问题
		request.setCharacterEncoding("utf-8");

		// 获取请求的端的信息
		String method = request.getParameter("method");   // 关键点 
		if ("pro".equals(method)) {   //
			// 获取省份的信息
			String pro = CityUntils.getPros();

			// 处理中文乱码的问题
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write(pro);
		} else {
			// 获取省份的信息
			String city = CityUntils.getCitys(method);  // method 是省份的名字

			// 处理中文乱码的问题
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write(city);
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

第四步:选择省份信息，向服务器发送请求获取城市信息填充到城市下拉框（重要点和难点）

1.获取省份名称

// 得到省份的名称
		var getID = document.getElementById("pro")
		var pros = getID.options; //得到的是一个数组
		// 获取当前选中的某个省份<option>某省份</option>
		var pro = pros[getID.selectedIndex];
		// 再获取某个省份的名称
		var pname = pro.text;

2.向服务器发送请求，将省份名称做为参数传递到服务器，服务器根据省份名称查询对应的城市信息

	// 根据省份获取城市
	public static String getCitys(String pro) {
		return citys.get(pro);
	}

3.在浏览器端处理数据填充到省份或城市下拉框中

注意:在向省份或城市下拉框中添加信息前要先进行一次清空操作

xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//将服务器得到的信息处理
					var citynames = xmlHttp.responseText;
					// 切割后得到城市的数组
					var cityname = citynames.split(",");
					// 清空城市下拉框的信息恢复到原始的
					document.getElementById("city").innerHTML = "<option>--请选择城市--</option>"

					// 使用Html dom 来完成数据的填充到下拉菜单中
					for (var i = 0; i < cityname.length; i++) {
						// 每次创建一个option
						var option = document.createElement('option');
						option.text = cityname[i];
						// 然后将得到的值添加到下拉框中
						document.getElementById("city").add(option);
					}
				}
			}

4、工具函数 my.js

function getXmlHttpRequest(){
	
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for all new browsers
		xmlhttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {// code for IE5 and IE6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

德曼特。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaweb-AJAX的实现原理

2、Javaweb-AJAX1、AJAX基本了解1、AJAX介绍AJAX 是一种用于创建快速动态网页的技术。AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，AJAX 可以使...
复制链接

扫一扫