版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85716872
1.效果图
2.HTML代码
2.1 javascript_ajax.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>57 jQuery-使用JavaScript方法实现Ajax功能</title>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn {border:#666 1px solid;padding:2px;width:80px;
filter: progid:DXImageTransform.Microsoft
.Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
</style>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button"
onclick="getSendData()" class="btn" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
//声明一个空的XMLHTTP变量
var objXmlHttp = null;
//根据浏览器的不同，返回该变量的实体对象
function createXMLHTTP() {
if (window.ActiveXObject) {
objXmlHttp = new ActiveXObject("Microft.XMLHTTP");
}else {
if (window.XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest();
}else{
alert("初始化XMLHTTP错误！");
}
}
}
function getSendData() {
//初始化内容
document.getElementById("divTip").innerHTML = "<img style='width:60px;height:60px;' alt='' title='正在加载中...' src='../../img/pig.jpg'/>";
//设置发送地址变量并赋初始值
var strSendUrl = "/jquery/findData1?data="+Date();
//实例化XMLHttpRequest对象
createXMLHTTP();
//open方法初始化XMLHttpRequest
objXmlHttp.open("GET", strSendUrl, true);
//回调事件函数
objXmlHttp.onreadystatechange = function() {
//如果请求完成加载
if (objXmlHttp.readyState == 4) {
//如果响应已成功
if (objXmlHttp.status == 200) {
//显示获取的数据
document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
}
}
}
//send发送设置的请求
objXmlHttp.send(null);
}
</script>
</body>
</html>
2.2 data1.html代码
<div class="clsShow">
姓名：大都督<br/>
爱好：敲代码<br/>
</div>
3.Java代码
因为存在跨域问题，所以需要在服务器中访问
、package com.example.demo.manager;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @Description jquery控制层
* @author 大都督
* @date 2019年1月3日
*/
@Controller
@RequestMapping("/jquery")
public class JqueryManager extends BaseManager{
@RequestMapping("/javascript_ajax")
public String a() {
return "jquery/ajax/javascript_ajax";
}
@RequestMapping("/findData1")
public String findData() {
return "jquery/testFile/data1";
}
}