一、ajax
1.ajax介紹
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
AJAX不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。使用Javascript向服務器提出請求並處理響應而不阻塞用戶！核心對象XMLHTTPRequest。通過這個對象，您的 JavaScript 可在不重載頁面的情況與Web服務器交換數據。AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。AJAX 可使因特網應用程序更小、更快，更友好。
2.ajax入門程序
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），即代碼是寫在了js裏面。
1）創建一個核心對象 XMLHttpRequest
對於不同的瀏覽器，獲取方式有區別(從文檔上粘過來)
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
2）編寫一個回調函數
xmlHttp.onreadystatechange=function(){};
該函數目的是服務器端響應完成後，瀏覽器端可以知道，並通過該function內部功能，完成後續工作。
3）編寫請求方式和請求的路徑(open操作)
xmlHttp.open(“GET”,”/day/ajax”);設置訪問的資源路徑以及請求方式
4）發送請求(send操作)
xmlhttp.send();發送請求
3.XMLHttpRequest之API詳解
Ajax 的核心是 JavaScript 對象 XmlHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest 使您可以使用 JavaScript 向服務器提出請求並處理響應，而不阻塞用戶。XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。
onreadystatechange屬性
當XMLHttpRequest對象的狀態改變時會調用該函數
readyState屬性
對於XMLHttpRequest對象，它有一個屬性readyState，它有五個狀態
0：創建XMLHttpRequest對象
1：當open時
2：當send時
3：響應頭已經返回，但響應正文沒有完成，也就是響應沒有完全完成
4：響應完成了
一般情況下，在回調的函數中，我們都是判斷
if(xmlhttp.readyState==4&&xmlhttp.status==200)
來接收服務器端響應的信息。
status屬性
由服務器返回的 HTTP 狀態代碼，如 200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。
responseText屬性
目前爲止服務器接收到的響應體（不包括頭部）。或者如果還沒有接收到數據的話，就是空字符串；如果 readyState 小於 3，這個屬性就是一個空字符串；當 readyState 爲 3，這個屬性返回目前已經接收的響應部分；如果 readyState 爲 4，這個屬性保存了完整的響應體。
注意：部分瀏覽器，例如谷歌就不支持該屬性，無法從response.Text中取出服務器寫回的數據（據說是跨域問題）。
如果響應包含了爲響應體指定字符編碼的頭部，就使用該編碼。否則，使用 Unicode UTF-8。
responseXML屬性
對請求的響應，解析爲 XML 並作爲 Document 對象返回。
open方法
初始化 HTTP 請求參數，例如 URL 和 HTTP 方法，但是並不發送請求。
xmlhttp.open(請求方式,url);
請求方式: POST GET
路徑：客戶端路徑 格式 /工程名/資源路徑
如果是GET方式，想要向服務器發送請求，並且攜帶請求參數，可以直接在url後面連接。
如果是POST方式，想要向服務器發送請求，並且攜帶請求參數，只能在send時傳遞參數，但是這個時候必須要用setRequestHeader方法添加一個請求頭，否則servlet收到的請求體信息爲null。
xmlhttp.open("post","/day15/ajax2");
//設置請求頭，該信息可以通過form表單的 enctype自動補齊得到的屬性直接獲取到。
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//send
xmlhttp.send("username=張三");
send方法
發送 HTTP 請求， open() 方法的參數即send()中的內容。如果請求方式是post，並且要攜帶參數，可以通過send的參數來傳遞。
中文亂碼問題
get請求需要在發送請求的時候對中文進行編碼，如下:
xmlhttp.open("get","${pageContext.request.contextPath}/ajax?usernme="+encodeURI(document.getElementById("username").value));
服務器端處理方式：
post中：request.setCharacterEncoding("utf-8");
get中：String name = req.getParameter("name");name = new String(name.getBytes("iso-8859-1"),"utf-8");
response.setContentType("text/html;charset=utf-8");
4.使用原生的ajax判斷用戶是否爲空
body中的代碼：
<td><input type="text" name="username" onblur='checkUsername(this)'></td>
script中的代碼：
function checkUsername(obj){
//創建核心對象
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//編寫回調函數
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//xmlhttp.responseText;
if(xmlhttp.responseText==1){
document.getElementById("usename_msg").innerHTML="<font color='green'>用戶名可以使用</font>";
document.getElementById("sub").disabled=false;
}else{
document.getElementById("usename_msg").innerHTML="<font color='red'>用戶名已被佔用</font>";
document.getElementById("sub").disabled=true;
}
}
}
//open操作
xmlhttp.open("get","${pageContext.request.contextPath}/checkUser?username="+obj.value);
//send
xmlhttp.send();
}
二、jquery中的ajax
1.jQuery中ajax四種方式
瞭解：jquery對象.load(url,params,function(數據){}); 一般採用的是get請求方式。json格式的數據採用post。
<head>
<title>Title</title>
<script type="text/javascript" src = "${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var url = "/jqueryAjax";
var params = "username = dragon";
$(this).load(url,params,function (d) {
alert(d);
});
});
})
</script>
<body>
<input type="button" value="click on me" id="btn">
</body>
★: $.get(url,params,function(數據){},type);發送get請求的ajax
url:請求的路徑
params:請求的參數，參數爲key、value的形式
fn:回調函數，參數就是服務器發送回來的數據
type:返回內容格式，xml, html, script, json, text, _default。以後用"json"
★: $.post(url,params,function(數據){},type);發送post請求的ajax
若結果爲json格式, 打印返回值的時候是一個對象
例如若json爲 {"result":"success","msg":"成功"}，獲取msg只需要：參數.msg
理解：$.ajax([選項])
選項的可選值：
url：請求路徑
type：請求方法
data：發送到服務器的數據
success：fn 成功以後的回調
error：fn 異常之後的回調
dataType：返回內容格式 經常使用json
async：設置是否是異步請求
$.ajax({
url:"/day15/demo1",
type:"post",
data:"username=tom",
success:function(d){
alert(d.msg);
},
error:function(){},
dataType:"json"
});
2.使用原生的ajax判斷用戶是否爲空
$(function(){
$("input[name='username']").blur(function(){
var $value=$(this).val();
$.get("/day15/checkUsername4Ajax","username="+$value,function(d){
if(d==1){
$("#usename_msg").html("<font color='green'>用戶名可以使用</font>");
}else{
$("#usename_msg").html("<font color='red'>用戶名已被使用</font>");
}
});
});
})
3.模仿百度搜索
在一個文本框中輸入一段內容。keyup的時候發送一個ajax請求。去數據庫中查找相應的內容，在頁面上展示。
步驟分析:
1.表
create table keyword(
id int primary key auto_increment,
kw varchar(20)
);
2.頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//文本框keyup的時候發送ajax
$("#tid").keyup(function(){
//獲取文本框的值
var $value=$(this).val();
//內容爲空的時候不發送ajax
if($value!= null && $value!=''){
//清空div
$("#did").html("");
$.post("/searchKw","kw="+$value,function(d){
//不爲空的時候切割字符串
if(d!=''){
var arr=d.split(",");
$(arr).each(function(){
//alert(this);
//可以將每一個值放入一個div 將其內部插入到id爲did的div中
$("#did").append($("<div>"+this+"</div>"));
});
//將div顯示
$("#did").show();
}
});
}else{
//內容爲空的時候 將div隱藏
$("#did").hide();
}
});
})
</script>
<title>Insert title here</title>
</head>
<body>
<center>
<div>
<h1>dragon</h1>
<div>
<input name="kw" id="tid"><input type="button" value="search">
</div>
<div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div>
</div>
</center>
</body>
</html>
3.在文本框輸入內容 keyup的時候發送ajax請求將輸入值傳遞到後臺
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0.設置編碼
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//1.獲取kw
String kw=request.getParameter("kw");
//2.調用service完成模糊操作 返回值:list
List<Object> list=null;
try {
list = new KeyWordService().findKw4Ajax(kw);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//3.將數據 [a,aa,aaa] 去掉括號 寫回去 a,aaa,aa
if(list!=null && list.size()>0){
String s = list.toString();
s=s.substring(1, s.length()-1);
System.out.println(s);
response.getWriter().println(s);
}
}
三、json
1.概念
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成爲理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(網絡傳輸速度)。
2.JSON結構有兩種結構
json簡單說就是javascript中的對象和數組，所以這兩種結構就是對象和數組兩種結構，通過這兩種結構可以表示各種複雜的結構
- 對象：對象在js中表示爲“{}”括起來的內容，數據結構爲 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key爲對象的屬性，value爲對應的屬性值，所以很容易理解，取值方法爲 對象.key 獲取屬性值，這個屬性值的類型可以是 數字、字符串、數組、對象幾種。
- 數組：數組在js中是中括號“[]”括起來的內容，數據結構爲 ["java","javascript","vb",...]，取值方式和所有語言中一樣，使用索引獲取，字段值的類型可以是 數字、字符串、數組、對象幾種。
經過對象、數組2種結構就可以組合成複雜的數據結構了。
3.jsonlib介紹
Json-lib 是一個 Java 類庫（官網：http://json-lib.sourceforge.net/）可以實現如下功能：
•轉換 javabeans, maps, collections, java arrays 和 XML 成爲 json 格式數據
•轉換 json 格式數據成爲 javabeans 對象
Json-lib 需要的 jar 包
•commons-beanutils-1.8.3.jar
•commons-collections-3.2.1.jar
•commons-lang-2.6.jar
•commons-logging-1.1.1.jar
•ezmorph-1.0.6.jar
•json-lib-2.4-jdk15.jar
4.jsonlib常用api
數組，Collection集合轉換成json數據使用 JsonArray.fromObject(對象);
Map，javaBean轉換成json數據使用 JsonObject.fromObject(對象);
如果不想讓javaBean中的數據出現在json中。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);
System.out.println(jsonObject);
注意：如果服務器端返回的數據格式是json格式，那麼我們在瀏覽器端得到數據時，需要使用eval函數將字符串轉換成json對象
var msg=xmlhttp.responseText;
var obj=eval(msg);
有的時候通過eval轉換時，得不到一個json對象，這時做以下操作
var obj=eval("("+msg+")");