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属性值列表。

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