(二)JS异步请求
这里我使用的编译器是WebStorm（不管用哪个编译器我们的最终结果都是一样的就是要请求后台的数据，随后将后台返回的结果展示在界面中），后台的配置请参考Ajax练习一（配置Java后台）。
这里用可能会遇到跨域的问题。解决方式只需要在后台设置即可。因为我后台用的是SpringMvc，所以只需要在Controller中加上@CrossOrigin注解即可！添加方式如下图所示：
Get请求
1.设置界面的布局：
这里先简单的设置一些界面效果（因为我不会Html - -！，写这些纯属三分钟热血）。布局如下：
<!DOCTYPE html>@H_403_21@
<html@H_403_21@ lang@H_403_21@="en"@H_403_21@>@H_403_21@
<head@H_403_21@>@H_403_21@
<Meta@H_403_21@ charset@H_403_21@="UTF-8"@H_403_21@>@H_403_21@
<title@H_403_21@>@H_403_21@Title</title@H_403_21@>@H_403_21@
<style@H_403_21@>@H_403_21@ /* 这里给P标签设置点样式 为了显眼一些 */@H_403_21@ #result@H_403_21@{ background-color@H_403_21@: skyblue@H_403_21@@H_403_21@; font-size@H_403_21@: 30@H_403_21@px@H_403_21@@H_403_21@; color@H_403_21@: white@H_403_21@@H_403_21@; }@H_403_21@@H_403_21@ @H_403_21@</style@H_403_21@>@H_403_21@
</head@H_403_21@>@H_403_21@
<body@H_403_21@>@H_403_21@
<!-- 用来显示请求的结果 -->@H_403_21@
<p@H_403_21@ id@H_403_21@="result"@H_403_21@>@H_403_21@用于展示结果</p@H_403_21@>@H_403_21@
<!-- 按钮用来请求后台的数据 -->@H_403_21@
<button@H_403_21@ id@H_403_21@="request"@H_403_21@>@H_403_21@点我请求后台的数据</button@H_403_21@>@H_403_21@
<!-- 设置一些操作 -->@H_403_21@
<script@H_403_21@>@H_403_21@ //点击按钮后向后台发起请求@H_403_21@ document.getElementById("request"@H_403_21@).onclick = function@H_403_21@ ()@H_403_21@ {@H_403_21@ var@H_403_21@ getRequest = new@H_403_21@ XMLHttpRequest();//创建请求对象@H_403_21@ getRequest.open("GET"@H_403_21@,"http://192.168.1.101:8080/MineTest/first.do"@H_403_21@,true@H_403_21@);//链接服务器@H_403_21@ getRequest.send();//发送请求@H_403_21@ getRequest.onreadystatechange = function@H_403_21@ ()@H_403_21@ {@H_403_21@ if@H_403_21@ (getRequest.readyState === 4@H_403_21@) {//请求已完成，且响应已就绪@H_403_21@ if@H_403_21@ (getRequest.status === 200@H_403_21@) {//请求成功@H_403_21@ var@H_403_21@ resultStr = getRequest.responseText//获取结果@H_403_21@ var@H_403_21@ resultObj = JSON@H_403_21@.parse(resultStr);//解析数据@H_403_21@ //将返回的结果展示到P标签中@H_403_21@ document.getElementById("result"@H_403_21@).innerHTML = "名称 : "@H_403_21@ + resultObj.name + "</br>"@H_403_21@ + "年龄 : "@H_403_21@ + resultObj.age + "</br>"@H_403_21@ + "性别 : "@H_403_21@ + resultObj.sex; } else@H_403_21@ { alert("错误码 : "@H_403_21@ + getRequest.status); } } } } @H_403_21@</script@H_403_21@>@H_403_21@
</body@H_403_21@>@H_403_21@
</html@H_403_21@>@H_403_21@
2.运行界面查看结果：
首先打开网页查看一下效果，效果如下图所示：
点击按钮，请求后台，请求成功后的效果如下图所示：
Post请求
1.设置界面的布局：
这里同样的简单的设置一个界面。提交两个数字，让后台把两数相加的结果返回。布局如下：
<!DOCTYPE html>@H_403_21@
<html@H_403_21@ lang@H_403_21@="en"@H_403_21@>@H_403_21@
<head@H_403_21@>@H_403_21@
<Meta@H_403_21@ charset@H_403_21@="UTF-8"@H_403_21@>@H_403_21@
<title@H_403_21@>@H_403_21@Title</title@H_403_21@>@H_403_21@
</head@H_403_21@>@H_403_21@
<body@H_403_21@>@H_403_21@
<!-- 输入提交的内容 -->@H_403_21@
<label@H_403_21@>@H_403_21@请输入数字1 : </label@H_403_21@>@H_403_21@
<input@H_403_21@ type@H_403_21@="number"@H_403_21@ id@H_403_21@="num1"@H_403_21@>@H_403_21@
</br@H_403_21@>@H_403_21@
<label@H_403_21@>@H_403_21@请输入数字2 : </label@H_403_21@>@H_403_21@
<input@H_403_21@ type@H_403_21@="number"@H_403_21@ id@H_403_21@="num2"@H_403_21@>@H_403_21@
</br@H_403_21@>@H_403_21@
<!-- 按钮用来请求后台的数据 -->@H_403_21@
<button@H_403_21@ id@H_403_21@="request"@H_403_21@>@H_403_21@点我请求后台的数据</button@H_403_21@>@H_403_21@
<!-- 设置一些操作 -->@H_403_21@
<script@H_403_21@>@H_403_21@ //点击按钮后向后台发起请求@H_403_21@ document.getElementById("request"@H_403_21@).onclick = function@H_403_21@ ()@H_403_21@ {@H_403_21@ var@H_403_21@ getRequest = new@H_403_21@ XMLHttpRequest();//创建请求对象@H_403_21@ getRequest.open("POST"@H_403_21@,"http://192.168.1.101:8080/MineTest/sum.do"@H_403_21@,true@H_403_21@);//链接服务器@H_403_21@ var@H_403_21@ postStr = "num1="@H_403_21@ + document.getElementById("num1"@H_403_21@).value + "&num2="@H_403_21@ + document.getElementById("num2"@H_403_21@).value; getRequest.setRequestHeader("contentType"@H_403_21@,"text/html;charset=uft-8"@H_403_21@);//设置编码格式@H_403_21@ getRequest.setRequestHeader("Content-Type"@H_403_21@,"application/x-www-form-urlencoded;"@H_403_21@);//表单类型@H_403_21@ getRequest.send(postStr);//发送请求@H_403_21@ getRequest.onreadystatechange = function@H_403_21@ ()@H_403_21@ {@H_403_21@ if@H_403_21@ (getRequest.readyState === 4@H_403_21@) {//请求已完成，且响应已就绪@H_403_21@ if@H_403_21@ (getRequest.status === 200@H_403_21@) {//请求成功@H_403_21@ var@H_403_21@ resultStr = getRequest.responseText//获取结果@H_403_21@ alert("返回结果 : "@H_403_21@ + resultStr); } else@H_403_21@ { alert("错误码 : "@H_403_21@ + getRequest.status); } } } } @H_403_21@</script@H_403_21@>@H_403_21@
</body@H_403_21@>@H_403_21@
</html@H_403_21@>@H_403_21@
在后台的TestController类中添加一个方法，用来接收参数和返回结果,代码如下：
/** * 求和并返回 * @param@H_403_21@ request * @param@H_403_21@ response * @throws@H_403_21@ IOException */@H_403_21@
@RequestMapping@H_403_21@(value = "/sum"@H_403_21@,method = RequestMethod.POST)
public@H_403_21@ void@H_403_21@ sum@H_403_21@(HttpServletRequest request,HttpServletResponse response) throws@H_403_21@ IOException{
response.setCharacterEncoding("UTF-8"@H_403_21@);
int@H_403_21@ num1 = Integer.parseInt(request.getParameter("num1"@H_403_21@));
int@H_403_21@ num2 = Integer.parseInt(request.getParameter("num2"@H_403_21@));
response.getWriter().write(num1 + " + "@H_403_21@ + num2 + " = "@H_403_21@ + (num1 + num2));
}
2.运行界面查看结果：
打开网页查看一下效果，效果如下图所示：
输入数字后点击按钮，请求后台，请求成功后的效果如下图所示：
这样一个使用Ajax实现前后台交互小例子就完成了！接下来将使用JQuery来实现简单的get、post请求。
