JavaEE複習回顧二： JavaScript && jQuery && Ajax
寫這篇回顧之前，蒐集了一些 JavaScript 和 jQuery 的文章，我把連結放到下面，供大家檢視。
1 JavaScript 標準參考教程（alpha） http://javascript.ruanyifeng.com/#
2 jQuery 教程 http://www.runoob.com/jquery/jquery-tutorial.html
目錄
一、JavaScript
1、JavaScript 是什麼
Java 與 javascript 有什麼區別？ 它們沒有關係，雷鋒和雷峰塔的關係，估計是想蹭蹭熱度。。。
2 JavaScript 作用
- HTML：它是整個網站的骨架。
- CSS：它是對整個網站骨架的內容進行美化(修飾) 。
- Javascript：它能夠讓整個頁面具有動態效果。
3 JavaScript 的組成部分
- ECMAScript : 它是整個 javascript 的核心，包含(基本語法、變數、關鍵字、保留字、數 據型別、語句、函式等等)
- DOM（Document Object Model）：文件物件模型，包含(整個 html 頁面的內容)、
- BOM（Browser Object Model）：瀏覽器物件模型,包含(整個瀏覽器相關內容)
4 JavaScript 語法
- 區分大小寫
- 變數是弱型別的(String str=”aaa” ,var str=”123”;)
- 每行結尾的分號可有可無(建議大家寫上)
- 註釋與 java、php 等語言相同。
5 JavaScript 變數
變數可以不用宣告，變數是弱型別。統一使用 var 來定義！
定義變數的時候不要使用關鍵字 和保留字。
6 JavaScript 資料型別
Javascript 資料型別分為原始資料型別和引用資料型別 原始資料型別：
string、number、boolean、null、undefined
引用資料型別：
7 JavaScript 運算子
其它運算子與 java 大體一致，需要注意其等性運算子。
== 它在做比較的時候會進行自動轉換。
=== 它在做比較的時候不會進行自動轉換。
8 JavaScript 的輸出
- 警告框：alert();
- 向頁面指定位置寫入內容：innerHTML(屬性)
- 向頁面寫入內容：document.write(“”);
9 JavaScript 事件
步驟分析
- 第一步：確定事件(onsubmit)併為其繫結一個函式
- 第二步：書寫這個函式(獲取使用者輸入的資料<獲取資料時需要在指定位置定義一個 id>)
- 第三步：對使用者輸入的資料進行判斷 第四步：資料合法(讓表單提交)
- 第五步：資料非法(給出錯誤提示資訊，不讓表單提交)
問題： 如何控制表單提交？
關於事件 onsubmit：
一般用於表單提交的位置，那麼需要在定義函式的時候給出一個 返回值。
onsubmit = return checkForm()
程式碼實現
<script>
function checkForm(){
//alert("aa");
/**校驗使用者名稱*/
//1.獲取使用者輸入的資料
var uValue = document.getElementById("user").value;
//alert(uValue); if(uValue==""){
//2.給出錯誤提示資訊
alert("使用者名稱不能為空!");
return false;
}
/*校驗密碼*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密碼不能為空!");
return false;
}
/**校驗確認密碼*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("兩次密碼輸入不一致!");
return false;
}
/*校驗郵箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("郵箱格式不正確!");
return false;
}
}
</script>Html 部分：
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
用思維導圖編寫一下js的重點，當然裡面有些東西是抄的┭┮﹏┭┮
上面的這個小例子，需要大家結合自己的實際來來寫，另外JavaScript就先介紹到這裡，畢竟不是主要主學JavaScript。上面的兩個連結，阮一峰，還有 菜鳥教程 的都可以，寫的比我好很多。
二、jQuery
先上一張圖，總結一下我學jQuery的幾個要點（不喜勿噴，學的不是很深入。。）
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 程式設計。
jQuery 很容易學習。
jQuery是很容易學習的，不過大概像很多經典遊戲一樣，都是易學難精一樣，要想精通確實要花費不少功夫的，我只是學了點皮毛而已。
下面在舉一個jQuery的例項，jQuery就跳了，到後面如果再接觸到前端的東西，再進行總結。
1 使用jQuery完成表單校驗
在學習JavaScript 時，我們手動的完成過表單資料的校驗，此功能在開發中非常常見， 屬於通用
功能範疇，實際開發一般使用都是第三方工具。使用jQuery 外掛validation 進行表單的校驗。
- 匯入
- 使用前提
| 校驗型別 |
取值 |
描述 |
| required |
true Ifalse |
必填宇段 |
| |
|
郵件地址 |
| url |
|
路徑 |
| date |
數字 |
日期 |
| date ISO |
字串 |
日期 （ YYYY-MM-dd ) |
| number |
|
數字 （ 負數，小數） |
| digits |
|
整數 |
| minlength |
數字 |
最小長度 |
| maxlength |
數字 |
最大長度 |
| rangelength |
[minL,maxL] |
長度範圍 |
| min |
|
最小值 |
| max |
|
最大值 |
| [min,max] |
值範圍 |
|
| equalTo |
jQuery 表示式 |
兩個值相同 |
| remote |
url 路徑 |
ajax 校驗 |
- 檢驗方式： js 程式碼方式
- js 程式碼
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"使用者名稱不能為空!",
minlength:"使用者名稱不得少於3位!"
},
password:{
required:"密碼不能為空!",
digits:"密碼必須是整數!",
minlength:"密碼不得少於6位!"
},
repassword:{
required:"確認密碼不能為空!",
equalTo:"兩次輸入密碼不一致!"
},
email:{
required:"郵箱不能為空!",
email:"郵箱格式不正確!"
},
username:{
required:"姓名不能為空!",
maxlength:"姓名不得多於5位!"
},
sex:{
required:"性別必須勾選!"
}
},
errorElement: "label", //用來建立錯誤提示資訊標籤,validate外掛預設的就是label
success: function(label) { //驗證成功後的執行的回撥函式
//label指向上面那個錯誤提示資訊標籤label
label.text(" ") //清空錯誤提示訊息
.addClass("success"); //加上自定義的success類
}
});
});
</script>- html 程式碼
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
<font size="5">會員註冊</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user" >使用者名稱</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
密碼
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
確認密碼
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
性別
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>
驗證碼
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 冊" height="50px"/>
</td>
</tr>
</table>
</div>
三、Ajax
1 什麼是Ajax？
2 同步現象，非同步現象，Ajax執行原理
- 同步現象：客戶端傳送請求到伺服器端，當伺服器返回響應之前，客戶端都處於等待 卡死狀態
- 非同步現象：客戶端傳送請求到伺服器端，無論伺服器是否返回響應，客戶端都可以隨 意做其他事情，不會被卡死
- Ajax 執行原理 ： 頁面發起請求，會將請求傳送給瀏覽器核心中的Ajax引擎，Ajax引擎會提交請求到 伺服器端，在這段時間裡，客戶端可以任意進行任意操作，直到伺服器端將資料返回 給Ajax引擎後，會觸發你設定的事件，從而執行自定義的js邏輯程式碼完成某種頁面功能。
3 Jquery的Ajax技術（重點）
jquery是一個優秀的js框架，自然對js原生的ajax進行了封裝，封裝後的ajax的操 作方法更簡潔，功能更強大，與ajax操作相關的jquery方法有如下幾種，但開發中 經常使用的有三種
- $.get(url, [data], [callback], [type])
- $.post(url, [data], [callback], [type])
其中：
url：代表請求的伺服器端地址
data：代表請求伺服器端的資料（可以是key=value形式也可以是json格式）
callback：表示伺服器端成功響應所觸發的函式（只有正常成功返回才執行）
type：表示伺服器端返回的資料型別（jquery會根據指定的型別自動型別轉換）
常用的返回型別：text、json、html等
- $.ajax( { option1:value1,option2:value2... } ); ------後面學到了，再接著掌握
常用的option有如下：
async：是否非同步，預設是true代表非同步
data：傳送到伺服器的引數，建議使用json格式
dataType：伺服器端返回的資料型別，常用text和json
success：成功響應執行的函式，對應的型別是function型別
type：請求方式，POST/GET
url：請求伺服器端地址