[Do it!] 第2クエリー非同期起動
1. Ajax
Ajax : Asynchronous Javascript and XML
Ajaxとは、非同期JavaScriptとXMLのこと.
(1)同期と非同期の違い
同期は、次の操作を実行するためにサーバに信号を送信するときに応答を返さなければなりません.非同期では、サーバに信号を送信するときの応答に関係なく、次の操作を実行できます.
(2)なぜAjaxを使うのか
xml、json、html、テキストなどの情報は、クライアントとサーバの間で画面を切り替えることなく交換できます.
これは、クライアントが画面を切り替えずにサーバ要求の情報を受信できることを意味する.
非同期なので、要求された材料を待たずに他の操作を実行できます.
(3)サーバ側スクリプト言語
Ajaxを使用してフォームの要素をデータに送信し、応答を要求するプロセスにはWebサーバが必要ですが、データを送信することで要求の応答を送信するアクションページも必要です.アクションページは、通常、サーバ側スクリプトページphp、asp、jspを使用します.サーバ側スクリプト・ページは、サーバ・コンピュータに格納する必要があります.
プログラミング言語は、サーバ側言語とクライアント言語に大きく分けられます.クライアント言語にはJavaScriptなどがあり,サーバ側言語には前述のphpなどがある.クライアント言語はユーザコンピュータ上でプログラミングされ、サーバ側言語はサーバコンピュータ上でプログラミングされる.したがって,動的ユーザ環境開発ではクライアント言語を用い,データベース関連ではサーバ側言語を用いる.
例)
サイト・アクセス者のログインを例に、入力したユーザー名またはパスワードがクライアント言語JavaScriptまたはJクエリーを正しく使用しているかどうかを確認します.正しい形式のIDとパスワードの場合は、そのIDとパスワードをアクションページのサーバー側スクリプトページに送信し、データベースにIDとパスワードが存在するかどうかを確認します.
(4)WebサーバとWeb管理の違い
WebサーバとWebホストは、クライアントにWebサービスを提供します.しかしながら、Webサーバは、ユーザが直接コンピュータ上にサーバを構築する必要があり、Webホスティングは、構築されたサーバの外部コンピュータを借りる少量の記憶空間である.
2.AjaxでJSONデータをバインドする
バインドとは?
これは、非同期通信技術を用いてDBにデータを要求し、要求されたデータを受信してhtml段落タグにマージすることを意味する.
JSONとは?
JSON : JavaScript Object Notation
例)「属性1」:値1,「属性2」:値2,「属性3」:値3~}
JAvascriptのオブジェクトタグ法.データの転送に使用する標準フォーマット、属性(キー)、値(値)のペア.
(3)バインド方法
1.データベースの作成
:データベースにデータを要求し、JSON形式でデータを生成する.
2.HTMLにデータをロードしてバインドする
:htmlに$を入れます.ajax()メソッドを使用して外部データJSON形式のデータをロードし、テーブルに加工して必要なタグにマージします.
$.ajax()メソッド基本型
(1)XMLとは?
XML : eXtensible Markup Language
拡張寸法言語を意味します.拡張可能な言語なので、ユーザーは任意にタグ名を作成できます.したがって,サーバ上のデータをXMLデータに加工することは難しくない.したがって、XMLは主にデータの配布に用いられる.
xml基本型
1.データベースの作成
:データベースにデータを要求し、XML形式でデータを生成します.
2.HTMLにデータをロードしてバインドする
:htmlに$を入れます.ajax()メソッドを使用して、外部データXML形式のデータをロードします.たとえば、テーブルに加工し、必要なタグにマージします.
4.JavaScriptのセキュリティポリシーと外部データのバインド
(1)同一出所原則
原則としてajax()メソッドを用いて異なるドメインのデータを伝送することはできず,ドメイン間伝送も許されない.
したがって,異なるサイトでデータを交換する場合は,サーバ言語を用いてデータ(DB)をインポートしたりJSONPを用いたりすることができる.
サーバ言語を使用する場合は、異なるサイトからデータを要求しajaxに加工できます.この方法は、通常、管理者が外部サーバにアクセスできない場合に使用されます.
👀例)特定のジャーナリストのニュースコンテンツを取得して利用する場合
JSONPを使用する場合は、同じソースのセキュリティポリシーと管理者が外部サーバにアクセスできる必要があることを回避する条件で使用できます.
👀例)2つのサイトを管理するときに、2つのサイト間でデータを交換する場合
JSONP??
クライアントではなく異なるドメインに存在するサーバからデータを要求します.
5. RSS
本にはRSSを使った例がありますが、知らない概念なので整理しておきます.
RSS : Really Simple Syndication
超簡便な配置を意味する.これは、頻繁に更新されるウェブサイトで主に使用されるxmlベースのコンテンツ配信フォーマットです.サイトにRSSをバインドすることで、自分が運営しているサイトの内容を豊富にすることができます.
Ajax : Asynchronous Javascript and XML
Ajaxとは、非同期JavaScriptとXMLのこと.
(1)同期と非同期の違い
同期は、次の操作を実行するためにサーバに信号を送信するときに応答を返さなければなりません.非同期では、サーバに信号を送信するときの応答に関係なく、次の操作を実行できます.
(2)なぜAjaxを使うのか
xml、json、html、テキストなどの情報は、クライアントとサーバの間で画面を切り替えることなく交換できます.
これは、クライアントが画面を切り替えずにサーバ要求の情報を受信できることを意味する.
非同期なので、要求された材料を待たずに他の操作を実行できます.
(3)サーバ側スクリプト言語
Ajaxを使用してフォームの要素をデータに送信し、応答を要求するプロセスにはWebサーバが必要ですが、データを送信することで要求の応答を送信するアクションページも必要です.アクションページは、通常、サーバ側スクリプトページphp、asp、jspを使用します.サーバ側スクリプト・ページは、サーバ・コンピュータに格納する必要があります.
プログラミング言語は、サーバ側言語とクライアント言語に大きく分けられます.クライアント言語にはJavaScriptなどがあり,サーバ側言語には前述のphpなどがある.クライアント言語はユーザコンピュータ上でプログラミングされ、サーバ側言語はサーバコンピュータ上でプログラミングされる.したがって,動的ユーザ環境開発ではクライアント言語を用い,データベース関連ではサーバ側言語を用いる.
例)
サイト・アクセス者のログインを例に、入力したユーザー名またはパスワードがクライアント言語JavaScriptまたはJクエリーを正しく使用しているかどうかを確認します.正しい形式のIDとパスワードの場合は、そのIDとパスワードをアクションページのサーバー側スクリプトページに送信し、データベースにIDとパスワードが存在するかどうかを確認します.
(4)WebサーバとWeb管理の違い
WebサーバとWebホストは、クライアントにWebサービスを提供します.しかしながら、Webサーバは、ユーザが直接コンピュータ上にサーバを構築する必要があり、Webホスティングは、構築されたサーバの外部コンピュータを借りる少量の記憶空間である.
2.AjaxでJSONデータをバインドする
バインドとは?
これは、非同期通信技術を用いてDBにデータを要求し、要求されたデータを受信してhtml段落タグにマージすることを意味する.
JSONとは?
JSON : JavaScript Object Notation
例)「属性1」:値1,「属性2」:値2,「属性3」:値3~}
JAvascriptのオブジェクトタグ法.データの転送に使用する標準フォーマット、属性(キー)、値(値)のペア.
(3)バインド方法
1.データベースの作成
:データベースにデータを要求し、JSON形式でデータを生成する.
2.HTMLにデータをロードしてバインドする
:htmlに$を入れます.ajax()メソッドを使用して外部データJSON形式のデータをロードし、テーブルに加工して必要なタグにマージします.
$.ajax()メソッド基本型
$.ajax({
// 위에서 만든 json형식의 데이터 파일의 경로
url :"전송 페이지"(action url),
type :"전송 방식"(get, post 방식),
data :"전송할 데이터",
dataType :"요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
//여기서 매개변수 data는 요청한 데이터
success : function(data){
//전송에 성공하면 실행될 코드;
},
error : function{
//전송에 실패하면 실행될 코드;
}
});
3.Ajaxを使用してXMLデータをバインドする(1)XMLとは?
XML : eXtensible Markup Language
拡張寸法言語を意味します.拡張可能な言語なので、ユーザーは任意にタグ名を作成できます.したがって,サーバ上のデータをXMLデータに加工することは難しくない.したがって、XMLは主にデータの配布に用いられる.
xml基本型
<?xml version ="1.0" encoding = "UTF-8"?\>
//사용자가 정의한 태그
<tag1>
<tag2>내용</tag2>
</tag1>
(2)バインド方法1.データベースの作成
:データベースにデータを要求し、XML形式でデータを生成します.
2.HTMLにデータをロードしてバインドする
:htmlに$を入れます.ajax()メソッドを使用して、外部データXML形式のデータをロードします.たとえば、テーブルに加工し、必要なタグにマージします.
4.JavaScriptのセキュリティポリシーと外部データのバインド
(1)同一出所原則
原則としてajax()メソッドを用いて異なるドメインのデータを伝送することはできず,ドメイン間伝送も許されない.
したがって,異なるサイトでデータを交換する場合は,サーバ言語を用いてデータ(DB)をインポートしたりJSONPを用いたりすることができる.
サーバ言語を使用する場合は、異なるサイトからデータを要求しajaxに加工できます.この方法は、通常、管理者が外部サーバにアクセスできない場合に使用されます.
👀例)特定のジャーナリストのニュースコンテンツを取得して利用する場合
JSONPを使用する場合は、同じソースのセキュリティポリシーと管理者が外部サーバにアクセスできる必要があることを回避する条件で使用できます.
👀例)2つのサイトを管理するときに、2つのサイト間でデータを交換する場合
JSONP??
クライアントではなく異なるドメインに存在するサーバからデータを要求します.
5. RSS
本にはRSSを使った例がありますが、知らない概念なので整理しておきます.
RSS : Really Simple Syndication
超簡便な配置を意味する.これは、頻繁に更新されるウェブサイトで主に使用されるxmlベースのコンテンツ配信フォーマットです.サイトにRSSをバインドすることで、自分が運営しているサイトの内容を豊富にすることができます.
Reference
この問題について([Do it!] 第2クエリー非同期起動), 我々は、より多くの情報をここで見つけました https://velog.io/@jooyeon/4일차-제이쿼리-비동기-방식-연동テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol