电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到如何书写原生ajax完成数据交互的问题，如果我们遇到了如何书写原生ajax完成数据交互的情况...
电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到如何书写原生ajax完成数据交互的问题，如果我们遇到了如何书写原生ajax完成数据交互的情况，该怎么处理怎么才能解决如何书写原生ajax完成数据交互带来的困扰呢，对于这样的问题其实我们只需要电脑intellij IDEA或者myeclipse第一种：创建一个springboot的项目。1、 打开创建页面 选择File-new-project..2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）3、输入项目名字，选择依赖web（根据项目需求选择，此次需要），选择存放目录-完成（Finish）4这样就解决了这样的问题，接下来给大家带来如何书写原生ajax完成数据交互的详细操作步骤。
工具/原料
电脑
intellij IDEA或者myeclipse
第一步骤：创建javaweb项目
第一种：创建一个springboot的项目。
1、 打开创建页面 选择File-new-project..
2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）
3、输入项目名字，选择依赖web（根据项目需求选择，此次需要），选择存放目录-完成（Finish）
4、pom.xml中添加html视图依赖：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
第二种：创建一个简单的javaweb项目。
1、直接打开：https://jingyan.baidu.com/article/ff411625048acf12e482373a.html
2、或者百度搜索：servlet类如何映射到url路径
第二步骤：编写实现代码
第一步：编写一个controller。
主要是两个方法跳转页面ajax_js.html和返回ajax请求数据
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
@Controller
public class TestController {
@RequestMapping("/toAjax")
String test(HttpServletRequest request) {
return "ajax_js";
}
@ResponseBody
@RequestMapping("/bean")
public String testJson(HttpServletRequest request,
HttpServletResponse response, Map paramMap) {
String callback = request.getParameter("callback");
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String json = "{'id':" + id + ",'name':'" + name + "','sex':'" + sex
+ "'}";
if (callback != null) {
json = callback + "(" + json + ")";
}
return json;
}
}
第二步：前端页面js原生调用get方式的实现。
1、具体前端页面代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//参数1：请求方式 参数2:请求地址 参数3：是否异步 true表示异步，false表示同步
xmlHttp.open('GET', '/bean?id=2&name=张三&sex=男', true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
</script>
</body>
</html>
2、测试输入浏览器页面地址
http://localhost:8080/toAjax
第三步：前端页面js原生调用post方式的实现。
1、前端页面如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//参数1：请求方式 参数2:请求地址 参数3：是否异步 true表示异步，false表示同步
xmlHttp.open('POST', '/bean', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send('id=2&name=张三&sex=男');
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
</script>
</body>
</html>
2、测试
2.1 在浏览器中输入地址 http://localhost:8080/toAjax跳转到ajax请求页面
注意事项
开发环境jdk1.8 IDEA2018.2.2 maven apache-maven-3.5.4
创建springboot项目需要连接互联网
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
