Nearth---WEB/Ajax/002/初步学习Ajax小案列（MyEclipse的使用）

最新推荐文章于 2021-08-06 00:02:26 发布

码字界陈冠希

最新推荐文章于 2021-08-06 00:02:26 发布

阅读量122

点赞数

分类专栏： WEB前端第四季/Ajax

本文链接：https://blog.csdn.net/ly1716/article/details/103180620

版权

WEB前端第四季/Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示：

1：点击前

2:点击后

怎么做：

创建一个Web Project项目Ajax-001,同时设置别名test.
在项目名下的文件WebRoot下的WEB-INF下创建note1.jsp文件，以及1.txt文件，同时一张背景图片0.jpg.

note1.jsp文件内容为：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
           *{
				margin:0px;
				padding:0px;
			}
			body{
						 background-image: url(0.jpg);
						 background-repeat: no-repeat;
						 background-attachment: fixed;
						 background-size: 100% 100%;
			}//插入背景图片代码
</style>
<script>
function loadXMLDoc()//这段代码是我在菜鸟教程复制借用的学习代码。
{
	var xmlhttp;//申明变量
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();//创建对象
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","1.txt",true);
	xmlhttp.send();
}//使用Ajax技术来实现数据的获取
</script>
</head>
<body>
<button type="button"style="height:100px;width:200px;font-size:20;color:red" onclick="loadXMLDoc()">点击修改内容</button>
<hr>
<div id="myDiv"><h1 style="font-size:50">使用 AJAX 修改该文本内容</h1></div>
</body>
</html>

1.txt文件内容：

Hello World!
Ajax学习规划：
1：什么是ajax?
2:为什么需要ajax?
有时候我们需要在此次请求中响应下一次请求的部分内容，将本次请求的结果和前面请求的
结果内容在同一页面中展示。
如何解决问题？使用ajax技术。
在后台服务器端将多次要响应的内容，重新拼接成一个jsp页面响应。但是，这样会
照成很多响应内容被重复响应，浪费资源。
3：使用ajax
访问原理
基本使用流程
状态码
异步同步
请求
响应的数据类型
JSON
封装
ajax案列
4:JSON
概念
语法定义
值得获取
解析器：Jackson
java对象如何转换成Json
java对象转换成Json  list&map
Json对象转换成Java对象

把内容写好后，就可以启动项目了：（先点击红笔圈起来的部分，添加服务器tomcat;然后点击蓝笔圈起来的部分，启动项目start.----------------这样设置以后，整个项目就启动了。）

项目启动了，那么如何去查看项目结果呢？打开浏览器，在网址栏输入：http://localhost:8080/test/note1.jsp

即可。

然后就可以看到整个项目的结果·············································

站在主人的肩膀上学习，可以学的更好·····························

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth---WEB/Ajax/002/初步学习Ajax小案列（MyEclipse的使用）

效果展示：1：点击前2:点击后怎么做：创建一个Web Project项目Ajax-001,同时设置别名test. 在项目名下的文件WebRoot下的WEB-INF下创建note1.jsp文件，以及1.txt文件，同时一张背景图片0.jpg.note1.jsp文件内容为：<%@ page language="java" import="java.util.*...
复制链接

扫一扫