[シリーズ]フロントエンド開発 - あなたはアヤックスではないでしょう言うまでもありません

その他 2019-06-28 10:01:54 訪問数: null

2019ユニコーン企業重く募集エンジニアのPythonの標準>>> hot3.png

 

前アヤックスでパッケージ化されてきた、それは使用して実装されているかについて非常に好奇心となっています。ここではそれだけで学ぶことが、以下は、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         }

第3のステップは、上記タイムライン上の機能とonreadystatechante機能を開き、送信関数呼び出しを送信することです。

3.1オープン（） 、この関数は3つのパラメータを取る最初の方法は、我々は、パラメータを送信するために、ここで使用GET、HTTP、共通GETとPOSTを送信することです; 2番目のパラメータはURLで、このURLの最初の役割を背景はサーブレットと一致する、第二の機能は、前後にデータを転送することであり、3番目のパラメータはブール値であり、非同期識別子はリクエストを送信する場合も同様です。

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

3.2は、onreadystatechangeにデータが機能プロセスを使用して返されたときに、コールバック関数を指定します。私たちのハンドラはのusernameCallback独自の定義であります

req.onreadystatechange = usernameCallback;

3.3送信作成した要求を送信する機能を。上記パラメータの設定によって、直接ので、ここでは、リアのURLに追加されたリストのヌル上のパラメータとして使用。

req.send(null);

　　DOMにdiv要素を使って指定した方法に書かれた返された文字列に対して定義されたusernameCallback独自の機能。

　　関数が戻るとき、あなたは良いのreqオブジェクトを作成するために使用する前に、そのreadyStateの及び財産状況を呼び出し、4は正常終了に応じて、XMLHttpRequestオブジェクトを表します。200は、正しい応答を得るためにHTTP要求を表します。

　　のみ、これらの2つの条件が満たされ、それが非同期要求要求が成功したことを示します。

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で、背景に関連付けられているサーブレットを実行する必要があります！

<?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);
    
    }

別の認証サーブレット同様、ここではそれらを繰り返すありません。ここでは、すべてのコードを掲載します。

ソース暴露

login.htmlと

 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 </html>
コードの表示

web.xmlの

<?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>
コードの表示

usernameServlet.java

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class usernameServlet extends HttpServlet {
    
    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);
    
    }
}
コードの表示

passwordServlet.java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class passwordServlet extends HttpServlet {

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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        doGet(request,response);
    
    }
}
コードの表示

業績

ここで、スタイリングの変化を直接リターンの状態を分析します

成功の効果！

故障の影響！

ます。https：//my.oschina.net/u/204616/blog/545473で再現

おすすめ

転載: blog.csdn.net/weixin_33711641/article/details/91989893
おすすめ
ランキング
--- ELオプションを搭載するテンプレートを指定するオプションをレンダリング別テンプレート/使用を指定するためのオプションを使用して、インラインテンプレート/テンプレートの使用を指定するために、テンプレート/テンプレートオプションを使用してテンプレートを指定します
0216leetcodeはPythonで5つの質問をブラシします
ショック！七つの子どもたちは魂を拷問しました！暴露子どもたちはインサイダーを振っプログラム！
ターゲット属性タグをhtmlの
Linuxビルドnacosスタンドアロンバージョンとクラスター
Cálculo experimental da renda simulada de investimento fixo do fundo
Kali Linux は VMware ツールをインストールします (vmtools ボタンは灰色です)
程序员洞察报告：90后占比过半 搜索算法等岗位人才短缺
【Java基礎シリーズチュートリアル】第17章 Javaアノテーション
Javaでの空白を入力できないようにユーザー
アーカイブ
もっと
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)

コードワールド

© 2018 codetd.com