Ajax基础

Ajax
允许浏览器与服务器通信而无需刷新当前页面的技术。
传统的Web模型，客户端向服务器发送一个请求，服务器返回整个页面，如此反复。
在Ajax模型中，数据在客户端与服务器之间独立传输，服务器不再返回整个页面。

不用刷新整个页面即可与服务器通信的办法：
XMLHttpRequest，该对象是对javascript的一个扩展，可使网页与服务器进行通信。是实现Ajax的最佳选择。


XMLHttpRequest的方法 
abort 停止当前请求
open("method","url"):建立对服务器的调用。
send(content):向服务器发送请求
setRequestHeader("header","value"): 把指定首部设置为所提供的值。

属性
onreadyStatechange: 每次状态改变会触发这个事件处理，通常会调用一个javascript函数。

发送请求 

利用XMLHttpRequest实例与服务器进行通信包括以下3个关键部分 
onreadyStatechange事件处理函数
open(method,url,asynch)方法
open是允许程序员用一个Ajax调用向服务器发送请求。
method:请求类型，get是加在URL中发送数据，若需要想服务器发送数据，用POST。
在某些情况下，有些浏览器会把多次XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。
在此时将时间戳最佳到URL最后，可以保证URl的唯一性，避免浏览器缓存结果。
url: 路径字符串
asynch: 异步，默认为异步，在读取后面的脚本之前，不需要等待服务器的相应。
执行false，当脚本处理过程经过这点时，会停下来，一直等待Ajax请求执行完毕再继续执行。
send方法

传统的XMLHTTPRequest方法如何实现Ajax
//一般在javascript中写的函数都要在body页面中调用，用此函数就不用等着body页面中调用就可以执行了
window.onload = function(){
 //1. 获取a节点，为其添加onclick相应函数
 document.getElementsByTagName("a")[0].onclick = function(){
 //3. 创建一个XMLHttpRequest对象
 var request = new XMLHttpRequest();
 //4.准备发送请求的数据:url加上时间戳，保证每次请求的URL不同，不会利用到缓存结果。
 var url = this.href+"?time="+new Date();
 var method = "GET";
 //当method为post时，需要添加头信息，它会告知服务器数据已经符合URL编码
 //request.setRequestHeader("ContentType","application/x-www-font-urlencoded");
 //5.调用XMLHttpRequest对象的open方法
 request.open(method,url);
 //6.调用XMLHttpRequest对象的send方法
 request.send(null);
 //7.为XMLHttpRequest对象添加onreadystatechange函数
 request.onreadystatechange = function(){
 //8.判断相应是否完成: XMLHttpRequest对象的readyState属性值为4的时候
  if(request.readyState == 4){
  //9.判断相应是否可用: XMLHttpRequest对象status属性值为200
   if(request.status == 200 || request.status == 304){
    alert(request.responseText);
   }
  }
 }
 //10.打印响应结果:responseText
 
 
 //2. 取消a节点的默认行为
 return false;
 };
}

------------------------------------------------------------------------------------------------------------------------
Ajax数据传输格式的三种类型(访问目标URL,读取及返回的数据格式类型)

1.HTML
解析HTML
HTML由一些普通文本组成，如果服务器通过XMLHttpRequest发送HTML，文本存储在responseText属性中。
但不比从responseText属性中读取数据，直接将HTML代码更新到目标元素的innerHTML属性中即可。

document.getElementById("details").innerHTML = request.responseText;

优点：
从服务器段返回的HTML代码不需要用javascript解析，可以直接在客户端显示。

缺点：
若通过Ajax更新一篇文档的多个部分，HTML不合适。

2.XML(目标URL是XML文件)
结果为XML格式

//1.结果为XML格式，所以需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用，必须先读取节点，再把节点加入#detail中
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var email = result.getelementsByTagName("email")[0].firstChild.nodeValue;
//3.构建节点内容，目标格式如：
//<h2><a href="mailto:andy@clearleft.com"></a>Andy Budd</h2>
//<a href="http://andybudd.com">http://andybudd.com</a></h2>
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href  = "mailto:"+email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
//页面上添加节点
var detailNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);

