Ajax的原理和运行过程

最新推荐文章于 2020-07-10 11:19:10 发布

原创最新推荐文章于 2020-07-10 11:19:10 发布 · 586 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

servlet 专栏收录该内容

28 篇文章

订阅专栏

什么是Ajax

通俗来说：异步刷新技术，用来在当前页面内响应不同的请求内容
具体来说：
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
不是一种新技术，是如下几种技术的组合应用：

基于web标准（standards-based presentation）XHTML+CSS的表示
使用 DOM（Document Object Model）进行动态显示及交互
使用 XML 和 XSLT 进行数据交换及相关操作
使用 XMLHttpRequest 进行异步数据查询、检索
使用 JavaScript 将所有的东西绑定在一起
Ajax本质上是一个浏览器端的技术

为什么需要Ajax

需求：

有的时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户。

解决：

在后台服务器端将多次响应内容重新拼接成一个jsp页面，响应。但是这样会造成很多响应内容被重复的响应，资源浪费
使用Ajax技术
发请求可以用 a_herf，window.localion，form表单和ajax
前三种相当于自己在页面敲的回车，而ajax是在当前页面进行响应：
js中有一个对象，称为ajax引擎对象(XMLHttpRequest)，属于当前页面的一部分，给服务器发起请求，而响应的还是当前页面

具体代码实现(运行过程)

<%@ 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>Insert title here</title>
<!-- 声明js代码域 -->
<script type="text/javascript">
	function getData(){
		//获取元素对象
		var showdiv=document.getElementById("showdiv");
		showdiv.innerHTML="这是一个类似于ajax的运行过程";
	}
</script>
<style type="text/css">
	#showdiv{
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>
</body>
</html>