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>");
});
}