优点：
XML是一种通用的数据格式。

缺点：
DOM解析比较麻烦。

3.JSON(JavaScript Object Notation)一种简单的数据格式，
比xml更轻巧。JSON是Javascript原生格式，这意味着在JavaScript中处理JSON对象不需要任何的特殊API或工具包。
JSON的规则很简单，对象是一个无序的"名称/值"对集合。一个对象以{开始，}结束。每个名称后跟一个：(冒号)，名称/值对之间使用逗号分隔。

JSON语句中可以包含对象，也可以包含函数
JSON用冒汗来赋值，每一条赋值语句用逗号分开，整个对象用大括号封装起来，可用大括号分级嵌套数据。
 
JSON格式如下：
var jsonObject = {
 "name":"atguigu",
 "age":12,
 "address":{"city":"BeiJing","school":"shangzhi"},
 "teaching":function(){
  alert("JavaEE,Android....")
 }
};
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teaching();


JSON只是一个文本字符串，它被存储在responseText属性中
为了读取存储在responseText属性中的JSON数据，需要根据JavaScript Eval语句。
函数eval会把一个字符串当做它的参数，然后这个字符串被当做JavaScript代码来执行。
因为JSON的字符串就是由JavaScript代码构成，所以它本身是可执行的。

//如何将一个字符串转为JSON对象
//使用eval方法
var testStr= "alert('hello eval')";
eval(testStr);//将字符串作为本地的执行代码进行执行。

//将JSON字符串转为JSON对象，需要eval("("+jsonStr+")")
var jsonStr="{'name':'atguigu'}";
var testObject=eval("("+jsonStr+")");
alert(testObject.name);

//JSON对象返回值需要通过responseText来接受
var result = request.responseText;
var object = eval("(" + result + ")");
var name = object.person.name;

访问页面内容如下
{"person":{
  "name":"Jeray keith",
  "webSite":"http://adactio.com",
  "email":"jeremy@clearleft.com"
  }
}

JSON优点：
作为一个数据传送格式，JSON与XML相似，但是它更灵巧。
JSON不需要从服务器发送含有特定内容类型的首部信息。

缺点：
语法过于严禁
代码不易读
eval存在风险。

三种数据传输格式的优缺点比较：
若应用程序不需要与其他应用程序共享数据时候，使用HTML片段返回数据最简答。
如果数据需要重用，JSON文件是个不错的选择，其在性能和文件大小方面有优势。
当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的"世界语言"。

--------------------------------------------------------------------------------------------------------------------------------
Jquery 实现Ajax
Jquery对Ajax操作进行了封装
在jQuery最底层的方法时$.ajax()，
第二层是load(),$.get(),$.post()，
第三层是$.getScript(),$.getJSON().

load方法使用：
载入远程HTML文件代码并插入DOM中。
load(url,[data],[callback])
url:待载入HTML网页网址(类型：String)
data：发送至服务器的key/value数据(类型：Object)
callback:载入成功时返回函数。(类型：Function)

load()方法时jQuery中最为简单和常用的Ajax方法，能载入远程的Html代码并插入DOM中。

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("a").click(function(){
   //使用load方法处理Ajax
   var url=this.href;
   var args = {"time":new Date()};
   //任何一个HTML节点都可以使用load方法，结果直接插入html节点中。
   //键入参数是考虑每次访问不利用缓存。
   $("#content").load(url,args);
   //取消默认行为
   return false;
  });
 });
</script>
<body>
 <a href="helloAjax.txt">HelloAjax</a>
 <div id="content"></div>
</body>

load()方法--细节
如何只加载目标HTML页面的某些元素，可以通过load()方法的URL参数来达到目的。
通过URl参数指定选择符，可以方便加载HTML文档中选出所需的内容。
load()方法的URL参数的语法结果为"url selector"(注意空格)

传递方式：load()方法的参数传递依据参数data自动指定。
如果没有参数，get方法，否则post方式。

对于必须在加载完才能继续的操作，load方法提供了回调函数，该函数有三个参数
代表请求返回的内容data;代表请求状态的textStatus对象,XMLHttpRequest对象。


