技術共有

AJAXとは何ですか?ネイティブ構文形式? パッケージ化された AJAX を提供する jQuery との違いは何ですか?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

アヤックス フルネーム 非同期JavaScriptとXML(非同期 JavaScript そして テキスト) 

アヤックスインタラクティブな Web アプリケーションを作成するための Web 開発テクノロジです。最も中心的な依存関係は、ブラウザーによって提供される XMLHttpRequest オブジェクトです。これにより、ブラウザーはこのオブジェクトを発行できるようになります。 ウェブ リクエストして受け取る ウェブ 応答。ページを更新せずにサーバーとの対話を実現します。

ネイティブ AJAX 構文形式:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
ajaxの使用方法:
1. XMLHttpRequest オブジェクトを作成する
2. open メソッドを使用して、要求するアドレス、タイプ、およびメソッドを指定します。
3. パラメータを渡す必要がある場合は、send メソッドを使用してリクエストを送信します。
get メソッドでは、パラメータを URL の末尾に接続し、パラメータを分割する必要があります。例: 'index.php?name=张三&age=18'
post メソッドは send() にパラメータを入れることができます。例: send('name=张三&age=18')
4. onreadystatechange イベントをバインドして、readyState と status のステータスを決定します。
5. データを受信し、json 変換して使用します。

 

jQuery は、より高速で開発プロジェクトでの使用に適したパッケージ化された AJAX を提供します。ネイティブ AJAX は理解しやすくなっています。

jQuery 構文形式:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });