AJAX
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户 体验。
一.Ajax 概述
Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有:
1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为;
2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求;
3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可); 2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
而 Ajax 的不足由以下几点:
1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前); 2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面); 3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容); 4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜)。
ajax的两个核心:无刷新(也称局部刷新)和异步调用。
ajax的原理(也就是异步调用的原理):
客户端(浏览器)不会直接向服务器发送请求,而是将请求交给ajax引擎(xmlHttpRequest对象),ajax引擎再把请求发送给服务器。我们把ajax引擎理解成代理或者是过滤器。ajax引擎负责与服务器交互,服务器处理后把数据返回给ajax引擎。客户端通过ajax引擎获取到服务器响应的数据。
服务器在响应请求处理数据时(在还没有处理完),客户端依然可以继续发送请求,不需要等待服务器响应完才能发送请求(这就是异步调用和同步调用的区别)。
ajax无刷新是不对的,不严谨,它有刷新,应该说是局部刷新。
Rich Internet Application(RIC)富客户端英特网应用程序。也就是更加优化的交互方式。
RIC技术的三种实现:ajax(google最先使用,先阶段应用最广泛的RIC技术)、Flex(Adobe公司产品、编译为swf文件运行)、JavaFX(Sun公司规范、前途未知)
Ajax的核心是JavaScript 对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript 向服务器提出请求并处理响应,而不阻塞用户。 对象创建示例
XMLHttpRequest对象的ReadyState属性值列表。
ReadyState取值 |
描述 |
0 |
描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。 |
1 |
描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
2 |
描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 |
3 |
描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 |
4 |
描述一种"已加载"状态;此时,响应已经被完全接收。 |
<script type="text/javascript">
function sendRequest(){
var xmlHttpReq=init();
function init(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
json详解_
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。
json是javascript的子集,可以使用js方便的解析json。
json有两种结构:名称/值、值的有序列表(理解成数组)
键值对
{name:”王帅”,age:18,sex:”男”};
JSON中的值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array),且这些结构可以嵌套,这种特性给予JSON表达数据以无限的可能:它既可以表达一个简单的 key/value,也可以表达一个复杂的Map或List,而且它是易于阅读和理解的。
因为JSON是脱离语言的理想的数据交换格式,所以它被频繁的应用在客户端与服务器的通信过程中,这一点是毋庸置疑的。而在客户端与服务器的通信过程中,JSON数据的传递又被分为服务器向客户端传送JSON数据,和客户端向服务器传送JSON数据,前者的核心过程中将对象转换成JSON,而后者的核心是将JSON转换成对象,这是本质的区别。另外,值得一提的是,JSON数据在传递过程中,其实就是传递一个普通的符合JSON语法格式的字符串而已,所谓的“JSON对象”是指对这个JSON字符串解析和包装后的结果
为什么使用JSON而不是XML我认为就是说:解析XML太费劲了。
在服务器端(比如servlet)里定义json数据,可以放到request对象,然后在客户端用EL表达式接收。然后用js的eval()函数将json字符串文本转换成javascript对象。
在服务器端怎么写json数据呢?第一是手写代码,第二是采用json-lib工具包,可以将一个java对象、集合、数组、xml数据转换成符合json规范的字符串数据,客户端用js就可以方便的解析。
在json官方下载json-lib包。json-lib-2.3-jdk15jar是json的jar包,但是运行这个jar包需要用到apache的几个开源jar包(commons-beanutils-1.7.0.jar、commons-collections.jar、commons-lang.jar、commons-logging-1.0.4.jar、ermorph-1.0.6.jar)。
注意:apache开源的jar包,好多框架都使用了,比如struts等等,如果加入jar有重复的,就留最高版本,如果高版本有问题,再使用低版本。
查询所有人员示例:、
$(function(){
$.ajax({
type: "POST",
url: "ssh/findAllAjax.action",
data: "",
success: showDate
});
});
function showDate(date){
//$("#mydate").empty();
var list =eval(date);
$.each(list, function(index, value) {
$("#mytable").append(
"<tr><td>"
+ "<input type='checkbox' class='ckb' value='"
+ value.id + "' /></td><td>" + value.name
+ "</td><td>" + value.age + "</td><td>" + value.sex
+ "</td><td>" + value.birthday + "</td></tr>");
});
}
<div id="mydate">
<table id="mytable">
</table>
</div>
public void findAllAjax(){
System.out.println("haha");
personList=personService
.findPersonAll();
String json=JsonUtil
.list2json(personList); System.out.println(json);
outString(json);
}
增加人员示例:
<a href="javascript:void(0)" id="create-person">进入人员列表页面</a>
JQuery UI 是JQuery官方维护的UI插件库 里面的功能都是基于JQuery库的..不同版本所依赖的JQuery版本不同..目前最新的是jquery-ui-1.9.2版 是依赖jquery1.8.3所使用的
导入JQuery UI 并使用
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/external/jquery.bgiframe-2.1.2.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.draggable.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.resizable.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>
<script src="js/ui/jquery.ui.effect.js"></script>
我们使用JQuery UI的弹出遮罩功能
先写一个DIV是要弹出的层
<div id="dialog-form" title="Create new user">
<form action="/ssh/savePerson.action" method="post" id="personform">
<table>
<tr>
<td>
人员姓名:
<input name="person.name">
</td>
</tr>
<tr>
<td>
人员性别:
<input name="person.sex">
</td>
</tr>
<tr>
<td>
人员年龄:
<input name="person.age">
</td>
</tr>
</table>
<input type="button" value="提交" id="saveperson">
<input type="reset" value="重置">
</form>
</div>
之后写
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
close: function() {
showlist();
}
});
$( "#create-person" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
之后我们来写一个AJAX的增加
这里要用到另一个插件
<script src="js/jquery.form.js"></script>
这是一个表单插件.用来提供并表单中的信息JSON序列化的.
function addPerson(){
var queryString = $('#personform').formSerialize();
$.ajax({
type: "POST",
url: "ssh/savePerson.action",
data: queryString,
success: showlist
});
}
为了增加后可以看到效果写一个showlist 方法
function showlist(){
$.post("ssh/findAllAjax.action", "", showDate, "json");
}
这里用post方法的原因是缓存的原因
浏览器缓存问题:浏览器为了提高更好的交互方式,在其内部缓存了已访问页面的信息,当再次向同一个url发送请求时,不提交而使用缓存里数据。
浏览器缓存只对get请求缓存,对post请求不缓存。缓存不是ajax的问题,任何get请求访问都有这个问题。
解决缓存:一是禁用浏览器缓存(但会使网页访问速度变慢)、二是只发送post请求、三让每次提交的请求url都不同(在url后加一个参数,并且参数值每次都不一样)。
第四种方法:在服务器端(servlet)添加响应头的内容,指定不使用缓存。
response.addHeader(“pragma”,”no-cache”); response.addHeader(“cache-control”,”no-cache”); response.addHeader(“expires”,”0”); |
第五种方法:在ajax的send方法前加上下面代码:
xmlHttp.setRequestHeader(“If-Modified-Since”,”0”); |
好大家试着写一下删除和修改功能
<td><input type="button" value="提交" id="saveperson"/></td>
$("#saveperson").click(function(){
$( "#dialog-form" ).dialog( "close" );
addPerson();
clearperson();
});
function clearperson(){
$("#personform input").val("");
}
function showDate(date){
$("#mytable").html("");
var list =eval(date);
$.each(list, function(index, value) {
$("#mytable").append(
"<tr><td>"
+ "<input type='checkbox' class='ckb' value='"
+ value.id + "' /></td><td>" + value.name
+ "</td><td>" + value.age + "</td><td>" + value.sex
+ "</td><td>" + + "</td></tr>");
});
}