Ajax與jQuery、json - WJ-163－IT工程師數位筆記本

文章出處

一、Ajax簡介

Ajax(Asynchronous JavaScript and Xml)--異步刷新技術

Ajax的關鍵元素包括以下內容：

① JavaScript語言：Ajax技術的主要開發語言。

② XML/JSON/HTML等：用來封裝請求或響應的數據格式

③ DOM(文檔對象模型)：通過DOM屬性或方法修改頁面元素，實現頁面局部刷新

④ CSS：改變樣式，美化頁面效果，提升用戶體驗度

⑤ Ajax引擎：即XMLHttpRequest對象，以異步方式在客戶端與服務器之間傳遞數據。

二、Ajax工作流程

三、常用方法：

四、常用屬性

五、實現思路：

1、鎖定用戶名文本框，注冊onblur事件

2、創建XMLHttpRequest對象。通過window.XMLHttpRequest的返回值判斷創建XMLHttpRequest對象的方式

3、設置回調函數。通過onreadystatechange屬性設置回調函數，其中回調函數需要自定義

4、初始化XMLHttpRequest對象。通過open()設置請求的發送方式和路徑

5、發送請求

準備簡單頁面：

 <body>
    用戶名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
   密碼： <input type="password" name="txtPwd"/>
  </body>

創建Servlet：回送信息

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String uname = request.getParameter("uname");
        if (uname.equals("admin")) {
            //用戶已經被注冊了
            //回送 信息
            response.getWriter().write("OK");
            
        }else {
            response.getWriter().write("NO");
        }

注：

步驟一：通過window。XMLHttpRequest的返回值判斷當前瀏覽器創建XMLHttpRequest對象的方式。如果為true，說明是新版本IE或其他瀏覽器，可使用new XMLHttpRequest()方式創建XMLHttpRequest對象；如果為false，說明是老版本IE瀏覽器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式創建XMLHttpRequest對象

步驟二：通過XMLHttpRequest對象的onreadystatechange屬性設置回調函數，用于當請求成功后接收服務器端返回的數據

步驟三：通過XMLHttpRequest對象的open()方法，傳入參數完成初始化XMLHttpRequest對象的工作。第一個參數為Http請求方式，選擇發送Httpget 請求，因此參數為get。第二個參數為要發送的url請求路徑，將要發送的數據附加到url路徑后面

步驟四：調用XMLHttpRequest對象的send()方法，參數為要發送到服務器端的數據，因為采用"get"方式請求時，參數已經附加到url路徑后，所以直接設置為null。如果send()方法不設值，在不同的瀏覽器下可能存在不兼容問題。

執行完畢后，異步請求的發送過程就結束！

注：使用Ajax發送Post請求需注意要設置setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

采用Get方式發送請求時，通常會將需要攜帶的參數附加在URL路徑后面一起發送，所以send()不需要傳遞參數，設置為null即可

六、使用jQuery實現Ajax

jQuery常用的Ajax方法

語法：$.ajax([settings]);

常用屬性參數:

常用函數參數：

使用$.ajax()驗證用戶名--使用$.ajax() 實現異步交互

注：需引jquery-1.11.1.js庫

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    
    $(function(){
    var dom=$("#txtName");
    dom.blur(function() {
        myjquery();
    });
    });
    
    function myjquery(){
    var dom=$("#txtName");
    $.ajax({
    url:'<%=path%>/servlet/CheckUserServlet',
    type:'post',
    data:{uname:dom.val()},
    success:function(result){
    alert(result);
    }        
    });            
    }    
    </script>
    
  </head>
  
  <body>
  <h2>使用jQuery實現Ajax</h2>
    用戶名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/>
   密碼： <input type="password" name="txtPwd"/>
  </body>

實現效果：

若輸入的非admin，即可注冊，否則無法注冊

若是post請求，調試效果如下：

七、JSON簡介

JavaScript Object Notation是一種輕量級的數據交換格式

①定義Json對象

語法：var json對象={key:value,key:value,...}

② 定義Json數組

語法：var json數組=[value,value,...]

<script type="text/javascript">
    var data={"firstName":"Brett","lastName":"hehe"};
    $.each(data,function(i,dom){
    alert(dom);
    }); 


/* var data={
    "people":[
        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]
};
$.each(data.people,function(i,dom){
    alert(dom.firstName);
    });
     */
    
    </script>

那么即可拿到每個dom對象：