目次
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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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 オープンソースの顔検出および認識プロジェクト

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

jQuery AJAX リクエストで発生した 403 エラーを解決する方法

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

jQuery AJAXリクエスト403エラーを解決する方法

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

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?

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

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか?

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

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション

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

jsとvueの関係

JSのAI時代が到来! JSのAI時代が到来! Apr 08, 2024 am 09:10 AM

JSのAI時代が到来!

See all articles