《JavaScript語言精粹》—— 讀書總結

之前一直都是用封裝好的Ajax,所以一直很好奇它是如何使用和實現的。這裡正好就進行一下學習，下面是Ajax的一個時間圖。

設定觸發條件

　　這裡模擬一個使用場景，就是在使用者登陸時，非同步的對使用者名稱以及密碼進行驗證。所以使用onBlur()觸發，onBlur函式在輸入框焦點遺失時，就會觸發。

 1     <form name="loginForm">
 2         <table>
 3             <tr>
 4                 <td>使用者名稱:<input  
type="text" name="username" onBlur="checkUsername()"></td>
 5             </tr>
 6             <tr>
 7                 <td><div id="usernameDiv"></div></td>
 8             </tr>
 9             <tr>
10                 <td>密 碼:<input type="password" 
 name="password" onBlur="checkPassword()"></td>
11             </tr>
12             <tr>
13                 <td><div id="passwordDiv"></div></td>
14             </tr>
15         </table>
16     </form>

建立Ajax的物件

　　由於Ajax並不是一個統一的標準，因此各個瀏覽器有自己的建立方式，因此在建立時，需要進行瀏覽器的驗證，使用如下的驗證方法即可。

1 if(window.XMLHttpRequest){
2             req = new XMLHttpRequest();
3         }else if(window.ActiveXObject){
4             req = new ActiveXObject("Microsoft.XMLHTTP");
5         }

open() onreadystatechante() send()

3.1 open(),這個函式有三個引數，第一個是http的傳送方式，常見的有GET和POST，我們這裡使用GET，來傳送引數；第二個引數是一個url，這個url第一個作用是與後臺的servlet進行匹配，第二個作用是傳送前臺的資料到後臺；第三個引數是個bool值，如果為true標識用非同步的方式傳送請求。

req.open("GET",url+"?username="+document.loginForm.username.value,true);

3.2 onreadystatechange 指定回撥函式，當資料返回時，使用該函式進行處理。我們的處理函式是自己定義的usernameCallback

req.onreadystatechange = usernameCallback;

3.3 send函式用來發送建立好的請求。由於前面的引數已經新增到url後面，因此這裡直接使用null作為引數就行了。

req.send(null);

　　自己定義的usernameCallback函式，用於把返回的字串使用DOM方式寫入指定的div中。

　　在函式返回時，可以使用之前建立好的req物件，呼叫它的readystate 以及 status屬性，4表示XMLHttpRequest物件響應正常結束。200表示HTTP請求獲得正確的響應。

　　只有這兩個條件都滿足，才表明非同步請求請求成功。

function usernameCallback(){
        if(req.readyState == 4){
            if(req.status == 200){
                var str = req.responseText;
                if(str.split("!")[0] == "Success"){
                    document.getElementById("usernameDiv").className = "black";
                }else{
                    document.getElementById("usernameDiv").className = "red";
                }
                document.getElementById("usernameDiv").innerHTML = str;
            }else{
                alert("username failed!");
            }
        }else{
            
        }
    }

通過url與後臺的servlet關聯

<?xml version="1.0" encoding="GBK"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <servlet>
      <servlet-name>checkUsername</servlet-name>
    <servlet-class>usernameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkUsername</servlet-name>
      <url-pattern>/checkUsername</url-pattern>
  </servlet-mapping>
  
  <servlet>
      <servlet-name>checkPassword</servlet-name>
    <servlet-class>passwordServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>checkPassword</servlet-name>
    <url-pattern>/checkPassword</url-pattern>
  </servlet-mapping>
</web-app>

簡單反饋

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        
        String username = request.getParameter("username");
//        System.out.println("username"+username);
        String str = "";
        
        if("xingoo".equals(username)){
            str += "Success!" + username;
        }else{
            str += "failed!" + username;
        }
        
        response.getWriter().write(str);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request,response);
    
    }

另一個驗證的servlet採用同樣的方式，這裡就不再贅述了。下面會貼出所有的程式碼。

