AJAX の使用方法を教える 4 つのステップ

AJAX は「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。

AJAX = 非同期 JavaScript および XML (標準ユニバーサル マークアップ言語のサブセット)。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX は、Web ページ全体をリロードせずに Web ページの一部を更新できるテクノロジーです。 [1]

AJAX は、バックグラウンドでサーバーと少量のデータを交換することで、Web ページの非同期更新を可能にします。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

この記事では主にAJAXの利用に関する関連知識を紹介します。

AJAX は非同期送信で、部分更新は非常に便利で、用途がたくさんあります。

まず、AJAX を使用するには 4 つの手順があります:

1. AJAX オブジェクトを作成します

var xmlHttp = new XMLHttpRequest();var xmlHttp = new XMLHttpRequest();

2.建立连接 （‘提交方式'，‘Url地址'）

xmlHttp.open('get','./AJAX_XML.xml');

3.判断ajax准备状态及状态码

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4.发送请求

xmlHttp.send(null);    //get方式参数为null,post方式，参数为提交的参数

以下以异步提交用户名（输入用户名之后，异步提交后台判断，前台立马提示是否已注册，不用提交时再判断！）

GET方式提交

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}
</script>

用户名：  5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_GET);
?>　

1、   IE不支持中文

2、   =、&与请求的字符串的关键字相混淆。

POST提交

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>

用户名： 5a4b8d0a5ff6b1d7cda32164f687201c

2. 接続を確立します。 Method' , 'URL address')xmlHttp.open('get','./AJAX_XML.xml');

3. ajax 準備ステータスとステータス コードを決定します

<?php
print_r($_POST);
print_r($_GET);
?>

4. リクエストを送信します

xmlHttp.send(null); //get メソッドのパラメータは null、post メソッド、パラメータは送信されたパラメータです

以下はユーザー名を非同期で送信する（ユーザー名を入力後、背景を非同期で判定し、すぐにフロントにて登録済みかどうかを確認し、送信不要の場合に判断します。

）

window.onload=function(){
  document.getElementById('username').onblur=function(){
    var name=document.getElementById('username').value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open('get','4-demo.php?name='+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}

ユーザー名: 306390a7801fb48b5463fcd9f5d4c11f

xx.php

rrreee 1、IEは中国語をサポートしていません

2、=、&は要求された文字列のキーワードと混同されます。 🎜🎜🎜投稿を投稿🎜🎜🎜🎜🎜🎜xx.html🎜🎜🎜🎜🎜rrreee🎜🎜🎜ユーザー名: 3b42f4728195d568c07ac41a5e20c098🎜🎜🎜🎜xx.php🎜🎜🎜🎜🎜rrreee🎜🎜🎜1. send() を通じてデータを送信します🎜🎜2. setRequestHeader() によって渡されるパラメータは、次のとおりです。 XML 形式に変換します🎜🎜3. 投稿リクエストの文字は、URL 内の & および = 文字と混同されるため、encodeURIComponent( ) エンコーディング🎜🎜5. GET 送信は POST 送信と同時に実行できます🎜🎜解決策🎜🎜 IE は中国語 = をサポートしておらず、要求された文字列のキーワードと混同されます🎜🎜問題🎜🎜 encodeURIComponent() 以上です。 🎜🎜🎜rrreee🎜🎜🎜1. req.responseText: 返された文字列を取得します🎜🎜2. req.responseXML: DOM 構造に従って返されたデータを取得します🎜🎜🎜🎜 投稿メソッドと取得メソッドの違いに注意してください。 🎜🎜🎜

以上がAJAX の使用方法を教える 4 つのステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。