jQueryを使ってAjax要求を送ります.

7528 ワード
Webフロントエンド
個人ブログの住所:http://wenzhuang.me
従来のウェブページとサーバとの通信は、フォーム全体を提出することによって実現されることが多く、このようにユーザーはフォームを提出するたびに、ページ全体にブラシをかけなければならず、悪いユーザー体験をもたらし、この背景にAjaxが生まれた.AJAXはAynchronous JavaScript and XML(非同期のJavaScriptとXML)です.Ajaxは新しいプログラミング言語ではなく、既存の標準を使う新しい方法です.Ajaxは、ページ全体を再読み込みしないでサーバーとデータ交換し、ウェブページのローカルリフレッシュを実現することができます.AJAXはサーバーとデータを交換し、一部のウェブページを更新するアートです.もっと多くのAjaxの基本概念と文法はw 3 cschoolのAjax教程を参照することができます.JavaScriptを使用してAjaxを送信するにはXMLHttpRequestオブジェクトを使用する必要がありますが、このような方法は比較的複雑で、大きなコード量が必要です.JavaScriptについては、w 3 cschoolのJavaScript教程にアクセスできます.jQueryはJavaScriptのライブラリであり、JSのプログラミングを大幅に簡略化しました.その中にはAjax要求のパッケージが含まれています.もっと詳しいjQuery文法はw 3 cschoolのjQuery教程にアクセスできます.基本的なJS文法とAjaxの基本概念、jQueryセレクタの使用を理解すれば、jQueryはすぐに使えます.とても便利です.jQueryを使うにはまずjQuery公式サイトでjQueryライブラリをダウンロードしてください.jQuery類と関数はjQuery公式API文書を調べられます.このために、Java webエンジニアリングWebDemoを新築し、GithubのWebDemo倉庫にアップロードしました.WebRootディレクトリの下にAjaxDemoがあります.今回のフロントエンドページのコードAjaxDemoが含まれています.Srcディレクトリには応答ウェブページのサーバ端末コードAjaxDemoServletが含まれています.AjaxDemo.のソースコードは以下の通りです.jQueryコードはscriptタグに含まれています.まずjQueryライブラリの住所を引用しました.文書準備が完了したら、GETボタンとPOSTボタンに傍受イベントを追加します.jQueryを使用したajax関数はAjax要求を送信します.パラメータは要求情報を記述するための一連のキー値ペアです.具体的な関数の説明はjQuery-ajax-settingsを参照してください.get要求を送信する際に要求を設定する方法はGETであり、要求されたURLはサービス端末のAjaxDemoServletであり、データ交換フォーマットはJSONであり、2つのコールバック関数を実現し、それぞれ応答が成功した時と失敗した時に呼び出す.サービス要求が成功すると、コールバック関数によってJSON形式のデータが取られます.本例では、JSONオブジェクトは文字列に変換された後、「name」となり、「wenzhuang」となり、「task」となります.JSONについては、w 3 cschoolのJSON教程をご覧ください.post要求を送信するには、要求方法、要求URL、データ交換フォーマットの設定に加えて、要求エンティティとしてJSON形式のデータをサーバに送信する必要がある.ここでは、ユーザーがフォームに記入したユーザ名のパスワードを取り出してサーバに送信し、サービスの認証情報をコールバック関数で取得し、ウェブページに表示します.ウェブページの運行効果とスクリーンショットはREADME.mdをご覧ください.

<html>
<head>
<script src="js/jquery-2.1.4.js">script>
<script>
$(document).ready(function(){
  $("#getBtn").click(function(){
    $.ajax({
        type:"GET",
        url:"/WebDemo/servlet/AjaxDemoServlet",
        dataType:"json",
        success:function(data){
            $("#data").html(data.name + '    ' + data.task);
        },
        error:function(jqXHR){
             $("#data").html("    :"+jqXHR.status);
        }
    });
  });

   $("#postBtn").click(function(){
      $.ajax({
        type:"POST",
        url:"/WebDemo/servlet/AjaxDemoServlet",
         data:{
           username:$("#username").val(),
           password:$("#password").val(),
        },
        dataType:"json",     
        success:function(data){
            if(data.state){
                $("#test").html(data.msg);
            }else{
                $("#test").html("     :"+ data.msg);
            }
        },
        error:function(jqXHR){
             $("#test").html("    :"+jqXHR.status);
        }
    });
  });
});
script>
head>
<body>

<div>
<button id="getBtn">GETbutton>
<div id="data">div>
div>
<br>
<div>
<div>
<span>   span>
<input type="text" id="username">
div>
<div>
<span> 　 span> 
<input type="text" id="password">
div>
<button id="postBtn">POSTbutton>
<div id="test">div>
div>

body>
html>
nodejs:nodejsパッケージを開発して発表します.