Ajax基础案例
AJAX案例
div 部分用于显示来自服务器的信息。
当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。
该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。
软件测试技术基础教程5.用例设计方法-等价类
等价类设计用途
等价类设计法可用于功能测试、性能测试、兼容性测试、安全性测试等方面。一般带有输入 性需求的被测对象都可以采用等价类设计法，但等价类设计法是以效率换取效果的，考虑得 越细致，设计的用例可能就越多，同时，输入与输入之间的约束考虑较少，可能产生一些逻 辑错误，不同的思考角度可能会导致不同的用例设计角度及产生的用例数量。在实际使用过 程中，需根据测试的投入确定测试风险及优先级，从而保证该方法的使用效果。
细化后的等价类有效用例如下表所示
用例编号 测试项 测试标题 用例属性 重要级别 预置条件 测试输入 操作步骤
预期结果 实际结果
EMAIL-ST-用户注册-001 用户注册邮箱功能测试 验证正确的用户注册信息注册实现情况 功能测试 高 无 用户名:zhangsan,密码:zhangsan，确认密码:zhangsan 在注册页面输入测试数据； 单击“提交注册”按钮 系统页面显示zhangsan注册成功，3s后成功跳转入zhangsan个人信息配置页面
用例设计方法-等价类
实际软件测试活动中，保证被测对象测试充分性的最好方法即是使用穷举法完全覆盖、完全 组合。但显而易见的是这种思路不可取，软件项目实施受时间、成本、范围、风险等多个因 素限制。故而，使用一种高度归纳概括的用例设计方法将会大量减少穷举法带来的大量用例， 在保证测试效果的同时提高测试效率。等价类划分正是这样的一种非常常用的用例设计方法， 该方法依据用户需求规格说明书，细分用户期望，设计用例。
测试项测试点需求规格有效等价类编号无效等价类编号用户名名长度需求618位618a01空b0116b0218b03组成需求字母数字下画线字母a02特殊符号b04字母数字下画线a03汉字b05格式需求以字母开头以字母开头a04数字开头b06以下画线开头b07以字母或数字结尾以字母结尾a05以下画线结尾b08以数字结尾a06密码非空要求不能为空非空a07空b09确认密码一致性要求与密码一致一致a08不一致b10采用等价类设计的3条原则可抽取有效测试用例如下
ajax中的success方法
ajax中的success方法1.引言1.1 概述概述:AJAX（Asynchronous JavaScript and XML）是一种基于前端的技术，通过使用JavaScript和XML或JSON来实现与服务器之间的异步通信。
它的出现极大地改变了Web开发的方式，使得页面能够实现动态的数据更新，无需重新加载整个页面。
在AJAX中，success方法是作为回调函数之一，用于处理异步请求成功后返回的数据。
当请求成功时，success方法会被调用，并将服务器返回的数据作为参数传递给该方法。
本文将重点介绍和探讨AJAX中的success方法，包括其使用方法、参数和常见的应用场景。
通过深入了解success方法，读者将能够更好地理解AJAX的工作原理，并能够灵活运用这一方法来处理异步请求的返回数据。
接下来的章节将依次介绍AJAX的简介以及其中的success方法，以帮助读者更好地理解和运用该方法。
本文的目的是帮助读者掌握AJAX技术中的关键概念和方法，以便能够在实际的Web开发中灵活运用AJAX 来提升用户体验和页面的性能。
在结论部分，我们将对AJAX中的success方法进行总结，并展望其在未来的应用前景。
通过对success方法的深入学习，读者将能够更好地应用这一方法来处理异步请求返回的数据，提供更好的用户体验，同时也能够更好地理解和应用AJAX技术。
1.2文章结构文章结构是指文章的组织形式和内容安排方式。
一个良好的文章结构可以使读者更容易理解和吸收文章内容，并且可以让作者更清晰地表达自己的观点和论据。
在本篇文章中，我们将按照以下结构组织内容：1. 引言1.1 概述：介绍AJAX（Asynchronous JavaScript and XML）的基本概念和作用，以及它在现代Web开发中的重要性。
1.2 文章结构：说明本篇文章的整体结构和内容安排。
1.3 目的：阐述写作本文的目的，即介绍AJAX中的success方法的作用、用法和实际应用场景。
jq ajax 案例
jq ajax 案例jq ajax 是一种用于在前端网页中发送异步请求的技术。
它基于JavaScript和HTML，可以实现无需刷新整个页面的数据交互。
下面是一些jq ajax的案例，帮助读者了解和掌握这一技术。
1. 实现简单的数据请求和展示在一个网页中，使用jq ajax发送请求获取后端数据，并将返回的数据展示在页面上。
例如，可以通过发送GET请求获取一个用户列表，然后使用jq将返回的数据渲染到页面上的表格中。
2. 动态加载页面内容使用jq ajax动态加载网页内容，可以减少页面加载时间和流量。
例如，可以通过发送GET请求获取一个文章列表，然后使用jq将返回的数据渲染到页面上的列表中。
当用户点击某个文章时，再使用jq ajax发送请求获取该文章的详细内容，并将内容展示在页面上。
3. 实现表单提交和数据验证使用jq ajax可以实现表单提交和数据验证的功能。
例如，在一个注册页面中，当用户填写完表单后，使用jq ajax发送POST请求将表单数据发送到后端进行验证。
如果验证通过，则返回成功的提示信息；如果验证失败，则返回失败的提示信息，并将错误信息展示在页面上。
4. 实现搜索功能使用jq ajax可以实现搜索功能，即在用户输入关键词后，通过发送GET请求获取相关的搜索结果，并将结果展示在页面上。
例如，在一个电影网站中，用户可以输入电影名称进行搜索，使用jq ajax发送请求获取相关的电影列表，并将列表展示在页面上。
5. 实现无限滚动加载使用jq ajax可以实现无限滚动加载功能，即在用户滚动页面到底部时，自动发送请求获取更多的数据，并将数据追加到页面上。
例如，在一个新闻网站中，当用户滚动到页面底部时，使用jq ajax发送请求获取更多的新闻列表，并将列表追加到页面上。
6. 实现图片上传和预览使用jq ajax可以实现图片上传和预览的功能。
例如，在一个头像上传页面中，用户选择一个图片文件后，使用jq ajax将文件发送到后端进行保存，并返回一个预览图片的URL，然后将预览图片展示在页面上。
宝信信息系统平台iPlat j介绍v
客户端
应用服务器
数据库
操作系统 应用软件
CPU 内存 硬盘 特殊需求
WinXP/2000/2003/Vista/7/2 008 IE6.0及以上版本 Chrome Safari Firefox
1G
Windows、Unix、 Windows、Unix、Linux Linux
Weblogic 9及以 上版本、
IT黑洞
用户
双输的结局
开发商
企业信息化存在的问题 IT黑洞
传统的信息系统建设方式无法适 应企业业务需求的不断变更，常 常陷入“建成即闲置”的尴尬局 面。 传统的信息系统建设方式开发效 率低下，造成企业IT系统的总体 拥有成本过高。 传统的信息系统建设方式难以控 制应用的质量，往往取决于开发 人员的个人能力和水平。 传统的信息系统建设方式往往受 限于底层技术，难以扩展和维护。
Drivers
信息系统平台 iPlat4j
iPlat4j的设计思想
让大规模的开发团队高效的进行开发，支持各种规模 的项目。 运行高可靠性、高性能。 功能及接口简单、统一。 对重复性工作进行抽取，提高项目的开发效率及质量。 保证平台的灵活性、可扩展性及可维护性，应对多样 化的需求。
目录
1 为什么要开发iPlat4j？（Why） 2 iPlat4j是什么？（What） 3 iPlat4j的特性 4 iPlat4j的应用案例 5 如何使用iPlat4j？（How）
企业信息化存在的问题 原因分析
IT黑洞问题：
传统信息系统的建设，是在底层的技术平台上直接构建业务 系统，并且也只能采用面向技术的、业务无关的编程工具来开发 管理系统 。这种低层次的软件开发模式，导致功能组件的大量重 复开发，IT人员更加关注于具体技术，而对关键的业务知识和技 能难以得到提炼和积累，使信息系统的开发、维护和扩展困难重 重，导致IT黑洞现象的普遍发生。
Ajax基本语法
Ajax基本语法案例代码：$(function(){$('#send').click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), content:$("#content").val()},//发送到服务器的数据dataType: "json",success: function(data){$('#resText').empty(); //清空resText⾥⾯的所有内容var html = '';$.each(data, function(commentIndex, comment){html += '<div class="comment"><h6>' + comment['username']+ ':</h6><p class="para"' + comment['content']+ '</p></div>';});$('#resText').html(html);}});});});1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:要求为String类型的参数，请求⽅式（post或get）默认为get。
注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。
3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
AJAX异步请求
AJAX异步请求同步请求和异步请求同步请求:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待,卡死状态.异步请求:客户端发送请求到服务器端,⽆论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死.AJAX的原理:页⾯发送请求,会将请求发送给浏览器内核中的AJAX引擎,ajax引擎会提交请求到客户端,在这段时间⾥,客户端可以任意操作,知道将数据返回给Ajax引擎后,会触发你设置的事件,从⽽执⾏⾃定义的js逻辑代码完成某种页⾯功能.AJAX的使⽤:基本步骤: 1.获得ajax请求 2.设置回调函数 3.确定请求路径 4.发送请求原⽣态JavaScript实现AJAX程序<script type="text/javascript">function func(){//创建ajax引擎对象var xmlhttp = new XMLHttpRequest()://ajax引擎对象绑定事件,监听服务器响应数据xmlhttp.onreadystatechange=function(){if(xmlhttp.readState == 4 && xmlhttp.status ==200){alert(xmlhttp.responseText);}}}xmlhttp.open("GET","/WEB/ajaxJS",true);xmlhttp.send();</script>$.get()函数是实现AJAX(带⽅法签名)1.参数url:请求的服务器地址2.参数data:提交的参数3.参数fn:服务器响应成功的回调函数4.参数dataType:服务器响应的数据格式(text或者json)注意使⽤格式:⽅法签名使⽤,必须以{} 形式包裹<script type="text/javascript">function ajaxGet(){$.get({//提交服务器的地址url:"/WEB/jqueryAjax",// 提交服务器的参数data:"name=zhangsan&age=20",// 相应成功后的回调函数,data是服务器响应的数据success:function(data){alert(data)},// 服务器响应的数据格式dataType:"text"});}</script>$.post()函数实现AJAX(带⽅法签名)get和post函数的写法⼀致,区别在于get提交参数在请求⾏,⽽post提交参数在请求体.<script type="text/javascript">function ajaxPost(){$.post({//提交服务器的地址url:"/WEB/jqueryAjax",// 提交服务器的参数data:"name=zhangsan&age=20",// 相应成功后的回调函数,data是服务器响应的数据success:function(data){alert(data)},// 服务器响应的数据格式dataType:"text"});}</script>$.get()函数实现AJAX(不带⽅法签名)注意格式:不带⽅法签名,去掉{},不在需要写⽅法签名,例如url:data:等,但是注意参数的顺序不能出现错误,参数的书序必须是:url>data>success>dataType,$.post和get⽤法⼀致,不在重复.<script type="text/javascript">function func(){$.get(//提交到服务器地址"/WEB11/jqueryAjax",//要提交到服务器的数据"username=zhangsan&age=18",//相应成功后的回调函数，data是服务器响应的数据function(data){alert(data);},//服务器响应的数据格式"text");}</script>$.post()函数实现AJAX(不带⽅法签名的)和$.get出⼊不⼤<script type="text/javascript">function func(){$.post(//提交到服务器地址"/WEB11/jqueryAjax",//要提交到服务器的数据"username=zhangsan&age=18",//相应成功后的回调函数，data是服务器响应的数据function(data){alert(data);},//服务器响应的数据格式"text");}</script>$.ajax()函数实现AJAX$.ajax⽅法是get和post的底层实现⽅法,该⽅法使⽤更加灵活,参数更加丰富,并可以设置异步或者同步,上层⽅法简单易⽤,代码量较少,底层⽅法灵活性更强,⽅法签名更多,代码量⽐较多.<script type="text/javascript">$.ajax({async:true, //同步或者异步data:"name=zhangsan&age=22",//请求参数dataType:"text",//返回的数据格式error:function(){//请求失败alert("error");},success:function(data){//响应成功,返回的数据alert(data);},type:"GET",url:"/WEB11/jqueryAjax"});</script>JSON数据格式JSON(javascript Object Notation)是⼀种轻量级的数据交换格式.JSON采⽤完全独⽴于语⾔的⽂本格式,就是说不⽤的编程语⾔JSON数据是⼀致的.JS原⽣⽀持JSON.JSON的两种数据格式 数组格式:[obj,obj,obj...] 对象格式:{"key1" : obj ,"key2" : obj,"key3" : obj....} 两种格式可以进⾏任意的嵌套.案例⼀:<script type="text/javascript">/*** 案例⼀* {key:value,key:value}** class Person{* String firstname = "张";* String lastname = "三丰";* Integer age = 100;* }** Person p = new Person();* System.out.println(p.firstname);*/var json = {"firstname":"张","lastname":"三丰","age":100};alert(json.firstname+":::"+json.age);</script>案例⼆<script type="text/javascript">/*** 案例⼆* [{key:value,key:value},{key:value,key:value}]*/var json = [{"lastname":"张","firstname":"三丰","age":100},{"lastname":"张","firstname":"⽆忌","age":99},{"lastname":"张","firstname":"翠⼭","age":98}];for(var i=0;i<json.length;i++){alert(json[i].firstname+":::"+json[i].age);}alert(json[1].age);</script>案例三<script type="text/javascript">/*** 案例三* {* "param":[{key:value,key:value},{key:value,key:value}]* }*/var json = {"baobao":[{"name":"zhangsan",age:15},{"name":"lisi",age:20}]};for(var i = 0 ; i <json.baobao.length;i++){alert(json.baobao[i].name+"...."+json.baobao[i].age);}</script>案例四<script type="text/javascript">/*** 案例四* {* "param1":[{key:value,key:value},{key:value,key:value}],* "param2":[{key:value,key:value},{key:value,key:value}],* "param3":[{key:value,key:value},{key:value,key:value}]* }*/var json = {"baobao":[{"name":"zhangsan","age":20},{"name":"lisi","age":25}],"haohao":[{"name":"wangwu","age":30},{"name":"zhaoliu","age":10}]};alert(json.haohao[0].name);</script>AJAX的JSON数据使⽤客户端向服务器发送请求,服务器响应的数据必须是json格式.<script type="text/javascript">function func(){$.post("/WEB11/ajaxJson",function(data){alert(+"..."+data.age);},"json");}</script>Java数据转成json格式数据json的转换插件是通过java的⼀些⼯具,直接将java对象或者集合转换成为json字符串,常⽤的json转换⼯具有如下⼏种: 1.jsonlib 2.Gson:googlepublic void doGet(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException {User user = new User();user.setId(100);user.setUsername("tom");user.setPassword("123");User user2 = new User();user2.setId(200);user2.setUsername("jerry");user2.setPassword("456");List<User> list = new ArrayList<User>();list.add(user);list.add(user2);// String json = JSONObject.fromObject(user).toString();String json = JSONArray.fromObject(list).toString();Gson gson = new Gson();json = gson.toJson(list);response.getWriter().write(json);}案例⽤户名的异步校验实现思路为:1.<input name="username"> 失去焦点时，使⽤$.post() 将⽤户名username以ajax⽅式发送给服务器2. 服务器获得⽤户名，并通过⽤户名查询⽤户 1. 如果⽤户名存在，返回不可⽤提⽰ 2. 如果⽤户名可⽤，返回可⽤提⽰3. 根据服务器响应的json数据，控制提⽰信息的显⽰和提交的按钮是否可⽤。
a4j参考文档
A4J 用户指南 (转载请注明博客：天空的颜色) 目录1. 介绍2. 开始使用Ajax4jsf环境需求下载Ajax4jsf安装简单的 AJAX Echo 项目JSP 页面数据 Beanfaces-config.xmlWeb.xml部署3. Ajax4jsf 框架的基本概念介绍结构概览如何做...发送一个AJAX 请求决定发送什么决定改变什么4. Ajax4JSF 组件库a4j:ajaxListenera4j:regiona4j:pagea4j:supporta4j:commandLinka4j:commandButtona4j:outputPanela4j:actionparama4j:statusa4j:loadBundlea4j:mediaOutput5. Ajax4jsf内建的换肤功能6. 技术要求支持的java版本支持的 JavaServer Faces 实现支持的服务器支持的浏览器7. 附加的设置Web程序描述符参数Sun JSF RIApache MyFacesFacelets 支持JBoss Seam 支持8. 与IDE集成9. Exadel VCP 和 Ajax4jsf10. Web上的资源List of Tables4.1. a4j:ajaxListener attributes4.2. a4j:region attributes4.3. a4j:page attributes4.4. a4j:support attributes4.5. a4j:commandLink attributes4.6. a4j:commandButton attributes4.7. a4j:outputPanel attributes4.8. a4j:actionparam attributes4.9. a4j:status attributes4.10. a4j:loadBundle attributes4.11. a4j:mediaOutput attributes7.1. Initialization Parametres7.2. org.ajax4jsf.Filter Initialization Parametres10.1. Ajax4jsf Resources序言:Ajax4JSF是一个很容易使用的框架.有什么问题可以在JSF中文论坛讨论.Chapter 1. 介绍这里是一些介绍a4j的内容,暂时先不翻译了,等有时间再补充上.Ajax4jsf 是一个添加Ajax功能到JSF项目中的开源框架,使用该框架不用写JS 代码.Ajax4jsf 充分利用了JSF框架的优点,如: 生命周期, 验证, 转换的灵活性和受管理的静态和动态资源. 使用Ajax4jsf, 具有Ajax支持的富组件和高度可自定义的外观感觉可以很容易的与JSF结合起来.Ajax4JSF 被设计用来:在使用Ajax时充分显示JSF的优点.Ajax4jsf 完全被结合到 JSF 生命周期中. 当其他框架仅仅给你访问Managed Bean的便利时,Ajax4JSF带给你 Action 和Value Change 监听器,激活服务端验证,在Ajax请求-响应周期中的转化这些功能.添加 AJAX 功能到已经存在的 JSF 项目. 该框架被实现为使用一个组件库来添加ajax功能到你的页面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持. 这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后如何使用JSF组件树来同步显示JSF页面.使用内建的Ajax支持写自定义富组件. 将来, 我们将有一个完全的组件开发包(CDK)来支持AJax4JSF. CDK 将包含代码生成工具和一个使用类似JSP语法的模版工具.这些功能将去除一些创建组件的一个例行工作.使用这个喝满油的组件工厂机器来创建一个带有 Ajax功能的富组件将比使用传统的编码过程创建一个简单的组件还要简单.项目的Java类与资源包. 除了核心的 AJAX 功能外, Ajax4jsf 也有管理资源的高级支持,例如:图片,JS代码和CSS样式表单,资源框架使简单的打包这些资源到你自定义组件的Jar文件中成为可能.动态(on-the-fly)将非常容易. 作为另外一种附加的功能, 资源框架有一个动态产生图片的工具. 使用这个特性,你可以使用类似于使用Java Graphic2D库的方法来创建图片.使用基于皮肤的技术来创建一个现代富用户界面的外观感觉(look-and-feel). Ajax4jsf 提供一个换肤特性 . 该特性允许通过命名的皮肤参数来简单的定义和管理不同颜色模式与其他UI特性. 你可以从JSP代码和Java代码(例如:基于UI的文本来产生动态的图片)来访问这些皮肤参数 . 注意:, 虽然换肤功能不是完全的替代传统的CSS,但是它还是值得称赞的.测试components, actions, listeners, 和 pages 就像你在创建他们一样容易. 一个制动测试工具正在开发中 .它将在你开发组件使为你的组件产生测试案例. 该测试框架不仅仅测试组件,也测试服务端和客户端的功能包括JS代码 .作为附加的有用工具,你不需要单独的部署测试程序到Servlet容器中就可以做到这些了.Ajax4JSF 组件已经可以使用了, 因此开发者可以立即使用这种省时的具有高级特性的工具来创建提供了更快更可靠的用户体验的Web程序了. Chapter 2. 开始使用Ajax4jsfTable of ContentsEnvironmentDownloading Ajax4jsfInstallationSimple AJAX Echo ProjectJSP PageData Beanfaces-config.xmlWeb.xmlDeployment环境要求要使用Ajax4JSF 框架你仅仅需要JDK1.4或者更高,任何JSF实现,和你最喜欢的Servlet容器.在下一章我们将给你提供详细的环境信息.Ajax4jsf 被设计为一个容易使用的框架.仅仅有一点简单的设置步骤就可以在你的JSF程序中使用Ajax功能了.下载 Ajax4jsf最新的Ajax4jsf 发布版在这里https:///nonav/ajax/ajax-jsf/download.html下载. 安装∙解压 ajax4jsf.zip 文件.∙复制 ajax4jsf.jar and oscache-2.2.jar 到程序的 WEB-INF/lib 文件夹下.∙把下面的内容添加到你的程序的 WEB-INF/web.xml 文件中:∙ <filter>∙ <display-name>Ajax4jsf Filter</display-name>∙ <filter-name>ajax4jsf</filter-name>∙ <filter-class>org.ajax4jsf.Filter</filter-class>∙ </filter>∙ <filter-mapping>∙ <filter-name>ajax4jsf</filter-name>∙ <servlet-name>Faces Servlet</servlet-name>∙ <dispatcher>REQUEST</dispatcher>∙ <dispatcher>FORWARD</dispatcher>∙ <dispatcher>INCLUDE</dispatcher>∙ </filter-mapping>注意. 你可以复制和粘贴上面的内容在 README.txt 文件中.∙添加下面的内容:∙ <%@ taglib uri="https:///ajax"prefix="a4j"%>到你每个使用Ajax功能的JSP页面中.简单的 AJAX Echo 项目让我们来看一个简单的JSF项目. 我们仅仅需要一个JSP页面,里面包含一个Form和一些JSF标签: <h:inputText> 和 <h:outputText>.我们这个简单的程序应该可以让我们输入一些文字到<h:inputText>中, 然后发送数据到Server,并在 <h:outputText>中显示Server的响应(给我们一个Echo 信息).JSP 页面下面是一个我们需要的页面代码 (echo.jsp) :<%@ taglib uri="https:///ajax" prefix="a4j"%> <%@ taglib uri="/jsf/html" prefix="h"%><%@ taglib uri="/jsf/core" prefix="f"%><html><head><title>repeater </title></head><body><f:view><h:form><h:inputText size="50" value="#{bean.text}" ><a4j:support event="onkeyup" reRender="rep"/></h:inputText><h:outputText value="#{bean.text}" id="rep"/></h:form></f:view></body></html>就如你看到的,唯一一行于常给JSF页面代码不同的就是下面的一行<a4j:support event="onkeyup" reRender="rep"/>在这里我们在父标签(<h:inputText>)中添加了一个AJAX 支持. 该支持绑定了JavaScript事件“onkeyup” .因此, 每一次该事件发布给父标签时,我们的程序将发送一个AJAX请求到Server.这意味着我们的受管理的bean将包含该“text” 域中我们输入的最新数据.<a4j:support> 标签的“reRender” 属性(attribute)定义我们的页面的哪一部分被更新. 在这里,该页面唯一被更新的部位是 <h:outputText> 标签,因为他的ID值和“reRender” 的属性值向匹配. 在一个页面中更新多个元素(elements)也是很简单的:仅仅把他们的IDs放在“reRender” 属性中就可以了.数据 Bean当然了,为了运行这个程序我们还需要一个受管理的beanpackage demo;public class Bean {private String text;public Bean() {}public String getText() {return text;}public void setText(String text) {this.text = text;}}faces-config.xml下一步, 我们需要在faces-config.xml 中注册上面的bean:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN""/dtd/web-facesconfig_1_1.dtd"><faces-config><managed-bean><managed-bean-name>bean</managed-bean-name><managed-bean-class>demo.Bean</managed-bean-class><managed-bean-scope>request</managed-bean-scope><managed-property><property-name>text</property-name><value/></managed-property></managed-bean></faces-config>注意:这里没有任何东西直接和Ajax4jsf 有关联.Web.xml最后,不要忘了添加jar文件和更改 web.xml 文件:<?xml version="1.0"?><web-app version="2.4" xmlns="/xml/ns/j2ee" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><display-name>a4jEchoText</display-name><context-param><param-name>javax.faces.STATE_SAVING_METHOD</param-name><param-value>server</param-value></context-param><filter><display-name>Ajax4jsf Filter</display-name><filter-name>ajax4jsf</filter-name><filter-class>org.ajax4jsf.Filter</filter-class></filter><filter-mapping><filter-name>ajax4jsf</filter-name><servlet-name>Faces Servlet</servlet-name><dispatcher>REQUEST</dispatcher><dispatcher>FORWARD</dispatcher><dispatcher>INCLUDE</dispatcher></filter-mapping><listener><listener-class>com.sun.faces.config.ConfigureListener</listener-class></listener><!-- Faces Servlet --><servlet><servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><!-- Faces Servlet Mapping --><servlet-mapping><servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern></servlet-mapping><login-config><auth-method>BASIC</auth-method></login-config></web-app>就这样了, 现在你的程序应该可以工作了.部署最终,你可以在Servlet容器中部署你的程序了. 在你喜欢的容器中部署,然后在你的浏览器中输入: http://localhost:8080/a4jEchoText/echo.jsfChapter 3.Ajax4jsf 框架中的基本概念Table of ContentsIntroductionArchitecture OverviewHow To...Send an AJAX RequestDecide What to SendDecide What to Change介绍该框架被实现为使用一个组件库来添加ajax功能到你的页面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持. 这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后如何使用JSF组件树来同步显示JSF页面. (This means you can define the event on the page that invokes an AJAX request and the areas of the page that should be synchronized with the JSF Component Tree after the AJAX request changes the data on the server according to the events fired on the client).下面的图片展示了它是如何工作的:Ajax4jsf 允许你定义(意味着通过JSF tags)你希望通过AJAX请求更新的JSF 页面的不同部分并且提供的一些发送AJAX请求到服务器端的选项,除了你的JSF 页面于常规的JSF有点不同外,没有其他的不同了,这是一个你不需要写JS代码和XMLHttpRequest对象的天堂.结构概览下面的图片展示了Ajax4jsf 框架的一些重要的元素Ajax 过滤器(Filter). 为了得到应用 Ajax4jsf 的好处你必须在在 web.xml 文件中注册一个Ajax Filter.该过滤器有一些职责. Ajax Filter 可以识别多种ajax请求种类. 图片3的序列图展示了在处理常规页面和AJAX请求页面的不同之处.在开始的情况下,所有的JSF树将被编码(encoded). 在第二种情况下依据AJAX 区域(region) (你可以通过使用<a4j:region> tag来定义AJAXregion )的大小(size). 就如你看到的,第二种情况下过滤器将解析AJAX响应的内容,在它被发送到客户端以前, 查看下面的图片来理解这两种方式:在这两种情况下, 你的程序所需要的静态或者动态资源的信息将被注册到ResourseBuilder 类中.当请求一个资源时(图片4),AJAX filter 检查资源缓存(Resource Cache)看看这个资源是否存在,如果存在该资源将被送到客户端.否则过滤器将在ResourceBuilder中搜索注册的资源. 如果该资源被注册了,AJAX filter将发送一个请求到 ResourceBuilder来创建[create (deliver)]该资源.下面的图片显示了请求资源的处理过程.Ajax动作组件(Action Components). 有3个Ajax动作组件: AjaxCommandButton, AjaxCommandLink 和 AjaxSupport. 你可以使用他们从客户端发送AJAX请求.Ajax容器 (Containers). AjaxContainer 是一个接口,该接口描述了在Ajax 请求中应该被解码(decoded)的JSF页面中的一个区域.AjaxViewRoot 和AjaxRegion 实现了该接口.JavaScript引擎 (Engine). Ajax4jsf JavaScript 引擎在客户端运行. 它知道如何根据来自于Ajax响应的信息来更新你JSF页面上的不同的区域. 程序开发者不需要直接使用这里的JavaScript代码.它自动的下载到客户端.如何做...发送一个 AJAX 请求从JSF页面发送ajax请求有不同的方法. 你可以使用 <a4j:commandButton>, <a4j:commandLink> 或者 <a4j:support> tags.所有的这些标签隐藏了在创建一个XMHttpRequest 对象和发送ajax请求所需要的JavaScript 活动.并且, 他们允许你选择页面中那个JSF组件被重新渲染(re-rendered) 来表现Ajax响应的结果 (你可以列出他们的 IDs 在“reRender” 属性中).<a4j:commandButton> 和 <a4j:commandLink> tags 用来在“onclick” JavaScript 事件中发送Ajax请求.在你选择JS事件(“onkeyup”, “onmouseover”, etc)时, <a4j:support> tag 允许你在普通的JSF组件中添加Ajax 功能和发送ajax请求.提供Ajax请求功能的大部分重要的属性如下:∙reRender 属性 - 就如我们前面提到过的,在一个Ajax响应到来时重新渲染(reRendered)组件.∙RequestDelay 属性–用来调节请求的频率.∙ <h:inputText size="50" value="#{bean.text}">∙<a4j:support event="onkeyup" RequestDelay=”3”/>∙ </h:inputText>因此每一个来自于键盘事件的请求将会延迟3 ms ,来减少请求的次数.∙EventsQueue –储存下一个请求的队列的名字. 队列帮助阻止下一个请求知道当前的处理完.∙LimitToList 用来控制更新的区域. 设置为true –将更新仅在reRender list中的区域, 如果为false,将更新所有Output Panels区域.∙ajaxSingle 如果设置为false用来指定发送请求的区域–如果为true则发送整个区域 - only control caused event.(attributesspecify regions to be sent with request if false –it’ll be full region in other case - only control caused event.)决定发送什么你可能描述了一个你决定发送到服务器的页面区域.当你发送ajax请求的时候,通过这种方式你可以控制JSF View的那个部分在服务器端被解码(decoded).描述你JSF页面上的一个Ajax区域的最容易的方法是什么都不做.这是因为在<f:view> 和 </f:view> tags 中的内容在默认值的情况下认为是ajax区域.通过使用<a4j:region> tag你可以在一个JSF页面中定义多个Ajax区域 (they can even be nested).如果你希望渲染ajax响应以外的区域,那么renderRegionOnly属性值应该设置为false.否则ajax更新被限制在活动区域的元素中.决定改变什么在大部分情况下都可以使用“reRender”中的ids来定义需要更新的“AJAX zones”.但是如果你的页面包含<f:verbatim/> tag(你希望在ajax响应中更新它的内容)你不可以使用这种方式.我们在上面描述的<f:verbatim/> tag 的问题涉及到JSF组件的transientFlag 值. 如果该标记的值为true,这个组件不能参与保存和恢复组件树(saving or restoring)的处理过程.为了提供一种解决这个问题的方法, Ajax4jsf 利用<a4j:outputPanel> tag定义了一个output panel . 如果你把<f:verbatim/> tag放在output panel中, 那么在AJAX 响应中 <f:verbatim/> tag和其他panel中的child tags中的内容可以被更新 .有两种方法来控制它:∙设置“ajaxRendered” 属性值为true.∙设置动作组件的“reRender” 属性值为output panel的 ID.Chapter 4. Ajax4JSF 组件库Table of Contentsa4j:ajaxListenera4j:regiona4j:pagea4j:supporta4j:commandLinka4j:commandButtona4j:outputPanela4j:actionparama4j:statusa4j:loadBundlea4j:mediaOutputa4j:ajaxListener和 ActionListener或者ValueChangeListener的工作方式一样, 只是仅用于AJAX容器. 添加一个指定的类作为AjaxEvent的监听器. (sent in case of an AJAX request for this container).Table 4.1. a4j:ajaxListener attributes<a4j:region selfRendered="true" ajaxListener="#{bean.processAjax}" id="Region">…</a4j:region>当来自于Region的AJAX request触发时,将调用bean的'processAjax'方法. a4j:region该标签定义在AJax请求处理过程中被发送到服务器端解码的部分JSF组件树.Table 4.2. a4j:region 的属性<a4j:region><!--Some content--><a4j:region>如果在该组件的区域中有一个Ajax 请求调用了 – 该区域将根据Ajax 的设置被框架处理.a4j:page该组件呈现一个完全的HTML 页面结构.它必须是view root (JSP <f:view> tag)的第一个(并且是仅有的一个)子组件. 没有Html 代码可以在该组件的外面. 它也支持在Ajax 请求中处理子组件,就和<a4j:region>一样.对于一个普通的请求,它将把结果呈现为在客户端页面< head>元素中的<script>元素.如果该组件包含一个"head" facet, 该facet 的内容也呈现在<head>中.对于一个Ajax 请求,在整个结构中仅仅涉及到的组件被呈现.下面是个在JSP (jspx version)中使用它的例子:<jsp:root xmlns:....<f:view><a4j:page><f:facet name="head">...</f:facet><!-- page content here --></a4j:page></f:view></jsp:root>Table 4.3. a4j:page attributes<a4j:page><f:facet name=”head”>…</f:facet>…<a4j:page>上面的示例结构将被呈现为:<HTML><HEAD>…</HEAD><body >…</body></HTML>a4j:support在 UIComponent-based组件上添加ajax功能,使他们有JavaScript事件属性. 在解码期间:如果一个请求为Ajax-performed, 从ExternalContext 中的requestParameterMap属性中得到Map,如果该Map中"clientId" key对应的值非空,在组件上创建一个 javax.faces.event.ActionEvent, 并且传递该事件到该组件的queueEvent()中,然后把他的reReander区域中的组件id添加到reReander属性中.在编码过程中.不编码一个组件. 相反的,在父组件上添加一个与事件属性的值相同的值绑定(Instead, it adds ValueBinding for a property of the parent component with the name as a value of its "event" property).结果,当呈现时,父组件创建一个在提交一个ajax请求时用到的JS代码.如果该组件有子UIParameter组件,添加他的 name/value作为附加的请求参数.如果父组件是一个UIInput的实例,并且ajaxType属性是input, 则也提交input 域中的值. 在这种情况下,你可以在UIForm外面提交一个单一的input 域. (As a result, when rendered, the parent component builds JavaScript code for submitting an AJAX request on this event. If the component has child UIParameter components, appends it's name/value as additional request parameters. If a parent component is an instance of UIInput andthe ajaxType property is "input", submits the value of the input field, also. In this case, you can submit a single input field outside of UIForm.)Table 4.4. a4j:support 属性所有你需要指定的东西 - 父组件用来触发ajax请求的事件和被reRender的区域, 和处理事件的Java bean方法.<a4j:region selfRendered="true">…<h:selectBooleanCheckbox value="#{pizza.tip}"><a4j:support event="change" reRender="#{partsId.list}"action="#{Some.show_hide}"/></h:selectBooleanCheckbox>…</a4j:region>因此,在上面的例子中,checkbox状态的改变将提交当前的区域. 'show_hide'动作将被调用,并且 'list'中的id所指定的组件将被更新.a4j:commandLink呈现一个Html <a> 元素,当点击时的动作就象一个form提交一样.在解码的过程中:从ExternalContext的属性requestParameterMap中得到一个Map,如果该Map中包含"clientId" key的非空值, 在组件上创建一个javax.faces.event.ActionEvent 事件,并且传递该事件给组件的queueEvent() 方法.如果该请求是Ajax-performed,把reRander属性中的IDs值添加到嵌套的AjaxContainer的 rendered areas list中 ,在解码的过程中也添加组件的参数(PARAM_NAME 和 PARAM_VALUE 是任何嵌套的子UIParameter的names 和values .) names 和 values必须是被URLEncoded处理过的.如果styleClass 属性被指定了,呈现它的值为html中的class属性的值. 呈现任何non-UIParameter子组件为<a>的相应的子组件. 这些看起来就像一个Link文本.Table 4.5. a4j:commandLink attributes通常a4j:commandLink 是一个具有AJAX 支持的HTML <input> 元素. 包含所有的a4j:support的主要功能, 还有它自己的onclick事件的Ajax请求和所有与a4j:Support组合的CommandLink特性.a4j:commandButton呈现一个HTML "input" 元素.在解码的过程中:从ExternalContext的属性requestParameterMap中得到一个Map,如果该Map中包含"clientId" key的非空值, 在组件上创建一个javax.faces.event.ActionEvent 事件,并且传递该事件给组件的queueEvent() 方法.如果该请求是Ajax-performed,把reRander属性中的IDs值添加到嵌套的AjaxContainer的 rendered areas list中 .在编码的过程中:为onclick事件创建一个AJAX.Submit JavaScript调用.呈现组件的clientId 为name属性的值.呈现组件的当前值为value属性的值.如果styleClass属性被指定了,呈现它的值为class属性的值. 呈现 HTML "input"元素的子元素.Table 4.6. a4j:commandButton attributes简单来说a4j:CommandButton 是一个带有AJAX Support的 HTML <input> 元素 . 包含所有的a4j:support的主要功能, 还有它自己的onclick事件的Ajax请求和所有与a4j:Support组合的CommandButton特性.a4j:outputPanel创建页面中具有 AJAX-enabled的一个区域. 作为普通的请求,根据layout的属性值("inline" or "block")呈现为 <span> 或者 <div> HTML 元素. ( "id"属性将是clientId 属性的值.) 对于一个AJAX请求,如果ajaxRendered被设置为true,该元素的内容被包含在ajax响应中.Table 4.7. a4j:outputPanel attributes<h:form><a4j:region><h:outputText value="Input your name" /><a4j:outputPanel><h:message for="userName" style="color:red" /></a4j:outputPanel><h:inputText id="un" value="#{erName}" required="true"/><a4j:outputPanel id="test" layout="block"><h:outputText value="#{erName}" /></a4j:outputPanel><a4j:commandButton value="submit"></a4j:commandLink></a4j:region></h:form>在上面的例子中,在每个a4j:commandButton请求时 OutputPanels 中的outputText 将被 reRendered. 当验证错误时,消息将出现;或者,text将重复出现.a4j:actionparam联合两个JSF tags的桥梁, <f:actionListener>; 和 <f:param>. 在呈现阶段,像往常一样被符组件 (<h:commandLink>; 或者 like) 解码,在处理请求阶段,如果父组件执行一个动作事件, 更新"assignTo" 属性的值为它的新值.如果一个转换属性被指定了,使用它来编码和解码该值为保存在html 参数中的字符串.Table 4.8. a4j:actionparam attributesa4j:status在客户端呈现一个表现ajax请求状态的标识.在编码过程中:创建两个带有id的该组件的子(clientId )span元素,或者添加了":status.start" 和 ":status:stop" 字符串的 ajax区域的目标(使用for属性来指定). "start" span 具有 "display:none" style (隐藏).在span里面,呈现startText/stopText属性值或者如果"start" 和 "stop" facets存在的话,呈现facets的内容. 在执行一个ajax请求时, 客户端的js代码改变 "start" span 的可见属性并且隐藏"stop". 当该指示器所指示的请求都完成时,恢复"stop" 并且隐藏"start" .start[style,styleClass] 和stop[style,styleClass] 被呈现为 spans 的 style 和 class 属性 .During Encoding: Creates two "span" elements with id created as clientId of this component or of target AJAX region (pointed to by the "for" property) with appended ":status.start" and ":status:stop" strings. "start" span has "display:none" style (hidden). Inside this span, renders the value of the startText/stopText properties or, if they exist, the content of "start" and "stop" facets. On performing an AJAX request, the client-side script changes the visibility of the "start" span and hides "stop". After all requests for this indicator are completed, restores "stop" and hide "start" start[style,styleClass] andstop[style,styleClass] are rendered for spans as style and class atributes, respectivetly.在解码的过程中:....Creates two "span" or "div"(depending on 'layout' attribute) elements with id created as clientId of this component or of target AJAX region (pointed to by the "for" property) with appended ":status.start" and ":status:stop" strings. "start" element has "display:none" style (hidden). Inside this element, renders the value of thestartText/stopText properties or, if they exist, the content of "start" and "stop" facets. On performing an AJAX request, the client-side script changes the visibility of the "start" element and hides "stop". After all requests for this indicator are completed, restores "stop" and hide "start" start[style,styleClass] and stop[style,styleClass] are rendered for spans as style and class atributes, respectivetly.Table 4.9. a4j:status attributes指示请求状态的两种表示方式:1.定义 "startText" 和 "stopText" 属性2. <a4j:status startText="Performing Request"3. stopText="Request Done"4. for="stat1"/>5.定义 "start" 和 "stop" facets6. <a4j:status for="stat2">7. <f:facet name="start">8. <h:graphicImage value="/images/ajax_process.gif" />9. </f:facet>10. <f:facet name="stop">11. <h:graphicImage value="/images/ajax_stoped.gif" />12. </f:facet>13. </a4j:status>在任何一种状态下,当请求开始时 - ":status.start" span 将被呈现并且在请求结束后":status.stop" span 将出现.将状态应用到组件上也有两种方法:1.指定目标 AJAX Containers 的id为“for” 属性的值2.在组件上定义“status” 属性指定到状态.如果for省略了 - 状态组件将指向它所在的区域(status component will be pointed to region where it's placed )a4j:loadBundle加载一个本地化当前view的资源包,并且暴露它(作为一个Map)为当前请求的请求参数. In difference of original f:loadBundle tag, stored in components tree and activate on ajax/non ajax responsesTable 4.10. a4j:loadBundle attributesa4j:mediaOutput用用户指定的资源( images, sounds, video, active objects, applets ...)来创建任何连接元素类型的类.在CreateContent属性中指定的方法将把从DataBean中指定的值传递给OutputStream.重要: 在value中指定的数据bean 必须实现Serializable接口.Table 4.11. a4j:mediaOutput attributes在our Examples page.上有个创建图片的示例. 就像我们前面提到的一样,任何实现了 Serializable的 Bean 都可以是createContent方法的数据提供者.Chapter 5. Ajax4jsf中的更换皮肤功能Ajax4jsf 提供了一种在UI设计中很容易使用的换皮肤功能.使用这个框架,你可以很容易的在资源文件中使用命名皮肤参数来控制程序的显示外观.这里有个例子,提供了几种皮肤:/vcpDemo/使用Ajax4jsf 框架的skinability 服务,你可以很容易的控制程序的look-and-feel. 在Ajax4jsf的帮助下,使用skinability 服务,你可以在标准的JSF组件和自定义的JSF组件中定义相同的风格 .为了使用skinability 功能,请按照下面的步骤来:1.创建一个自定义的render kit并且在faces-config.xml 中注册它:2. <render-kit>3. <render-kit-id>NEW_SKIN</render-kit-id>4. <render-kit-class>5. org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl6. </render-kit-class>7. </render-kit>8.然后,我们需要为已经定义好的组件皮肤创建和注册自定义renderers (Then we need to create and register custom renderers for the component skins based on the look-and-feel predefinedvariables that have been defined for the render-kit):9. <renderer>10. <component-family>mand</component-family>11. <renderer-type>javax.faces.Link</renderer-type>12. <renderer-class>13. newskin.HtmlCommandLinkRenderer14. </renderer-class>15. </renderer>16.最后,我们需要放置一个保存皮肤参数的属性文件在类路径根目录下面.该属性文件有两个要求:∙文件名必须是<name of renderer class>.skin.properties ― 在上面的例子中将是newskin.skin.properties .∙文件的第一行应该是 render.kit=<render-kit-id>― 在上面的例子中将是 render.kit=NEW_SKIN .关于创建自定义 renderers 的更多的信息可以在下面的连接中找到:/javaee/javaserverfaces/reference/docs/index.html Chapter 6. 技术要求Table of ContentsSupported Java VersionsSupported JavaServer Faces ImplementationsSupported ServersSupported Browsers下面是你使用 Ajax4jsf的技术条件.∙Java∙JavaServer Faces∙Java application server or servlet container∙Browser (on client side)支持的 Java 版本∙JDK 1.4 - 1.5支持的 JavaServer Faces 实现(注意: Ajax4JSF 也和 Facelets JSF 组件兼容.)∙Sun JSF 1.1RI∙JSF 1.2∙MyFaces 1.1.1 - 1.1.3支持的 Servers∙Apache Tomcat 4.1 - 5.5∙IBM Web Sphere 5.1 - 6∙BEA Web Logic 8.1 - 9∙Oracle AS / OC4J 10.1.3∙Resin 3.0∙Jetty 5.1.X∙Sun Application Server 8 (J2EE 1.4)∙Glassfish (J2EE 5)∙JBoss 3.2 - 4.0支持的 Browsers∙IE 5 - 6∙FireFox 1.0 - 1.5∙Opera 8.0 - 9.0∙Netscape 7.0Chapter 7. 附加的设置Table of ContentsWeb Application Descriptor parametresSun JSF RIApache MyFacesFacelets SupportJBoss Seam SupportAjax4jsf支持JSF中的所有组件和标签.在一个已经存在的JSF项目中添加Ajax4jsf支持,你必须把Ajax4jsf 库放在项目的lib目录下,并且在web.xml 文件中添加过滤器mapping.如果仅仅添加Ajax4JSF功能则已经存在的项目的行为将不会改变.web项目描述参数这些参数帮助开发和提高Ajax4JSF的扩展性.Table 7.1. 初始化参数Table 7.2. org.ajax4jsf.Filter 初始化参数Sun JSF RIAjax4jsf 与任何JSF (both JSF 1.1 and JSF 1.2) 实现都兼容.不需要附加的设置就可以和大部分JSF 组件库共同工作. 更多的信息参考:Apache MyFacesAjax4jsf 与所有的Apache MyFaces versions (1.1.1 - 1.1.3)兼容,并且包含附加的类库,如: Tomahawk Sandbox 和将来的Trinidad (以前的 ADF Faces). 但是有一些东西需要配置,为了使 MyFaces 和 Ajax4jsf更好的共同工作.。
ajaxsubmit使用案例
ajaxsubmit使用案例AjaxSubmit是一个用于异步提交表单的插件，使用Ajax技术将表单数据发送到服务器端进行处理，并且可以实现页面无刷新地获取服务器的返回结果。
在实际应用中，AjaxSubmit有很多使用案例，下面以一个用户注册的表单为例，详细介绍AjaxSubmit的使用方法。
1. 引入jQuery和AjaxSubmit插件：在HTML页面中引入jQuery和AjaxSubmit插件的JavaScript文件：```html<script src="jquery.min.js"></script><script src="jquery.form.min.js"></script>```2.创建表单：在HTML页面中创建一个表单，并给表单添加id和action属性：```html<form id="registerForm" action="register.php" method="post"> <input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"> <input type="submit" value="注册"></form>```3.编写处理表单的服务器端代码：在register.php文件中编写PHP代码，用于处理表单提交的数据，例如将数据存入数据库：```php<?php$username = $_POST['username'];$password = $_POST['password'];$email = $_POST['email'];//这里可以将数据存入数据库或进行其他相应的处理//返回处理结果$response = array('status' => 'success', 'message' => '注册成功');echo json_encode($response);>```4. 编写AjaxSubmit的JavaScript代码：在页面中使用JavaScript编写AjaxSubmit的代码，实现表单的异步提交：```javascript$(document).ready(functio$('#registerForm').ajaxFormsuccess: function(response)//处理服务器返回的数据var result = JSON.parse(response);if (result.status === 'success')//注册成功，显示成功信息alert(result.message);} else//注册失败，显示错误信息alert(result.message);}}});});```以上就是一个简单的使用AjaxSubmit插件实现表单异步提交的案例。
JSP Ajax实例
JSP Ajax实例在前面的章节介绍了JavaScript、XML、CSS、DOM以及XMLHttpRequest对象。
在本节中，将以案例的方式介绍，在客户端利用JavaScript代码和XMLHttpRe quest对象编写Ajax代码，实现客户端与服务器端的通信。
首先创建服务器端代码，打开记事本，输入下列代码：将上述代码保存，名称为number1.jsp。
在文件中，主要实现获取客户端传递的参数birthDate的值，并依据获取的值返回1或2。
将该文件直接保存Tomcat安装目录下，即C:\Tomcat 6.0\webapps\ajax下。
将上述代码保存，名称为numbr.jsp。
将该文件同上面文件保存在同一个文件内即可。
启动Tomcat服务器，打开IE浏览器，在地址栏中输入http://localhost:8080/ ajax/number.jsp，单击【转到】，会显示HTML网页窗口，在【输入数字】文本域中输入数字5，会显示如图8-12所示窗口。
在该文本域中输入其他数字，会显示如图8-13所示窗口：图8-12 数字校验1 图8-13 数字校验2在该文件中，函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象，validate()函数主要作用是向服务器端发送请求信息，其方式为get，发送信息为空，参数值通过URL传递到服务端。
函数callback()主要用来处理从服务器端传递的信息，并做出设置。
函数setMessage()和setMessage1()主要用来设置数据的显示样式。
函数trim()主要是移除字符串两侧的空格。
其运行步骤是，在文本域中输入数字后会触发文本域的文本内容改变事件，即调用JavaScript函数validate()，该函数发送信息到服务器端，服务器端返回信息后交callback()函数处理，callback()函数根据返回值的不同分别调用setMessage()和set Message1()函数设置数据样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第1讲Ajax是什么Ajax的运行原理一、ajax是什么？①ajax(asynchronouse javascript and xml) 异步的javascript 和xml②是7种技术的综合,它包含了七个技术( j avascrip t xml xstl xhtml domxmlhttprequest , css), ajax 是一个粘合剂,③ajax是一个与服务端语言无关的技术. 即可以使用在(php/java ee/.net网站/asp)④ajax可以给客户端返回三种格式数据(文本格式，xml , json格式)⑤无刷新数据交换技术有以下: flash, java applet, 框架, iframe, ajax)二、ajax 的运行原理分析三、看一个需求:ajax在什么地方用的多1 动态加载数据，按需取得数据。
【树形菜单、联动菜单.../省市联动】2 改善用户体验。
【输入内容前提示、带进度条文件上传...】3 电子商务应用。
【购物车、邮件订阅...】4 访问第三方服务。
【访问搜索服务、rss阅读器】5. 数据的局部刷新第2讲Ajax经典的案例使用ajax与服务器通信的的步骤①创建一个XMLHttpRequest对象②创建url,data,通过xmlHttpRequest.send()③服务器端接收ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句)④客户端通过xmlHttpRequest的属性reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务一、使用ajax完成用户名的验证register.php<html><head><title>用户注册</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpReques t();}return xmlHttpRequest;}var myXmlHttpRequest="";//验证用户名是否存在function checkName(){myXmlHttpRequest=getXmlHttpObject();//怎么判断创建okif(myXmlHttpRequest){//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数表示请求的方式, "get" / "post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)//第三个参数表示true表示使用异步机制,如果false表示不使用异步var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;//打开请求.myXmlHttpRequest.open("get",url,true);//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(null);}}//回调函数function chuli(){//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);//我要取出从registerPro.php页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值,根据返回信息的格式定.text//window.alert("服务器返回"+myXmlHttpRequest.responseText);$('myres').value=myXmlHttpRequest.responseText;}}//这里我们写一个函数function $(id){return document.getElementById(id);}</script></head><body><form action="???" method="post">用户名字:<input type="text" onkeyup="checkName();" name="username1" id="username"><input type="button" onclick="checkName();" value="验证用户名"><input style="border-width: 0;color: red" type="text" id="myres"><br/>用户密码:<input type="password" name="password"><br>电子邮件:<input type="text" name="email"><br/><input type="submit" value="用户注册"></form><form action="???" method="post">用户名字:<input type="text" name="username2" ><br/>用户密码:<input type="password" name="password"><br>电子邮件:<input type="text" name="email"><br/><input type="submit" value="用户注册"></form></body></html>registerpro.php<?php//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");//接收数据$username=$_GET['username'];if($username=="shunping"){echo "用户名不可以用";//注意，这里数据是返回给请求的页面.}else{echo "用户名可以用";}?>ajax的post方式请求在前面案例我们修改一下：关键代码register.phpvar url="/ajax/registerProcess.php";//这个是要发送的数据var data="username="+$('username').value;//打开请求.myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须.myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(data);registerPro.php关键码：$username=$_POST['username'];☞使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据., url解决方法1.url 后带一个总是变化的参数,比如当前时间var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;2.在服务器回送结果时，禁用缓存.//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");ajax如何处理返回的数据格式是xml的情况register.php<html><head><title>用户注册</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}var myXmlHttpRequest="";//验证用户名是否存在function checkName(){myXmlHttpRequest=getXmlHttpObject();//怎么判断创建okif(myXmlHttpRequest){//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数表示请求的方式, "get" / "post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)//第三个参数表示true表示使用异步机制,如果false表示不使用异步var url="/ajax/registerProcess.php";//这个是要发送的数据var data="username="+$('username').value;//打开请求.myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须.myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(data);}}//回调函数function chuli(){//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);//我要取出从registerPro.php页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值,根据返回信息的格式定.text//window.alert("服务器返回"+myXmlHttpRequest.responseText);//$('myres').value=myXmlHttpRequest.responseText;//看看如果取出xml格式数据//window.alert(myXmlHttpRequest.responseXML);//获取mes节点varmes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");//取出mes节点值//window.alert(mes.length);//mes[0]->表示取出第一个mes节点//mes[0].childNodes[0]->表示第一个mes节点的第一个子节点var mes_val=mes[0].childNodes[0].nodeValue;$('myres').value=mes_val;}}//这里我们写一个函数function $(id){return document.getElementById(id);}</script></head><body><form action="???" method="post">用户名字:<input type="text" name="username1" id="username"><input type="button" onclick="checkName();" value="验证用户名"><input style="border-width: 0;color: red" type="text" id="myres"><br/>用户密码:<input type="password" name="password"><br>电子邮件:<input type="text" name="email"><br/><input type="submit" value="用户注册"></form><form action="???" method="post">用户名字:<input type="text" name="username2" ><br/>用户密码:<input type="password" name="password"><br>电子邮件:<input type="text" name="email"><br/><input type="submit" value="用户注册"></form></body></html>regisgerProcess.php<?php//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");//接收数据(这里要和请求方式对于_POST 还是_GET)$username=$_POST['username'];//这里我们看看如何处理格式是xml$info="";if($username=="shunping"){$info.="<res><mes>用户名不可以用,对不起</mes></res>";//注意，这里数据是返回给请求的页面.}else{$info.="<res><mes>用户名可以用,恭喜</mes></res>";}echo $info;?>ajax如何处理json数据格式①json的格式如下："{属性名:属性值,属性名:属性值,.... }"因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式②json数据格式的扩展如果服务器返回的json 是多组数据，则格式应当如下:$info="[{"属性名":"属性值",...},{"属性名":"属性值",...},....]";在xmlhttprequest对象接收到json数据后，应当这样处理//转成对象数组var reses=eval("("+xmlHttpRequest.responseText+")");//通过reses可以取得你希望的任何一个值reses[?].属性名③更加复杂的json数据格式<script language="JavaScript">var people ={"programmers":[{"firstName": "Brett", "email": "brett@" },{"firstName": "Jason", "email": "jason@" }],"writer":[{"writer":"宋江","age":"50"},{"writer":"吴用","age":"30"}],"sex":"男"};window.alert(people.programmers[0].firstName);window.alert(people.programmers[1].email);window.alert(people.writer[1].writer);window.alert(people.sex);</script>小结:当一个ajax请求到服务器，服务器可以根据需求返回三种格式的数据,那么我们应当选择哪一个?1.如果你的项目经理没有特殊的要求，建议使用json2.若应用程序不需要与其他应用程序共享数据的时候, 使用HTML 片段来返回数据时最简单的3.如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势4.当远程应用程序未知时, XML 文档是首选, 因为XML 是web 服务领域的“世界语”二、ajax的省市联动案例(如何动态的从服务器取得数据)showCities.php页面<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}var myXmlHttpRequest="";function getCities(){myXmlHttpRequest=getXmlHttpObject();if(myXmlHttpRequest){var url="/ajax/showCitiesPro.php";//postvar data="province="+$('sheng').value;myXmlHttpRequest.open("post",url,true);//异步方式myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数myXmlHttpRequest.onreadystatechange=chuli;//发送myXmlHttpRequest.send(data);}}function chuli(){if(myXmlHttpRequest.readyState==4){if(myXmlHttpRequest.status==200){//取出服务器回送的数据varcities=myXmlHttpRequest.responseXML.getElementsByTagName("city");$('city').length=0;var myOption=document.createElement("option");myOption.innerText="--城市--";//添加到$('city').appendChild(myOption);//遍历并取出城市for(var i=0;i<cities.length;i++){var city_name=cities[i].childNodes[0].nodeValue;//创建新的元素optionvar myOption=document.createElement("option");myOption.value=city_name;myOption.innerText=city_name;//添加到$('city').appendChild(myOption);}}}}//这里我们写一个函数function $(id){return document.getElementById(id);}</script></head><body><select id="sheng" onchange="getCities();"><option value="">---省---</option><option value="zhejiang">浙江</option><option value="jiangsu" >江苏</option><option value="sichuan" >四川</option></select><select id="city"><option value="">--城市--</option></select><select id="county"><option value="">--县城--</option></select></body></html>**showCitiesProcess.php**<?php//服务器端//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");//接收用户的选择的省的名字$province=$_POST['province'];file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);//如何在调试过程中，看到接收到的数据。