原始碼暴露

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7      .red {
 8          color:red;
 9          font-size: 20;
10      }
11      .black {
12          color: black;
13          font-size: 20;
14      }
15 </style>
16 <script language="javascript">
17     function checkUsername(){
18         var url = "checkUsername";
19         if(window.XMLHttpRequest){
20             req = new XMLHttpRequest();
21         }else if(window.ActiveXObject){
22             req = new ActiveXObject("Microsoft.XMLHTTP");
23         }
24         if(req){
25             req.open("GET",url+"?username="+document.loginForm.username.value,true);
26             req.onreadystatechange = usernameCallback;
27             req.send(null);
28         }
29     }
30     function checkPassword(){
31         var url = "checkPassword";
32         if(window.XMLHttpRequest){
33             req = new XMLHttpRequest();
34         }else if(window.ActiveXObject){
35             req = new ActiveXObject("Microsoft.XMLHTTP");
36         }
37         if(req){
38             req.open("GET",url+"?password="+document.loginForm.password.value,true);
39             req.onreadystatechange = passwordCallback;
40             req.send(null);
41         }
42     }
43     function usernameCallback(){
44         if(req.readyState == 4){
45             if(req.status == 200){
46                 var str = req.responseText;
47                 if(str.split("!")[0] == "Success"){
48                     document.getElementById("usernameDiv").className = "black";
49                 }else{
50                     document.getElementById("usernameDiv").className = "red";
51                 }
52                 document.getElementById("usernameDiv").innerHTML = str;
53             }else{
54                 alert("username failed!");
55             }
56         }else{
57             
58         }
59     }
60     function passwordCallback(){
61         if(req.readyState == 4){
62             if(req.status == 200){
63                 var str = req.responseText;
64                 if(str.split("!")[0] == "Success"){
65                     document.getElementById("passwordDiv").className = "black";
66                 }else{
67                     document.getElementById("passwordDiv").className = "red";
68                 }
69                 document.getElementById("passwordDiv").innerHTML = str;
70             }else{
71                 alert("password failed!");
72             }
73         }else{
74             
75         }
76     }
77 </script>
78 </head>
79 <body>
80     <form name="loginForm">
81         <table>
82             <tr>
83                 <td>使用者名稱:<input type="text" name="username" onBlur="checkUsername()"></td>
84             </tr>
85             <tr>
86                 <td><div id="usernameDiv"></div></td>
87             </tr>
88             <tr>
89                 <td>密 碼:<input type="password" name="password" onBlur="checkPassword()"></td>
90             </tr>
91             <tr>
92                 <td><div id="passwordDiv"></div></td>
93             </tr>
94         </table>
95     </form>
96 </body>
97 </
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    《JavaScript語言精粹》—— 讀書總結
      
                
點選有驚喜




之前一直都是用封裝好的Ajax,所以一直很好奇它是如何使用和實現的。這裡正好就進行一下學習，下面是Ajax的一個時間圖。





設定觸發條件

