Java是一種可以撰寫跨平臺應(yīng)用軟件的面向?qū)ο蟮某绦蛟O(shè)計(jì)語言近零。Java 技術(shù)具有卓越的通用性、高效性抄肖、平臺移植性和安全性久信，廣泛應(yīng)用于PC、數(shù)據(jù)中心漓摩、游戲控制臺裙士、科學(xué)超級計(jì)算機(jī)、移動電話和互聯(lián)網(wǎng)管毙，同時擁有全球最大的開發(fā)者專業(yè)社群腿椎。
給你學(xué)習(xí)路線：html-css-js-jq-javase-數(shù)據(jù)庫-jsp-servlet-Struts2-hibernate-mybatis-spring4-springmvc-ssh-ssm
AJAX技術(shù)
1.ajax技術(shù)
1.1.什么是ajax
小編推薦一個學(xué)Java的學(xué)習(xí)裙【 六五零，五五四夭咬，六零七 】啃炸，無論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)卓舵！裙內(nèi)有開發(fā)工具南用，很多干貨和技術(shù)資料分享！
Ajax技術(shù)：
主要是把html掏湾、css裹虫、js、dom 技術(shù)結(jié)合在一起使用忘巧。
在頁面不刷新的情況下恒界，和后臺的服務(wù)器，以及程序進(jìn)行數(shù)據(jù)的傳輸砚嘴。
頁面不刷新：用戶在操作頁面的時候十酣，當(dāng)某個操作結(jié)束之后涩拙，使用AJAX技術(shù)和服務(wù)器進(jìn)行交互，但是用戶還可以繼續(xù)再頁面上進(jìn)行其他的操作耸采。用戶并不會感覺到頁面在和后臺交互兴泥。
ajax常見應(yīng)用：
地圖、注冊頁面光標(biāo)離焦之后驗(yàn)證某些數(shù)據(jù)是否可用等（用戶可用虾宇，用戶存在搓彻，都是到后臺進(jìn)行交互）。
1.2.ajax的作用
ajax：在頁面不刷新的情況下和服務(wù)器進(jìn)行交互嘱朽。獲取服務(wù)器中的任何數(shù)據(jù)旭贬。
1.3.ajax快速入門案例
1.3.1.ajax和服務(wù)器交互的本質(zhì)
1.3.2.獲取XMLHttpRequest對象
XMLHttprequest對象是所有瀏覽器內(nèi)置的對象。這個對象負(fù)責(zé)和服務(wù)器之間進(jìn)行數(shù)據(jù)的交互搪泳。我們在JS代碼中稀轨，先得到XMLhttprequest對象，然后通過這個對象的向服務(wù)器發(fā)送數(shù)據(jù)岸军，同時還要使用這個對象接收服務(wù)器的響應(yīng)數(shù)據(jù)奋刽，在獲取到響應(yīng)數(shù)據(jù)之后，使用JS和dom技術(shù)艰赞，把數(shù)據(jù)添加到當(dāng)前的頁面上佣谐。
function createXMLHttp(){
var?xmlhttp;
/*
在JS中所有的 非 零、 非null 方妖、 非undefined 都可以任務(wù)是 true
window.XMLHttpRequest 使用window對象狭魂，調(diào)用XMLHttpRequest，
如果當(dāng)前window對象有XMLHttpRequest党觅，這時就會得到XMLHttpRequest趁蕊，
如果當(dāng)前的window對象沒有XMLHttpRequest，這時會得到undefined
*/
if?(window.XMLHttpRequest){//如果能拿到就表示有這樣一個對象仔役、如果沒有拿到就認(rèn)為是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屬性是己。這個屬性會隨著客戶端和服務(wù)器之間的交互變化提供不同的內(nèi)容又兵。
onreadystatechange 它需要和一個函數(shù)進(jìn)行綁定，在客戶端和服務(wù)器之間的狀態(tài)在改變的時候卒废，都會導(dǎo)致onreadystatechange綁定的函數(shù)運(yùn)行沛厨。
1.4.2.open方法
在獲取到xmlhttprequest對象之后，我們可以使用這個對象和服務(wù)器進(jìn)行交互摔认，頁面不刷新逆皮。
獲取到xmlhttprequest對象之后，需要和服務(wù)器建立連接通道参袱。在xmlhttprequest對象中提供的open方法
open方法中的第一個參數(shù)：
設(shè)置向服務(wù)器發(fā)送請求時提交數(shù)據(jù)的方式：get和post
open方法中的第二個參數(shù)：
本次請求的服務(wù)器的資源路徑电谣。
open方法的第三個參數(shù)：
true：表示頁面的處理和后臺發(fā)送請求是異步進(jìn)行秽梅。一般都設(shè)置true。
false：頁面的處理和后臺是同步剿牺。
1.4.3.Send（）方法
send是將請求的數(shù)據(jù)發(fā)送給服務(wù)器企垦。send方法中的參數(shù)，只有在post請求時才能書寫晒来。
如果get方式钞诡，直接書寫send，括號中不要書寫任何內(nèi)容湃崩。
1.4.4.setRequestHeader方法
如果使用post方式和服務(wù)器交互荧降，并且在send中攜帶參數(shù)，需要通過xmlhttprequest中的setRequestHeader設(shè)置請求頭信息攒读。
1.4.5.readyState屬性
onreadystatechange 事件是針對xmlhttprequest對象和服務(wù)器之間交互的
每個狀態(tài)改變的時候朵诫，都會導(dǎo)致onreadystatechange執(zhí)行。
測試 它xmlhttprequest和服務(wù)器之間的狀態(tài)改變：
xmlhttprequest中提供另外的兩個屬性：
readyState：記錄客戶端和服務(wù)器之間每步狀態(tài)變化
status：記錄服務(wù)器和客戶端之間響應(yīng)的信息變化
1.4.6.status屬性
1.4.7.responseText屬性
小編推薦一個學(xué)Java的學(xué)習(xí)裙【 六五零整陌，五五四拗窃，六零七 】，無論你是大牛還是小白泌辫，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)随夸！裙內(nèi)有開發(fā)工具，很多干貨和技術(shù)資料分享震放！
xmlhttprequest對象中提供的2個屬性來獲取服務(wù)器響應(yīng)的數(shù)據(jù)：
responseText：它接收服務(wù)器響應(yīng)的所有文本數(shù)據(jù)宾毒。
responseXML：它接收服務(wù)器響應(yīng)的xml格式的數(shù)據(jù)。
后臺響應(yīng)數(shù)據(jù)的時候殿遂，設(shè)置如下：
ajax中使用responseText接收響應(yīng)的數(shù)據(jù)诈铛。
1.4.8.responseXML屬性-了解
ajax中使用responseXML接收數(shù)據(jù)。
這時接收到的數(shù)據(jù)之后墨礁，需要使用JS和xml DOM技術(shù)解析響應(yīng)的xml文檔數(shù)據(jù)幢竹。
1.5.ajax技術(shù)和服務(wù)器交互模版代碼：
【XMLHttpRequest】：
?屬性:
* readyState :XMLHttpRequest的狀態(tài)
* onreadystatechange :當(dāng)XMLHttpRequest狀態(tài)改變的時候觸發(fā)一個函數(shù).
* status :獲得響應(yīng)的狀態(tài)碼. 200 , 404 ...
* responseText :獲得響應(yīng)的文本數(shù)據(jù).
* responseXML :獲得響應(yīng)的XML的數(shù)據(jù).
?方法:
* open(請求方式,請求路徑,是否異步) :異步去向服務(wù)器發(fā)送請求.
* send(請求參數(shù)) :發(fā)送請求.
* setRequestHeader(頭信息,頭的值) :處理POST請求方式的中文問題.
?創(chuàng)建XMLHttpRequest對象:
* IE :將XMLHttpRequest對象封裝在一個ActiveXObject組件.
* Firefox :直接就可以創(chuàng)建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的編寫的步驟:
?* 第一步：創(chuàng)建一個異步對象.
* 第二步：設(shè)置對象狀態(tài)改變觸發(fā)一個函數(shù).
* 第三步：設(shè)置向后臺提交的路徑
* 第四步：發(fā)送請求.
?GET方式提交請求:
function ajax_get() {
// 1.創(chuàng)建異步對象
var xhr = createXMLHttp();
// 2.設(shè)置狀態(tài)改變的監(jiān)聽 回調(diào)函數(shù).
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 請求發(fā)送成功 // 響應(yīng)也成功
// 獲得響應(yīng)的數(shù)據(jù):
var data = xhr.responseText;
// 將數(shù)據(jù)寫入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 3.設(shè)置請求路徑
xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
// 4.發(fā)送請求
xhr.send();
}
?POST方式提交請求:
function ajax_post(){
// 創(chuàng)建異步對象:
var xhr = createXMLHttp();
// 設(shè)置監(jiān)聽:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ // 請求發(fā)送成功 // 響應(yīng)也成功
// 獲得響應(yīng)的數(shù)據(jù):
var data = xhr.responseText;
// 將數(shù)據(jù)寫入到DIV中:
document.getElementById("d1").innerHTML = data;
}
}
// 打開路徑:
xhr.open("POST","/day15/ServletDemo1",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 發(fā)送請求 post攜帶參數(shù):
xhr.send("name=張三&pass=123");
}
1、獲取xmlhttprequest對象
將獲取xmlhttprequest對象的js代碼單獨(dú)封裝到一個js文件恩静，在需要的jsp頁面中導(dǎo)入
var xhr = getXMLHttpRequest();
2焕毫、打開連接
xhr.open(“get|post”,”請求的資源路徑”,true);
3、發(fā)送數(shù)據(jù)
xhr.send(“攜帶 參數(shù)驶乾，僅限于post方式”);
4邑飒、設(shè)置onreadystatechange事件對應(yīng)的函數(shù)
5、在函數(shù)中判斷readyState==4 && status == 200
6级乐、使用responseText獲取響應(yīng)的數(shù)據(jù)
1.6.案例：
1.6.1.面頁準(zhǔn)備：
1.6.2.Ajax代碼
后臺servlet代碼
1.7.案例：
1.7.1.Jquery代碼：
$(function(){
//獲取input標(biāo)簽
$("#username").blur(function(){//給用戶名綁定一個離焦事件
// alert(000);
//獲取用戶輸入的信息
var?username = $(this).val();
// alert(username);字母 數(shù)字 下劃線
if( !username.match("^\w{4,12}$")){
//如果用戶輸入的不符合校驗(yàn)就給用戶一個錯誤提示疙咸。把錯誤提示寫到span里
$("#username_res").html("用戶名必須由4~12位字母，數(shù)字风科，下劃線組成");
}else{
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/demo",
data: "username="+username,
success:?function(data){
$("#username_res").html(data);
}
});
}
});
});
//清楚請輸入用戶名
function?clearUserName(){
//獲取input標(biāo)簽
var?input_name = document.getElementById("username");
//判斷value值里的內(nèi)容（請輸入用戶名）
if(input_name.value == "請輸入用戶名"){
input_name.value="";
}
}
小編推薦一個學(xué)Java的學(xué)習(xí)裙【 六五零撒轮，五五四乞旦，六零七 】，無論你是大牛還是小白腔召，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)杆查！裙內(nèi)有開發(fā)工具，很多干貨和技術(shù)資料分享臀蛛！
1.7.2.Servlet代碼:
