目次
1. Ajaxとは
2. ネイティブ JS を使用して Ajax を実装します。
三、JQuery 实现 Ajax
一、什么是 Ajax
二、原生 JS 实现 Ajax
ホームページ ウェブフロントエンド jsチュートリアル アヤックスとは何ですか? ajaxのいくつかの実装方法を詳しく解説(使用例付き)

アヤックスとは何ですか? ajaxのいくつかの実装方法を詳しく解説(使用例付き)

Sep 10, 2018 am 11:09 AM
ajax js

この記事では、ajaxの実装方法と、ajaxの定義解析を中心に紹介します。 ajax の使用方法と、jQuery を使用して ajax を実装する方法を誰もがより深く理解できるようにします。今すぐこの記事を読み始めましょう

1. Ajaxとは

Ajax:クライアントとサーバー間のデータ交換処理を実現し、非同期でリクエストを送信する非同期JavaScriptおよびXML。 Ajax は新しいプログラミング言語ではなく、より優れた、より高速な、よりインタラクティブな Web アプリケーションを作成するためのテクノロジーです。
テクノロジーを使用する利点は次のとおりです: ページを更新する必要がなく、ページがデータを送信するのを待っている間に他の操作を実行できます

2. ネイティブ JS を使用して Ajax を実装します。

実装ルーチンは次のとおりです。
1. さまざまなブラウザーに従って xmlHttpRequest オブジェクト を作成します。xmlHttpRequest 对象
2. 用 open 调用,用 send 发送请求给 Ajax 引擎。
3. 服务器程序执行完毕后,把结果返回给客户端(用 xml.readyState == 4 && xml.status == 200 判定发送是否成功,然后用 xml.responseText接收后台传回来的数据)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
ログイン後にコピー
ログイン後にコピー

三、JQuery 实现 Ajax

JQuery实现 Ajax 的方法就简单很多了,已经封装好了一个 $.ajax函数,调用很方便。

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
ログイン後にコピー
ログイン後にコピー

一、什么是 Ajax


Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程同时是异步发送请求。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作

二、原生 JS 实现 Ajax


这里有一个实现的套路,思路大致是这样的:
1. 根据不同的浏览器,创建 xmlHttpRequest 对象
2. 用 open 调用,用 send 发送请求给 Ajax 引擎。
3. 服务器程序执行完毕后,把结果返回给客户端(用 xml.readyState == 4 && xml.status == 200 判定发送是否成功,然后用 xml.responseText接收后台传回来的数据)(想看更多就到PHP中文网AJAX开发手册栏目中学习)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
ログイン後にコピー
ログイン後にコピー

三、JQuery 实现 Ajax

JQuery实现 Ajax 的方法就简单很多了,已经封装好了一个 $.ajax2. send はリクエストを Ajax エンジンに送信します。

3. サーバー プログラムの実行後、結果がクライアントに返されます (xml.readyState == 4 && xml.status == 200 を使用して送信が成功したかどうかを判断し、その後、 xml.responseText バックグラウンドから返送されたデータを受信します)

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
ログイン後にコピー
ログイン後にコピー
3. JQuery は Ajax を実装しますJQuery は、より簡単な方法で Ajax を実装しています。$.ajax はすでにカプセル化されています。 code> 関数は非常に簡単に呼び出すことができます。 🎜rrreee🎜 1. Ajaxとは🎜<hr>🎜Ajax: クライアントとサーバー間のデータ交換処理を実現し、非同期でリクエストを送信する非同期JavaScriptおよびXML。 Ajax は新しいプログラミング言語ではなく、より優れた、より高速な、よりインタラクティブな Web アプリケーションを作成するためのテクノロジーです。 🎜テクノロジーを使用する利点は次のとおりです: 🎜ページを更新する必要がなく、ページがデータを送信するのを待っている間に他の操作を実行できます🎜。 🎜🎜2. ネイティブ JS で Ajax を実装します🎜<hr>🎜実装ルーチンは次のとおりです。🎜1. さまざまなブラウザーに応じて <code>xmlHttpRequest オブジェクト を作成します。 open を呼び出して、send を使用してリクエストを Ajax エンジンに送信します。 🎜3. サーバー プログラムの実行後、結果がクライアントに返されます (xml.readyState == 4 && xml.status == 200 を使用して送信が成功したかどうかを判断し、その後、 xml.responseText バックグラウンドから送り返されたデータを受信します) (さらに詳しく知りたい場合は、PHP 中国語 Web サイト🎜AJAX 開発マニュアル🎜 の列にアクセスして学習してください)🎜rrreee🎜3. JQuery は Ajax を実装します。 🎜🎜Ajax を実装する JQuery のメソッドは、$.ajax 関数がカプセル化されており、呼び出すのが非常に簡単です。 🎜rrreee🎜この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの 🎜ajax ユーザー マニュアル🎜 列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。 🎜

以上がアヤックスとは何ですか? ajaxのいくつかの実装方法を詳しく解説(使用例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

PHP と Ajax: オートコンプリート提案エンジンの構築 PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

jsとvueの関係 jsとvueの関係 Mar 11, 2024 pm 05:21 PM

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

See all articles