　　這裡模擬一個使用場景，就是在使用者登陸時，非同步的對使用者名稱以及密碼進行驗證。所以使用onBlur( 

  
 

    

    
    《JavaScript語言精粹》讀書筆記——給類型增加方法一節的疑問
      讀書   ceiling   lac   方法   formal   ger   公式   num   turn    最近，在學習《JavaScript語言精粹》這本書，發現譯者雖然有很好地翻譯文章，卻沒有對文中有疑問的地方進行改正或加以註釋。我接觸JavaScript只有一年左右，可能無法很好的理解這門語 

  
 

    

    
    《JavaScript語言精粹》讀書筆記
      表達   star   turn   ray   檢索   obj   就是   第四章   遞歸   第三章 對象

檢索

  var obj = {a: 1, b:2, c:3}
obj[a] // obj.a
// 檢索結果是undefined 時用 || 或 && 避免錯誤
obj[ 

  
 

    

    
    JavaScript語言精粹_第四章
      前綴   原型對象   高度   單例   write   on()   整體   方法調用   通過   4.1 函數對象
　　在JavaScript中，函數就是對象。對象是“名/值”對的集合並擁有一個連到原型對象的隱藏鏈接。對象字面量產生的對象連接到Object.prototype。函數對象連接到Func 

  
 

    

    
    JavaScript語言精粹_第五章
      .proto   5.5   閱讀   特征   數據   事件處理   parent   struct   json   5.1 偽類
　　它不讓對象直接從其他對象繼承，反而插入了一個多余的間接層，從而使構造器函數產生對象。
　　JavaScript中，當一個函數對象被創建時，Function構造器產生的函 

  
 

    

    
    JavaScript語言精粹_第九章
      錯誤   難度   應該   生命周期   周期   挑戰   我們   另一個   特性   　　在軟件的產品生命周期中，通常他們都會被修改，把一個正確的程序轉化為另一個同樣正確但風格不同的程序，是一個極具挑戰性的過程。
　　JavaScript包含大量脆弱的或有問題的特性，它們會妨礙我們寫出優秀的程序。顯 

  
 

    

    
    JavaScript語言精粹_雞肋
      對象   位運算符   操作   工具   運行   語句   一個   流程   結果   ==
　　JavaScript有兩組相等運算符：===，==，!==，!=，前面一組比較類型和數值，後面一組只比較數值。
with語句
　　JavaScript提供了一個with語句，本意是想用來快捷地訪問對象的屬性 

  
 

    

    
    JavaScript語言精粹pdf
      介紹   第5章   如何   好的   lin   級聯   維度   作者   閉包    
 
 
內容簡介  · · · · · ·



本書通過對JavaScript語言的分析，甄別出好的和壞的特性，從而提取出相對這門語言的整體而言具有更好的可靠性、可讀性和可維護性的JavaScript的子集，以 

  
 

    

    
    JavaScript語言精粹-毒瘤、糟粕（應對）
       
 
 毒瘤 
 
  不使用全域性變數 
  使用塊級作用域，不var 
  return與返回值要位於同一行，否則當自動插入分號後會返回undefined 
  當物件的屬性名與js保留字相同時，無法使用點語法，使用括號表示法 
  js字元是16位的，Unicode將一對字元視為一個單一的字元，而js 

  
 

    

    
    Js的四種呼叫方式和this繫結物件——《JavaScript語言精粹》
       
 
 JavaScript一共有四種呼叫模式：方法呼叫模式、函式呼叫模式、構造器呼叫模式和apply呼叫模式。 
 方法呼叫模式： 
 當一個函式被儲存為物件的一個屬性時，我們稱之為一個方法。當一個方法被呼叫時，this被繫結到該物件。 
 var myObject = {
    value: 0,
  

  
 

    

    
    《JavaScript語言精粹》筆記（內附《JavaScript語言精粹》百度雲下載連結）
      
							
							
							章節：3.4 引用 【P22（頁碼）】 
知識點：物件通過引用來傳遞，它們永遠不會被傳遞



 var a_obj={a:1};
 var b_obj=a_obj;//b_obj是a_obj的引用
 b_obj.a=2;
 console.log(a_obj. 

  
 

    

    
    《JavaScript語言精粹》第二章-語法 簡單筆記
      
註釋
JavaScript提供兩種註釋： /* */包圍的塊註釋及//開頭的行註釋。
註釋應該被優先用來提高程式的可讀性，註釋要精確地描述程式碼，沒有用的註釋比沒有註釋更糟糕。
/* */塊註釋對於被註釋的程式碼塊是不安全的， （當包裹正則表示式時會導致語法錯誤）。 建議避免使用。
識別符號
J 

  
 

    

    
    《JavaScript語言精粹》學習筆記——4.函式
      
                
前言
函式用於指定物件的行為，是JavaScript的基礎單元。所謂程式設計，就是將一組需求分解為一組函式和資料結構的功能。
1、函式物件
JavaScript中的函式就是物件。每個函式在建立時會附加兩個隱藏的屬性：函式的上下文和實現函式呼叫的程式碼。
函式可以像其他的值一 

  
 

    

    
    《JavaScript語言精粹》--第5章：繼承
      
                
/*
	當一個函式物件被建立時，Function構造器產生的函式物件將會執行類似下面的程式碼：
*/
this.prototype = {
	constructor: this
};

//------------------------------------------ 

  
 

    

    
    《JavaScript語言精粹》--第4章：函式
      
                
/*
	函式物件
		JS中的函式就是物件，函式物件連線到Function.prototype，而Function.prototype物件本身連線到Object.prototype
	每個函式在建立時會附加兩個隱藏屬性：
		函式物件數的上下文
		實現函式行為的程式碼
	 

  
 

    

    
    《JavaScript語言精粹》--第6章：陣列
      
                
/*
	JS沒有像其他語言陣列一樣的資料結構，它提供了一種擁有一些類陣列特性的物件
	陣列字面量:
		JS允許陣列包含任意混合型別的值
*/
var someArray = [
	1,
		"alpha",
	true, {
		name: "obj"
	},
	func 

  
 

    

    
    JavaScript語言精粹之物件篇
      
							
							
							1.物件字面量 
用來建立新物件值，位置不限，包含多個“名值”對

var empty_object = {};
var stooge = {
    "first-name" : "zhang",
    "last-name" : "fei"
}

屬性名稱 

  
 

    

    
    js語言精粹讀書筆記
      
							
							
							
全書貫穿一個method方法定義新方法：




Function.prototype.method = function(name, func) {
    if (!this.prototype[name]) {
        this.prototyp 

  
 

    

    
    《JavaScript語言精粹》學習筆記——附錄B.糟粕
      
                
作者的意思是儘量棄之不用的部分。
1、==
== 和 != 運算子只有在兩個運算時型別一致時，才能做出正確判斷，如果兩個運算數是不同型別，會強制轉換值的型別，有時會得到正確的結果，有時不會，因此永遠不要使用這個運算子，始終使用 === 和 !== 運算子，可以減少錯誤。
2 

  
 

    

    
    javascript語言精粹陣列篇之Array的方法注意事項
      本文並沒有詳細列出Array方法詳解，本文側重點在於使用Array程式設計時候要注意的問題。1.Array.concat

var o = {name:"Gavin"};
var a1 = [1,2,3];
var a2 = [6,o];
var arr1 = a1.concat(a2);
a1[0] = 0