Ajax校驗

時間 2019-11-12

標籤 ajax 校驗欄目 Ajax 简体版

原文原文鏈接

1、Ajax簡介javascript

AJAX即(Asynchronous JavaScript and Xml)（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。html

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

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

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

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

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

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

2、Ajax工做流程服務器

3、經常使用方法：app

4、經常使用屬性

5、實現思路：

　　一、鎖定用戶名文本框，註冊onblur事件

　　二、建立XMLHttpRequest對象。經過window.XMLHttpRequest的返回值判斷建立XMLHttpRequest對象的方式

　　三、設置回調函數。經過onreadystatechange屬性設置回調函數，其中回調函數須要自定義

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

　　五、發送請求

jsp頁面：

 <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請求，調試效果以下：

7、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對象：

校驗完畢，你放心，我安心。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。