Ajax是一步的javaScript,是基于javascript实现的功能,会有更好的用户体验,比如无业面刷新技术根据查询的结果集动态的构造网页元素。
1.原生的Ajax
var xmlhttpRequest=new XMLHttpRequest(); xmlhttpRequest.onreadystatechange=function(){ if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){ document.getElementById("content").value=xmlhttpRequest.responseText; } }
xmlhttpRequest.open("GET","<%=path%>/txt/ajaxtest.txt",true); xmlhttpRequest.send();
括号中:GET表示get的请求方式,后面表示的是一个文本文档的路径(在我的ajax的第一篇博文中已经讲过了)。
Writer writer=response.getWriter(); writer.write("iserror"); writer.flush(); writer.close();
2.动态增加Table
首先需要建立一个web工程,然后导入需要的工具包:fastjson-1.1.23.jar
建立一个servlet取名为:AjaxTable,我们下面会用GET请求,所以在get方法中邪如下代码:
response.setContentType("text/html;charset=utf-8"); List<User> userlist=new ArrayList<User>(); for(int i=0;i<10;i++){ User user=new User(); user.setUsername("小明"); user.setPassword(i%2+""); userlist.add(user); } String json=JSON.toJSONString(userlist); PrintWriter pw=response.getWriter(); pw.println(json); pw.flush(); pw.close();
代码最上面一行为了防止有乱码。
这一句:String json=JSON.toJSONString(userlist);的JSON对象时我们上面导入的工具包中的内容。
建立一个jsp取名为:AjaxTable.jsp,在使用之前我们需要导入javascript的一个包,包名是:jquery-1.7.1.js
完整代码如下:
<html> <head> <title>动态增加Table</title> <script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.js"></script> <script type="text/javascript"> function createTable(){ $.ajax({ url:"<%=path%>/servlet/JsonTableAjax", dataType:"json", type:"get", success:function(results){ var tableStr="<table border='1'><tr><td>姓名</td><td>年龄</td></tr>"; for(var i=0;i<results.length;i++){ var p=results[i]; tableStr=tableStr+"<tr><td>"+p.username+"</td><td>"+p.password+"</td></tr>"; } tableStr=tableStr+"</table>"; $("#tableid").html(tableStr); } }); } </script> </head> <body> <input type="button" value="创建table" <div id="tableid"></div> </body> </html>
url表示跳转的servlet的路径,在web.xml里面找;dataType是数据类型,servlet使用json去接收的;type是请求方式,用的是get。
$("#tableid").html(tableStr);是使用的javascript的框架Jquery的元素选择器。
最后在input里加一个onclick事件。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。