Ajax概述
Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。
同步和异步的区别
同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。
异步：当JS代码加载到当前的AJAX的时候，这时候浏览器在发送请求的同时，也在解析页面的代码，也就是说浏览器同时在做两件事。
js原生态代码实现
一般分四个步骤：创建对象XMLHttpRequest对象、连接数据库、发送请求、处理响应结果函数
以Struts2为例
测试页面testAjax.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>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>My JSP 'login.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript">
/*
*考虑到浏览器的不同，创建XMLHttpRequest的方法也不同
*/
function createXMLHttpRequest() {
try {//符合大部分浏览器
return new XMLHttpRequest();
} catch (e) {//符合IE6.0
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {//符合IE5.5及更低的版本
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("未识别浏览器类型");
throw e;
}
}
}
}
window.onload = function() {
/*
*获取文本框的DOM对象
*/
var username1 = document.getElementById("username");
/*
*为文本框对象添加失去焦点事件监听器
*/
username1.onblur = function() {
/*
*Ajax的四步操作：创建XMLHttpRequest对象、连接数据库、发送请求、处理响应结果
*/
/*
*第一步：创建获取XMLHttpRequest对象
*/
var xmlHttp = createXMLHttpRequest();
/*
*第二步：连接数据库，open方法，
*参数1：采用POST请求方式
*参数2：请求后台资源 ValidateUsernameServlet
*参数3：采用异步请求方式，true
*/
xmlHttp.open("POST", "/StrutsTest/ajax.action", true);
//因为是POST请求方式，所以需要设置请求体，是固定的
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*
*第三步：发送请求，send方法
*参数就是要传递给后台服务器的，使用使用像键值对那样的方式，如果有多个就使用&链接
*将用户名的内容value传送
*/
xmlHttp.send("username="+username1.value);
/*
*第四步：处理服务器传回来的结果,onreadystatechange
*如果为1：在span标签中输出“用户名已经被注册”
*如果为0：什么都不用做
*/
xmlHttp.onreadystatechange = function() {
console.log("正常");
if(xmlHttp.readyState==4 && xmlHttp.status==200) {//双重判断，xmlHttp的状态为4（说明服务器响应结束），服务器响应成功为200
var flag = xmlHttp.responseText;//服务器响应返回的结果
var info = document.getElementById("red");
info.innerHTML = flag;
}
};
};
};
</script>
</head>
<body>
<form>
username:<input type="text" name="username" id="username"><span id="red"></span><br />
password:<input type="password" name="password"><br />
address:<input type="text" name="address"><br />
<input type="submit" value="login">
</form>
</body>
</html>
测试配置文件struts.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="true" />
<!-- 设置表单提交数据的格式，对get和post都有用 -->
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="yxd" namespace="/" extends="struts-default">
<action name="ajax" class="com.yxd.action.TestAjaxAction" method="testAjax">
</action>
</package>
测试Action：
package com.yxd.action;
import java.io.IOException;
import javax.swing.plaf.basic.BasicSliderUI.ActionScroller;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @ProjectName StrutsTest
* @package com.yxd.action
* @ClassName TestAjaxAction.java
* @Author YXD
* @Time 2017年5月9日 下午7:36:27
* @Description 测试Ajax
*
*/
public class TestAjaxAction extends ActionSupport {
private String username;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
/**
*
* @throws IOException
* @Method testAjax
* @Return String
* @Descritption
* 要求：必须返回值是NONE，或者是null
*/
public String testAjax() throws IOException {
//静态数据jack
String realname = "jack";
if(realname.equals(this.getUsername())) {
//设置编码为utf-8，可以显示中文
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>用户名已经存在</font>");
} else if("".equals(this.getUsername())) {
//设置编码为utf-8
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>用户名不能为空</font>");
} else {
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:green;'>用户名可以注册</font>");
}
return NONE;
}
}
总结：
以上是我的一些学习心得，在运行的时候主要有下面一些需要注意的问题
- 首先Struts2的环境必须要配置完整，这里没有说明web.xml和jar包的补充和导入。
- 这里只是简单测试了ajax的功能，并不代表只有这些，可以的话可以试试同步和Get方式。
- 当用户输入框内容后，失去焦点的时候才会触发ajax。
- Action中的方法返回值必须是NONE或者null，而且后台传回到前台的数据只能通过response对象传递。
- 后期会说明SpringMVC的方式有何不同，但是主要的还是用response对象。
- 这里用的是原生态的js，以后会使用现在主流的JQuery来实现。
![为JSON 数据加入斜杠 \[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)