首页 > 代码库 > 原生javascript实现Ajax和jQuery实现Ajax实例应用
原生javascript实现Ajax和jQuery实现Ajax实例应用
这是我自己写的例子，希望对大家有帮助
使用了struts2，jdk1.6
1.实体类书写
public class Student {
private String toid ;
private String name ;
private String sex ;
public String getToid() {
return toid ;
}
public void setToid(String toid) {
this.toid = toid;
}
public String getName() {
return name ;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex ;
}
public void setSex(String sex) {
this.sex = sex;
}
}
2.我们在首页的jsp中写上几个链接
<html>
<head >
<title >ajax-struts测试</title >
</head >
<body >
<a href="<%= path%>/login.jsp" >使用javascript原生 api实现ajax ---读取远程文本</a >
<br />
<a href="<%= path%>/register.jsp" >使用javascript原生 api实现ajax ---检查注册名是否重复</a >
<br />
<a href="<%= path%>/jqueryRegister.jsp" >使用jquery框架实现 ajax---检查注册名是否重复 </a>
<br />
<a href="<%= path%>/jqueryJson.jsp" >ajax请求json数据，动态构造网页 </a>
</body >
</html>
3.struts2的配置文件
<?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>
<package name="user" extends="struts-default" namespace="/user" >
<action name="userAction" class="action.UserAction">
<result name="doLogin" >/login.jsp</ result>
<result name="loginerr" >/register.jsp</ result>
</action>
</package>
</struts>
4.实现javascript原生Ajax读取文本文档
<html>
<head >
<title >ajax读取txt文本</title >
<script type="text/javascript">
function getContent(){
var xmlhttpRequest=new XMLHttpRequest();
xmlhttpRequest.onreadystatechange= function(){
if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){
document.getElementById("content" ).value=http://www.mamicode.com/xmlhttpRequest.responseText;
}
}
xmlhttpRequest.open( "GET","<%= path%>/txt/ajaxtest.txt ",true);
xmlhttpRequest.send();
}
</script >
</head >
<body >
<input type="button" value="ajax获取信息" onclick="getContent()" />
<br />
<textarea id="content" rows="5" cols="30"></ textarea>
</body >
</html>
文本信息为:
hello ajax
你好啊
自己随便写一个文本文档，注意路径不要写错了
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
（1）.无法使用缓存文件（更新服务器上的文件或数据库）
（2）.向服务器发送大量数据（POST 没有数据量限制）
（3）.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
5.javascript原生Ajax实现账号验证
< html>
<head >
<title > 注册</ title >
<script type= "text/javascript">
function doRegister(){
var xmlhttpRequest= new XMLHttpRequest();
xmlhttpRequest.onreadystatechange= function (){
if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){
var responseResult=xmlhttpRequest.responseText;
if (responseResult==‘iserror‘ ){
alert( "账号已被使用" );
} else {
alert(responseResult);
var registerForm=document.getElementById( "registerForm");
registerForm.submit();
}
}
}
var username=document.getElementById("username" ).value;
xmlhttpRequest.open("GET" ," <%=path %> /user/userAction!checkUsername.action?username= "+username,true);
xmlhttpRequest.send();
}
</script >
</head >
<body >
${requestScope.errormsg}
<form id= "registerForm" action =" <%= path%> /user/userAction!doLogin.action" method= "post">
用户名: < input type ="text" name= "username" id= "username" />
<br />
密码: < input type ="password" name= "password" id= "password" />
<br />
< input type ="button" onclick= "doRegister()" value ="注册" />
</form >
</body >
</ html>
新建一个UserAction代码内容为：
public class UserAction {
public String doLogin() {
return "doLogin" ;
}
}
这个类放在这，我们还要添加方法，留待后面使用
6.使用jQuery框架实现Ajax，检验账号
< html>
<head >
<title > jqury实现无刷新测试 </ title>
<script type= "text/javascript" src =" <%= path%> /js/jquery-1.7.1.js" ></script >
<script type= "text/javascript">
function doRegister(){
var username=$("#username" ).val();
$.ajax({
type: "POST" , //异步请求方式
data:{ "username" :username}, //传递的数据
url:‘ <%= path%> /user/userAction!checkUsername.action ‘, //请求路径
dataType: "text" ,
success: function (data){
alert(data);
},
error: function (err){alert("错误：" +err);} //异步请求失败后的回调函数
});
}
</script >
</head >
<body >
<form id= "registerForm" action =" <%= path%> /user/userAction!doLogin.action" method= "post">
用户名: < input type ="text" name= "username" id= "username" />
<br />
密码: < input type ="password" name= "password" id= "password" />
<br />
< input type ="button" onclick= "doRegister()" value ="注册" />
</form >
</body >
</ html>
在上面的UserAction类里面添加代码如下：
public void checkUsername() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
String username = request.getParameter( "username" );
if (username.equals("admin" )) {
try {
Writer writer = response.getWriter();
writer.write( "iserror" );
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
7.Ajax请求json数据，动态构造网页
< html>
<head >
<title > jquery ajax 请求json数据动态构造网页 </ title>
<script type= "text/javascript" src =" <%= path%> /js/jquery-1.7.1.js" ></script >
<script type= "text/javascript">
function searchStudent(){
$.ajax({
type: "POST" , //异步请求方式
url:‘ <%= path%> /user/userAction!ajaxList.action ‘, //请求路径
dataType: "json" ,
success: function (data){
//alert(data);
$( "#stuTr" ).nextAll().remove();
//循环json数据
for (var i=0;i<data.length;i++){
var item=data[i];
//alert(item.toid+" : "+item.name);
$("#stuTable" ).append( "<tr><td>"+item.toid+ "</td><td>" +item.name+"</td><td>" +item.sex+ "</td></tr>");
}
},
error: function (err){alert("错误：" +err);} //异步请求失败后的回调函数
});
}
</script >
</head >
<body >
<input type= "button" onclick ="searchStudent()" value = "ajax得到所有学生" />
<table id= "stuTable" border ="1" >
<tr id= "stuTr" >< td> toid </td >< td> 学生姓名 </td >< td> 性别 </td ></ tr>
</table >
</body >
</ html>
在上面的UserAction类里面添加代码如下：
/**
* 给客户端返回 json数据
*/
public void ajaxList() throws Exception {
//模拟从数据库中获取数据
List<Student> list = new ArrayList<Student>();
for (int i = 0; i < 10; i++) {
Student student = new Student();
student.setToid(i + "" );
student.setName( "ago" + i);
student.setSex(i % 2 + "" );
list.add(student);
}
HttpServletResponse response = ServletActionContext.getResponse();
//把list解析成 json
String json = JSON. toJSONString(list);
System. out .println(json);
response.setContentType( "application/json;charset=UTF-8" );
response.setHeader( "Cache-Control" , "no-cache" );
//给用户打印 json数据
response.getWriter().write(json);
response.flushBuffer();
}
本文出自 “my dream fly on the sky” 博客，请务必保留此出处http://7915791.blog.51cto.com/7905791/1566189
原生javascript实现Ajax和jQuery实现Ajax实例应用