ajax 学习札记
日期：2014-05-16 浏览次数：20579 次
ajax 学习笔记
又是一个第一次，第一次接触AJAX
突然发现有了AJAX网络交互的方式好像完全被颠覆了，习惯了点击请求后的等待，突然用到异步交互感觉不可思议，传统在一次被颠覆。
第一次AJAX程序，老套图直接上代码。
代码环境：Struts2 + Ajax
页面代码
Action代码
配置文件省略
又是一个第一次，第一次接触AJAX
突然发现有了AJAX网络交互的方式好像完全被颠覆了，习惯了点击请求后的等待，突然用到异步交互感觉不可思议，传统在一次被颠覆。
第一次AJAX程序，老套图直接上代码。
代码环境：Struts2 + Ajax
页面代码
<html>
<head>
<script type="text/javascript">
var xmlHttp;//定义个XMLHttp
//创建一个XMLHttprequest
function createXMLHttpRequest() {
//IE系列的浏览器
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//firefox等浏览器
else if (window.XMLHttpRequest) {
//实例化一个XMLHttprequest。
xmlHttp = new XMLHttpRequest();
}
}
//启动Ajax请求--GET
function startRequestGet() {
createXMLHttpRequest();
//注册回调方法
xmlHttp.onreadystatechange = handleStateChange;
var userName = document.getElementById("names").value ;
//设置提交方式，此处用的是GET
xmlHttp.open("GET", "ajaxAction?name="+userName, true);
xmlHttp.send(null);
}
//启动Ajax请求--POST
function startRequestPost() {
createXMLHttpRequest();
//注册回调方法
xmlHttp.onreadystatechange = handleStateChange;
var userName = document.getElementById("names").value ;
//设置提交方式，此处用的是GET
xmlHttp.open("GET", "ajaxAction", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name="+userName);
}
function handleStateChange() {
//判断是否和服务器端的交互完成，还要判断服务器段是否正确返回数据
if(xmlHttp.readyState == 4) {
//表示和服务器端的交互以完成
if(xmlHttp.status == 200) {
var message = xmlHttp.responseText;
//获得值的显示位置
var div = document.getElementById("message");
//在该位置显示值
div.innerHTML = message;
}
}
}
</script>
</head>
<body>
This is my Test AJAX page!!
<br>
<form action="ajaxAction" method="get">
<table>
<tr>
<td>
<input type="text" name="name" id="names" value="" onblur="startRequestGet()">
</td>
<td ><div id="message"></div> </td>
<td>
<input type="submit" value="submit">
</td>
<td>
<input type="button" value="button" onclick="startRequest()">
</td>
</tr>
</table>
</form>
</body>
</html>
Action代码
public class AjaxAction extends ActionSupport{
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=gbk");//解决乱码问题
response.setCharacterEncoding("GBK");//解决乱码问题
PrintWriter out = response.getWriter();
if(name.equals("cht")){
out.println(name+"用户名被占用");
System.out.println(name+"用户名被占用");
}else{
out.println(name+"该用户名可用");
System.out.println(name+"该用户名可用");
}
out.close();
return super.execute();
}
}
配置文件省略
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