$.get() $.post()
$.get()使用GET方式来进行异步请求，它的结构是$.get(url,[data],[callback],[type])
url:请求URL页面的地址
data(Object类型)：发送给服务器的key/value数据会作为QueryString附加到请求的URL中。
callback:载入成功时，自动将请求的结果和状态传递给该方法。
type：服务器返回内容的格式，xml，html，script，json

$.get()方法的回调函数只有两个参数：
data代表返回的内容，可以是xml文档，JSON文件等；
textstatus代表请求状态，其值可能为succuss，error，notmodify，tiemout四种。
//url:
//args: JSON格式
//function: 回调函数：当相应结束时，回调函数被触发，返回的结果保存在data
//访问的URL是xml文件
$(function(){
$("a").click(function(){
 var url = this.href;
 var args = {"time":new Date()};
 //可以直接替换成.post函数
 $.get(url,args,function(data){
  var name=$(data).find("name").text();
  var email=$(data).find("email").text();
  var website=$(data).find("website").text();
  $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
 })
 return false;
});



//返回的结果以JSON格式返回，使用getJSON则直接以JSON格式获取返回的结果
$.getJSON(url,args,function(data){
 var name=data.person.name;
 var email=data.person.email;
 var website=data.person.website;
 $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
})

//尚若使用get方式，上面需要指明第四个参数的值为json，代码如下
$.get(url,args,function(data){
 var name=data.person.name;
 var email=data.person.email;
 var website=data.person.website;
 $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
},"JSON")


总结
什么是Ajax，不用刷新整个页面，但可以和服务端进行通信方式，使用Ajax的主要方式使用XMLHttpRequest对象。


3.Ajax传输数据的三个方式：
1). XML: 笨重，但xml是通用的数据交换方式。
2). HTML：不需要解析但可以直接放到文档中。若仅更新一部分区域，但传输数据有限。且HTML需要拼装完成。
3). JSON：小巧，有面向对象的特征。且有很多第三方的JAR包可以把Java对象转为JSON字符串。

4.使用Jquery完成Ajax操作
1). load方法：可以用于HTML文档的元素节点，把结果直接加为对应节点的子元素。通常而言，load加载后的数据时一个HTML
片段
var $obj=...
var url=...
var args={key:value,...};
$obj.load(url,args)

//url: 访问的链接
//args: JSON格式
//function: 回调函数：当相应结束时，回调函数被触发，相应结果保存在data
//data返回的类型可能是xml,html,json,text
//
2).$.get,$.post,$.getJSON,更加灵活，除去使用load方法的情况，大部分都是用这三个方法。
$.get(url,args,function(data){
}
)

$.post(url,args,function(data){
}
)

3).
$.get(url,args,function(data){
},"JSON")

$.getJSON(url,args,function(data){
})
--------------------------------------------------------------------------------------------------------------------------------


--典型应用,Ajax判断用户名是否已存在

<!--
1.导入Juery库
2.获取name="username"的节点: userName
3.为username添加change相应函数
4.获取username的value属性值，去除掉前后空格且不为空。准备发送Ajax请求。
5.发送Ajax请求校验username是否可用。
6.在客户端直接返回一个html的片段: <font color="red"> 该用户名已经存在</font>
7.在客户端浏览器直接把其直接添加到#message的html中。
-->

${function(){
 //查找input标签中,name等于username的标签
 $(":input[name='username']").change(function(){
 var val = $(this).val();
 val=$.trim(val);
 if(val!=""){
  var url="${pageContext.request.contextPath}/valiateUserName";
  var args={"userName":val,"time":new Date()};
  $.post(url,args,function(data){
   $("#message").html(data);
  });
 }
 });
}}

--dopost方法
protected void doPost(HttpServletRequest request,HttpServletResponse reponse){
 List<String> userNames = Arrays.asList("AAA","BBB","CCC");
 String userName = request.getParamter("userName");
 String result = null;
 if(userNames.contains(userName)){
  result = "<font color="red"> 该用户名已经存在</font>";
 }else{
  result = "<font color="red"> 该用户名可以使用</font>";
 }
 response.setContentType("text/html");
 response.setContentType("UTF-8");
 response.getWriter().print(result);
}