`
- 浏览:
178444 次
- 性别:
- 来自:
北京
-
- 1. 初始化XMLHttpRequest对象模版
- function createXmlHttpRequest(){
- var xmlHttp;
- try{ //Firefox, Opera 8.0+, Safari
- xmlHttp=new XMLHttpRequest();
- }catch (e){
- try{ //Internet Explorer
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }catch (e){
- try{
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }catch (e){}
- }
- }
- return xmlHttp;
- }
- 2.手动编写ajax通用工具代码
- //通过id获取dom对象
- function $(id) {
- return document.getElementById(id);
- }
-
- // ajax技术必须创建XMLHTTPRequest对象 ,获取XMLHTTPRequest对象的操作
- function createXHR() {
- var xhr;
- var aVersion = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
- "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];
- try {
- // 高版本ie、firefox、opera等浏览器直接new出ajax对象
- xhr = new XMLHttpRequest();
- } catch (e) {
- // 低版本的IE,ie6以下版本需要通过以下操作创建ajax对象
- for ( var i = 0; i < aVersion.length; i++) {
- try {
- xhr = new ActiveXObject(aVersion[i]);
- return xhr;
- } catch (e) {
- continue;
- }
- }
- }
- return xhr;
- }
- 3.ajax处理分页技术案例
- window.onload = function() {
- // 获取按钮对象
- var queryBtnDom = $("queryBtn");
-
- // 给按钮设置点击事件操作
- queryBtnDom.onclick = function() {
-
- var content = "pagination.nowPage=" + 1;
- var url = "./csdn/UserAction_query.action?time=" + new Date().getTime();
- // 调用ajax处理过的请求发送操作
- sendPost(content, url, managerSuccess, managerFail);
-
- // 处理成功的方法
- function managerSuccess(xhr) {
- // 创建出XML dom对象
- var XMLDom = xhr.responseXML;
- // 创建xml的跟对象
- var root = XMLDom.documentElement;
- // 获取跟对象的子节点
- var users = root.getElementsByTagName("user");
- // 显示数据操作
- showUsers(users);
-
- // 分页操作
- // 首页
- $("firstPage").onclick = function() {
- // 给请求的数据重新设一下值,然后重新发送一回请求
- content = "pagination.nowPage=" + 1;
- sendPost(content, url, managerSuccess, managerFail);
- };
- // 上一页
- $("backPage").onclick = function() {
- // 给请求的数据重新设一下值,然后重新发送一回请求
- content = "pagination.nowPage="
- + eval(root.getAttribute("nowPage") + "-" + 1);
- sendPost(content, url, managerSuccess, managerFail);
-
- };
- // 下一页
- $("nextPage").onclick = function() {
- // 给请求的数据重新设一下值,然后重新发送一回请求
- content = "pagination.nowPage="
- + eval(root.getAttribute("nowPage") + "+" + 1);
- sendPost(content, url, managerSuccess, managerFail);
-
- };
- // 末页
- $("lastPage").onclick = function() {
- // 给请求的数据重新设一下值,然后重新发送一回请求
- content = "pagination.nowPage="
- + root.getAttribute("countPage");
- sendPost(content, url, managerSuccess, managerFail);
- };
- }
-
- function managerFail(xhr) {
- alert("处理失败");
- }
-
- };
- };
-
- // 封装一个创建Element元素的方法
- function CE(tag) {
- return document.createElement(tag);
- }
- // 封装一个创建文本节点的方法
- function CT(t) {
- return document.createTextNode(t);
- }
-
- // 发送请求的方法
- function sendPost(content, url, success, fail) {
- var xhr = createXHR();
- // 触发器
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200 || xhr.status == 304) {
- success(xhr);
- } else {
- fail(xhr);
- }
- }
- };
- // 打开请求
- xhr.open("POST", url, true);
- // 设置类型
- xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- // 发送请求
-
- xhr.send(content);
- // };
- }
-
- // 显示数据的方法
- function showUsers(users) {
- // 获取tbody的dom对象
- var tbodyDom = $("showUsers");
- // 清空数据
- if (tbodyDom.hasChildNodes()) {
- for ( var jj = 0; jj < tbodyDom.childNodes.length;) {
- tbodyDom.removeChild(tbodyDom.childNodes[jj]);
- }
- }
-
- // 遍历添加数据
- for ( var i = 0; i < users.length; i++) {
- var user = users[i];
- if (user.nodeType == 1) {
- // 创建tr元素节点
- var tr = CE("tr");
-
- // 创建td元素节点
- // 创建一个复选框节点
- var td1 = CE("td");
- var input = CE("input");
- // 为td1设置属性
- input.setAttribute("type", "checkbox");
- input.setAttribute("value", user.getAttribute("id"));
-
- var td2 = CE("td");
- var td3 = CE("td");
- var td4 = CE("td");
- var td5 = CE("td");
- var td6 = CE("td");
- var td7 = CE("td");
-
- // 将文本节点追加到td上;这里要注意不能使用方法链追加,否则界面会让你很难受
- td1.appendChild(input);
- td2.appendChild(CT(user.getAttribute("id")));
- td3
- .appendChild(CT(user.getElementsByTagName("name")[0].firstChild.nodeValue));
- td4
- .appendChild(CT(user.getElementsByTagName("sex")[0].firstChild.nodeValue));
- td5
- .appendChild(CT(user.getElementsByTagName("email")[0].firstChild.nodeValue));
- td6
- .appendChild(CT(user.getElementsByTagName("birthday")[0].firstChild.nodeValue));
-
- // 将td追加到tr上
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
- tr.appendChild(td4);
- tr.appendChild(td5);
- tr.appendChild(td6);
- tr.appendChild(td7);
- // 将tr节点添加到tbody中
- tbodyDom.appendChild(tr);
- }
- }
- }
-
- 用户名注册时使用ajax验证处理
- window.onload=function(){
- //根据id获取需要用ajax技术处理的数据的dom对象,util.js和reg.js位于同一包下,固可以相互引用
- var uNameDom = $("userName");
- //为uNameDom注册失去焦点的事件
- uNameDom.onblur=function(){
- //将获取到的用户名名称封装成请求数据
- var content = "uName="+uNameDom.value;
- //设置请求路径,并通过时间戳的形式产生唯一url
- var url = "./csdn/UserAction_checkName.action?time="+new Date().getTime();
- //创建ajax对象
- var xhr = createXHR();
-
- //这里状态为0,状态吗的默认值是0,说明从0变1时才触发onreadystatechange事件
- //alert(xhr.readyState);
- //为xhr对象设置一个触发器事件,改事件服务器自己处理
- xhr.onreadystatechange=function(){
- //alert(xhr.readyState);状态从1-4执行
- if(xhr.readyState==4){
- if(xhr.status==200||xhr.status==304){
- $("name").innerHTML=xhr.responseText;
- }
- }
- };
- //打开请求
- xhr.open("POST",url,true);
- //如果是post请求需要进行如下操作,告诉浏览器正在发送符合url编码的数据;括号内一个单词不能错,错一个就不能将数据传给servlet了
- xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- //发送数据
- xhr.send(content);
- };
- };
-
- Action处理代码
- package www.csdn.project.action;
-
- import java.io.IOException;
- import java.io.PrintWriter;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.struts2.ServletActionContext;
- import www.csdn.project.domain.User;
- import www.csdn.project.service.UserService;
- import www.csdn.project.service.UserServiceImpl;
- import www.csdn.project.utils.Pagination;
-
- import com.opensymphony.xwork2.ActionSupport;
-
- public class UserAction extends ActionSupport {
-
- private String uName;
-
- //分页的当前页属性,这里一定要指明泛型所指向的类型,否则就会出错
- private Pagination<User> pagination;
-
- //声明一个事务对象
- private UserService service = new UserServiceImpl();
-
- // 通过ServletActionContext类获取response对象,将在action中的操作转向servlet的操作
- private HttpServletResponse response = ServletActionContext.getResponse();
-
- //声明一个输出对象
- private PrintWriter out;
-
-
-
-
- public Pagination<User> getPagination() {
- return pagination;
- }
-
- public void setPagination(Pagination<User> pagination) {
- this.pagination = pagination;
- }
-
- public String getUName() {
- return uName;
- }
-
- //一定要注意命名规范,set注入方法和get获值的方法首字母一定要大写,否则不起作用切记
- public void setUName(String uName) {
- this.uName = uName;
- }
-
-
- //登录操作
- public String login(){
- return SUCCESS;
- }
-
- //检查名字
- public String checkName() {
-
- response.setContentType("text/html;charset=utf-8");
-
- //实例化out对象
- try {
- out = response.getWriter();
- } catch (IOException e) {
- e.printStackTrace();
- }
-
- User entity = service.getObjectByName(uName);
-
- if (entity != null) {
- out.print("用户名已经存在");
- } else {
- out.print("用户名可以使用");
- }
- out.flush();
- out.close();
- return "reg";
- }
-
-
- //查找所有
- public String query(){
-
- response.setContentType("text/xml;charset=utf-8");
- System.out.println(pagination.getNowPage()+"====================");
- pagination = new Pagination<User>(User.class,pagination.getNowPage());
- //实例化out对象
- try {
- out = response.getWriter();
- } catch (IOException e) {
- e.printStackTrace();
- }
-
- //拼出xml文件,用来存放从数据库取出的数据
- out.println("<?xml version='1.0' encoding='UTF-8'?>");
- out.println("<users nowPage='"+pagination.getNowPage()+"' countPage='"+pagination.getCountPage()+"' countRecond='"+pagination.getCountRecond()+"'>");
- //遍历
- for(User entity: pagination.getEntities()){
- out.print("<user id='"+entity.getId()+"'>");
- out.print("<name>");
- out.print(entity.getName());
- out.print("</name>");
- out.print("<sex>");
- out.print(entity.getSex());
- out.print("</sex>");
- out.print("<birthday>");
- out.print(entity.getBirthday());
- out.print("</birthday>");
- out.print("<email>");
- out.print(entity.getEmail());
- out.print("</email>");
- out.print("</user>");
- }
- out.println("</users>");
-
- //刷新out对象,使数据不把缓存中存,直接显示
- out.flush();
- out.close();
- return "xml";
- }
-
- }
-
- 分页显示界面
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@ taglib uri="/struts-tags" prefix="s"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>用户管理界面</title>
-
- <script type="text/javascript"
- src="${ pageContext.request.contextPath }/js/util.js"></script>
-
- <script type="text/javascript"
- src="${ pageContext.request.contextPath }/js/user/query.js"></script>
- </head>
-
- <body>
- <div align="center">
- <div>
- <h3>用户管理界面</h3>
- <input type="button" value="会员管理" id="queryBtn" />
- </div>
- <hr>
- <div>
-
- <h3>显示数据</h3>
- <table bordercolor="teal" border="1px" cellspacing="0"
- cellpadding="0" width="800px">
- <thead>
- <tr>
- <th>选择</th>
- <th>序号</th>
- <th>姓名</th>
- <th>性别</th>
- <th>邮箱</th>
- <th>生日</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="showUsers"></tbody>
- </table>
- <div>
- <input type="button" value="首页" id="firstPage"/>
- <input type="button" value="上一页" id="backPage"/>
- <input type="button" value="下一页" id="nextPage"/>
- <input type="button" value="末页" id="lastPage"/>
- </div>
- </div>
- </div>
- </body>
- </html>
-
- 首界面
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@ taglib uri="/struts-tags" prefix="s"%>
-
-
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
-
-
- <title>My JSP 'index.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">
-
-
- <!--
- 不能在同一个界面引用多个ajax判断的js,如果这样做会只让下面的js起作用,上面引用的js不在判断,
- 但是可以在上面js没有window.onload方法的情况可以同存,并且还可以调用它
- -->
-
-
- <script type="text/javascript"
- src="${ pageContext.request.contextPath }/js/util.js"></script>
-
- <script type="text/javascript"
- src="${ pageContext.request.contextPath }/js/user/reg.js"></script>
- </head>
-
- <body>
- <div align="center">
- <div>
- <h3>后台管理登陆界面</h3>
-
- <s:form action="UserAction_login" namespace="/csdn" theme="simple">
- <table>
- <tr>
- <td>用户名:</td>
- <td><s:textfield id="userName" name="userName" /></td>
- <td style="color: red; font-size: 10px;" id="name"></td>
- </tr>
- <tr>
- <td>密码:</td>
- <td><s:password id="userPass" name="userPass" /></td>
- <td></td>
- </tr>
- <tr>
- <td>邮箱:</td>
- <td><s:textfield id="userEmail" name="userEmail" /></td>
- <td></td>
- </tr>
- <tr>
- <td colspan="3"><s:submit value="登录【注册】" />
- </td>
- </tr>
- </table>
- </s:form>
- </div>
-
- </div>
- </body>
- </html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
附录A Ajax工具箱 A.1 欲善其事,先利其器 A.1.1 获取适合的工具 A.1.2 创建自己的工具 A.1.3 维护工具箱 A.2 编辑器和IDE A.2.1 在代码编辑器中需要什么功能. A.2.2 当前的工具 A.3 调试器 A.3.1 为什么要使用调试...
6.5 综合案例分析—用Ajax实现新闻点评即时更新/187 6.5.1 需求分析/187 6.5.2 效果界面/187 6.5.3 功能实现/189 6.5.4 代码分析/193 6.6 本章小结/196 第7章 jQuery常用插件/197 7.1 jQuery插件概述/198 ...
8.4 综合案例分析—使用jquery ui插件以拖动方式管理相册 8.4.1 需求分析 8.4.2 效果界面 8.4.3 功能实现 8.4.4 代码分析 8.5 本章小结 第9章 jquery实用工具函数 9.1 什么是工具函数 9.2 工具函数...
本课程的所有代码作者进行了全程录屏,再对目标网站进行分析制作的过程中,分解大量小的案例进行剖析,同时作者还分享了很多在网站制作中实用的小工具,让学员在掌握相关技术的同时,真正学会如何使用jQuery和ASP...
12.5 使用Hibernate的工具快速生成映射文件和POJO 12.5.1 使用MiddleGen根据数据库产生映射文件 12.5.2 使用hbm2java根据映射文件产生POJO 12.6 整合Struts、Spring和Hibernate实现用户管理 12.6.1 Struts、Spring和...
Sublime Text工具使用介绍 谢幕 第17周 今日内容概要 jQuery 和Dom关系及jQuery版本 jQuery选择器 实例多选反选取消 删选器以及Tab菜单示例 示例:模态编程框 jQuery 样式以及属性操作 示例:TAB切换菜单 jQuery...
不好意思,本人发的"北大青鸟ACCP 6.0 软件开发初级程序员:c#语言和数据库技术基础"和 "北大青鸟ACCP 6.0 软件开发初级程序员:使用C#语言开发数据库应用系统" 文件搞反了,如果一起下载不影响的。呵呵 ACCP...
5.2.2 分析由JSP生成的Servlet代码 5.3 JSP基本语法 5.3.1 JSP表达式 5.3.2 在JSP中嵌入Java代码 5.3.3.JSP声明 5.3.4.JSP表达式语言(EL) 5.3.5 实例:用EL函数替换HTML中的特殊字符 5.3.6 JSP页面...
代码高亮工具 -- firefox 附加组件 100个Visual C++网络与数据库编程例子 net人才系统msSql2000数据库 accp s2 结业项目(包含项目答辩PPT,需要分析,项目总结文档) java编写的酒店管理系统 jsp+oracle 网络应用系统...
5.2.2 分析由JSP生成的Servlet代码 5.3 JSP基本语法 5.3.1 JSP表达式 5.3.2 在JSP中嵌入Java代码 5.3.3.JSP声明 5.3.4.JSP表达式语言(EL) 5.3.5 实例:用EL函数替换HTML中的特殊字符 5.3.6 ...
1.6 几种开发工具的介绍 20 1.6.1 Vi及Vim 20 1.6.2 Eclipse+PHPEclipse插件 21 1.6.3 UltraEdit 21 1.6.4 EditPlus 22 1.6.5 支持PHP的IDE环境 22 1.7 小结 23 第2章 PHP的基础语法 24 2.1 语言构成与工作原理 24 ...
发布Oracle存储过程包c#代码生成工具(CodeRobot) New Folder XCodeFactory3.0完全攻略--序 XCodeFactory3.0完全攻略--基本思想 XCodeFactory3.0完全攻略--简单示例 XCodeFactory3.0完全攻略--IDBAccesser ...
在本书的最后,你将能够建立精确定位到Ajax函数的测试,以及适用于常见怀疑对象(跨站式脚本和注入攻击)的大型多级测试。 本书将帮助你: ·获取、安装和配置有用的——且免费的——安全测试工具 ·理解你的...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
第2篇为范例演练篇,主要包括基础知识相关、数据库相关、图像与文件相关、图表与报表相关、Ajax等相关的范例;第3篇为项目实战篇,主要包括讯友联系人管理模块、播客视频管理模块、博客管理模块、明日知道论坛管理...