ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript に基づいた AJAX の簡単な小さなデモ

JavaScript に基づいた AJAX の簡単な小さなデモ

高洛峰
高洛峰オリジナル
2017-02-03 13:54:421242ブラウズ

AJAX

AJAX = 非同期の JavaScript と XML。

AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。

AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。

function prepareForms() {
 for(var j=0 ; j<document.forms.length ; j++){
  var this_forms = document.forms[j];
  resetFields(this_forms);
   this_forms.onsubmit = function () {
    if(!validateForm(this)) return false; //进行浏览器端表单验证
    var article = document.getElementsByTagName("article")[0];
    if(submitFormWithAjax(this,article)) return false; //代表防止重复提交 实际的提交已经完成
   return true;
   }
 }
}

まず、フォームの送信イベントを通じて、対応する検証メソッドとajax送信メソッドを呼び出し、ajaxが失敗した場合は、通常通り送信イベントをインターセプトします。何が起こったのかを段階的に確認します

最初はリクエストオブジェクトを取得することです

2つ目はページに記事の下のすべての要素を削除させ、ロードアニメーションを挿入することです

3つ目はURL エンコードされたリクエストを作成し、配列を使用して名前とターゲットを含む項目を保存します。次に、URL エスケープされた値を & と組み合わせて完全な文字列を形成します。4 番目は、リクエストの名前など、リクエストの基本属性を設定します。 5 番目は、リクエストをリッスンし、成功した場合に応答を送信するリスナーを作成します

6 番目の正式なリクエストは正常に送信され、true が返されます

上記。エディターが紹介した JavaScript の基本的な AJAX の簡単なデモです。ご質問があれば、メッセージを残してください。すぐに返信します。

基本的な JavaScript AJAX の簡単なデモに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。