ajaxの使い方を詳しく解説

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>

用户名： <input type="text" name="" id="username">

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>

用户名： <input type="text" name="" id="username">

2. 'Submit Method', 'Url address')xmlHttp.open('get','./AJAX_XML.xml');

3. ajax の準備ステータスと ステータスコード

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

4. リクエストの送信

xmlHttp.send(null) / /get モードパラメータはnull、ポストモード、パラメータは送信パラメータです

ユーザー名は非同期で送信されます（ユーザー名を入力した後、バックグラウンド判定が非同期で送信され、フロントデスクはすぐにプロンプ​​トを表示します）登録されているかどうか、送信するまで判断されません!)

GET経由で送信

xx.html

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
  }
}

Username: <input type="text" name="" id ="username">🎜🎜🎜🎜xx.php🎜🎜🎜rrreee🎜1. IE は中国語🎜🎜2 をサポートしていません。 wiki/57.html" target="_blank">文字列 🎜 キーワードが混同されています。 🎜🎜🎜投稿を投稿🎜🎜🎜🎜🎜🎜xx.html🎜🎜🎜rrreee🎜ユーザー名: <input type="text" name="" id= " username">🎜🎜🎜🎜xx.php🎜🎜🎜rrreee🎜1. send() を通じてデータを送信します🎜🎜2. 渡されたパラメーターを XML 形式に変換するには、SetRequestHeader() を設定する必要があります🎜🎜3。投稿の送信では、トランスコーディングを行わずに中国語を直接送信できます🎜🎜4. 🎜投稿リクエスト🎜の文字も URL 内の & および = 文字と混同されるため、POST では encodeURIComponent() エンコードを使用することをお勧めします🎜🎜5。送信と同時にGET送信も可能🎜🎜 解決策🎜🎜 IEは中国語=をサポートしていない&リクエストされた文字列のキーワードと混同されてしまう🎜🎜 問題🎜🎜 encodeURIComponent()を通してjsでエンコードするだけです。 🎜rrreee🎜1. req.responseText: 返された文字列を取得します🎜🎜2. req.responseXML: DOM 構造に従って返されたデータを取得します🎜

以上がajaxの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。