Java是一種可以撰寫跨平臺應用軟件的面向對象的程序設計語言。Java 技術具有卓越的通用性、高效性、平臺移植性和安全性，廣泛應用于PC、數據中心、游戲控制臺、科學超級計算機、移動電話和互聯網，同時擁有全球最大的開發者專業社群。
給你學習路線：html-css-js-jq-javase-數據庫-jsp-servlet-Struts2-hibernate-mybatis-spring4-springmvc-ssh-ssm
AJAX技術
1.ajax技術
1.1.什么是ajax
小編推薦一個學Java的學習裙【 六五零，五五四，六零七 】，無論你是大牛還是小白，是想轉行還是想入行都可以來了解一起進步一起學習！裙內有開發工具，很多干貨和技術資料分享！
Ajax技術：
主要是把html、css、js、dom 技術結合在一起使用。
在頁面不刷新的情況下，和后臺的服務器，以及程序進行數據的傳輸。
頁面不刷新：用戶在操作頁面的時候，當某個操作結束之后，使用AJAX技術和服務器進行交互，但是用戶還可以繼續再頁面上進行其他的操作。用戶并不會感覺到頁面在和后臺交互。
ajax常見應用：
地圖、注冊頁面光標離焦之后驗證某些數據是否可用等（用戶可用，用戶存在，都是到后臺進行交互）。
1.2.ajax的作用
ajax：在頁面不刷新的情況下和服務器進行交互。獲取服務器中的任何數據。
1.3.ajax快速入門案例
1.3.1.ajax和服務器交互的本質
1.3.2.獲取XMLHttpRequest對象
XMLHttprequest對象是所有瀏覽器內置的對象。這個對象負責和服務器之間進行數據的交互。我們在JS代碼中，先得到XMLhttprequest對象，然后通過這個對象的向服務器發送數據，同時還要使用這個對象接收服務器的響應數據，在獲取到響應數據之后，使用JS和dom技術，把數據添加到當前的頁面上。
function createXMLHttp(){
var?xmlhttp;
/*
在JS中所有的 非 零、 非null 、 非undefined 都可以任務是 true
window.XMLHttpRequest 使用window對象，調用XMLHttpRequest，
如果當前window對象有XMLHttpRequest，這時就會得到XMLHttpRequest，
如果當前的window對象沒有XMLHttpRequest，這時會得到undefined
*/
if?(window.XMLHttpRequest){//如果能拿到就表示有這樣一個對象、如果沒有拿到就認為是nudinfed
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new?XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new?ActiveXObject("Microsoft.XMLHTTP");
}
return?xmlhttp;
}
1.4.XMLHttpRequest API 詳解
1.4.1.onreadystatechange屬性
在xmlhttprequest對象中，提供onreadystatechange屬性。這個屬性會隨著客戶端和服務器之間的交互變化提供不同的內容。
onreadystatechange 它需要和一個函數進行綁定，在客戶端和服務器之間的狀態在改變的時候，都會導致onreadystatechange綁定的函數運行。
1.4.2.open方法
在獲取到xmlhttprequest對象之后，我們可以使用這個對象和服務器進行交互，頁面不刷新。
獲取到xmlhttprequest對象之后，需要和服務器建立連接通道。在xmlhttprequest對象中提供的open方法
open方法中的第一個參數：
設置向服務器發送請求時提交數據的方式：get和post
open方法中的第二個參數：
本次請求的服務器的資源路徑。
open方法的第三個參數：
true：表示頁面的處理和后臺發送請求是異步進行。一般都設置true。
false：頁面的處理和后臺是同步。
1.4.3.Send（）方法
send是將請求的數據發送給服務器。send方法中的參數，只有在post請求時才能書寫。
如果get方式，直接書寫send，括號中不要書寫任何內容。
1.4.4.setRequestHeader方法
如果使用post方式和服務器交互，并且在send中攜帶參數，需要通過xmlhttprequest中的setRequestHeader設置請求頭信息。
1.4.5.readyState屬性
onreadystatechange 事件是針對xmlhttprequest對象和服務器之間交互的
每個狀態改變的時候，都會導致onreadystatechange執行。
測試 它xmlhttprequest和服務器之間的狀態改變：
xmlhttprequest中提供另外的兩個屬性：
readyState：記錄客戶端和服務器之間每步狀態變化
status：記錄服務器和客戶端之間響應的信息變化
1.4.6.status屬性
1.4.7.responseText屬性
小編推薦一個學Java的學習裙【 六五零，五五四，六零七 】，無論你是大牛還是小白，是想轉行還是想入行都可以來了解一起進步一起學習！裙內有開發工具，很多干貨和技術資料分享！
xmlhttprequest對象中提供的2個屬性來獲取服務器響應的數據：
responseText：它接收服務器響應的所有文本數據。
responseXML：它接收服務器響應的xml格式的數據。
后臺響應數據的時候，設置如下：
ajax中使用responseText接收響應的數據。
1.4.8.responseXML屬性-了解
ajax中使用responseXML接收數據。
這時接收到的數據之后，需要使用JS和xml DOM技術解析響應的xml文檔數據。
1.5.ajax技術和服務器交互模版代碼：
【XMLHttpRequest】：
?屬性:
* readyState :XMLHttpRequest的狀態
* onreadystatechange :當XMLHttpRequest狀態改變的時候觸發一個函數.
* status :獲得響應的狀態碼. 200 , 404 ...
* responseText :獲得響應的文本數據.
* responseXML :獲得響應的XML的數據.
?方法:
* open(請求方式,請求路徑,是否異步) :異步去向服務器發送請求.
* send(請求參數) :發送請求.
* setRequestHeader(頭信息,頭的值) :處理POST請求方式的中文問題.
?創建XMLHttpRequest對象:
* IE :將XMLHttpRequest對象封裝在一個ActiveXObject組件.
* Firefox :直接就可以創建XMLHttpRequest對象.
function?createXMLHttp(){
var?xmlhttp;
if?(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new?XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new?ActiveXObject("Microsoft.XMLHTTP");
}
return?xmlhttp;
}
【AJAX的入門】
?AJAX的編寫的步驟:
?* 第一步：創建一個異步對象.
* 第二步：設置對象狀態改變觸發一個函數.
* 第三步：設置向后臺提交的路徑
* 第四步：發送請求.
?GET方式提交請求:
function ajax_get() {
// 1.創建異步對象
var xhr = createXMLHttp();
// 2.設置狀態改變的監聽 回調函數.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 請求發送成功 // 響應也成功
// 獲得響應的數據:
var data = xhr.responseText;
// 將數據寫入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 3.設置請求路徑
xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
// 4.發送請求
xhr.send();
}
?POST方式提交請求:
function ajax_post(){
// 創建異步對象:
var xhr = createXMLHttp();
// 設置監聽:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 請求發送成功 // 響應也成功
// 獲得響應的數據:
var data = xhr.responseText;
// 將數據寫入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 打開路徑:
xhr.open("POST","/day15/ServletDemo1",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 發送請求 post攜帶參數:
xhr.send("name=張三&pass=123");
}
1、獲取xmlhttprequest對象
將獲取xmlhttprequest對象的js代碼單獨封裝到一個js文件，在需要的jsp頁面中導入
var xhr = getXMLHttpRequest();
2、打開連接
xhr.open(“get|post”,”請求的資源路徑”,true);
3、發送數據
xhr.send(“攜帶 參數，僅限于post方式”);
4、設置onreadystatechange事件對應的函數
5、在函數中判斷readyState==4 && status == 200
6、使用responseText獲取響應的數據
1.6.案例：
1.6.1.面頁準備：
1.6.2.Ajax代碼
后臺servlet代碼
1.7.案例：
1.7.1.Jquery代碼：
$(function(){
//獲取input標簽
$("#username").blur(function(){//給用戶名綁定一個離焦事件
// alert(000);
//獲取用戶輸入的信息
var?username = $(this).val();
// alert(username);字母 數字 下劃線
if( !username.match("^\w{4,12}$")){
//如果用戶輸入的不符合校驗就給用戶一個錯誤提示。把錯誤提示寫到span里
$("#username_res").html("用戶名必須由4~12位字母，數字，下劃線組成");
}else{
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/demo",
data: "username="+username,
success:?function(data){
$("#username_res").html(data);
}
});
}
});
});
//清楚請輸入用戶名
function?clearUserName(){
//獲取input標簽
var?input_name = document.getElementById("username");
//判斷value值里的內容（請輸入用戶名）
if(input_name.value == "請輸入用戶名"){
input_name.value="";
}
}
小編推薦一個學Java的學習裙【 六五零，五五四，六零七 】，無論你是大牛還是小白，是想轉行還是想入行都可以來了解一起進步一起學習！裙內有開發工具，很多干貨和技術資料分享！
1.7.2.Servlet代碼:
