JavaScript、jQuery、AJAX、JSONの4つの関係?

作者:sagittarius-rev
リンク:https://www.zhihu.com/question/31305968/answer/116439739
出典:知っている
著作権は作者の所有である.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.
1. JavaScript
JavaScript(略称js)は、主にブラウザで実行される弱いタイプの動的スクリプト言語であり、データ検証処理、ページ動的効果、タイミングタスク、ユーザーとのインタラクション、サーバ側データの送信/受信など、Webページ上の高度な機能を実現するために使用できます.
動的言語とは、プログラムの実行時に構造を変更できることを指し、主に:1 jsの変数は宣言時にタイプを指定する必要はなく、その実際のタイプはプログラムの実行中の賦値によって決定され、実行中に変数のタイプも変更することができる.注意:この点は動的言語の特徴であり、弱いタイプの言語の特徴ではなく、前の答えに誤りがあった.②関数は可変です.jsは実行中にevalを使用して文字列内のコマンドを動的に実行したり、new Functionなどの方法で文字列から関数を動的に構築したりすることができます.関数は作成、修正、削除することができ、既存の関数から新しい関数を構築することができます.③オブジェクトのメンバーは可変で、メンバー属性またはメンバーメソッドを動的に追加、削除できます.
弱いタイプとは、jsの変数が演算に参加するときに実際の必要に応じて動的にタイプを変換できることを意味します.これに対応するのは強力な言語です.変数は一般的に自動変換タイプを許可しません(一部の強力な言語の文字列接続操作を除きます).演算、呼び出しに参加するときに要求されたタイプに合わない場合は、コンパイルフェーズでエラーが発生します.
jsは1995年にNetscape社のBrendan Eichが自社のブラウザNetscape Navigatorのために開発したもので、フォームの各入力項目が所定のルールに合致しているかどうかを検証し、検証が通過した後にサーバにフォームの内容を提出し、ページとサーバ側の不要な頻繁なインタラクションを減らすことを意図していた.
jsの最初のバージョンは10日で開発が完了し、もちろん完全に無から有に至るのではなく、他の言語の特性を参考にして開発された.このように急いで開発して、jsは自然にいくつかの先天的な不足があって、しかし同時に弱いタイプの動態言語に基づく便利で柔軟で、対象の原型の継承、関数は1種の特殊な対象であるなどの優秀な特性を備えて、そこでますます広範な応用を得て、言語自身も標準化の組織の推進の下で絶えず発展して進歩します.
ブラウザの発展の初期に、MicrosoftはJavaScriptを模倣して似たようなスクリプト言語Jscriptを発売し、IEブラウザで使用し、Microsoftは同時にVBSScriptを発売した.その後、異なるブラウザでスクリプト言語が互換性がないという問題を解決するため、ECMA(欧州コンピュータメーカー協会)に標準化グループが設立され、各メーカーが参加してJavaScriptの言語規範を共同で制定し、規範化されたこの言語はECMAScriptと命名された.
jsは、サーバ側のNodeなど、ブラウザ以外の場合にも使用することができる.js、javaのRhino、インタフェースレスブラウザPhantomJSなど.
2. jQuery
jQueryはjsのツールライブラリで、John Resigが2006年に発表した.jはJavaScriptを表し、queryは「クエリー」という意味です.つまり,このライブラリの意図はJavaScriptベースのクエリである.クエリーのターゲットは何ですか?答えはDOM(ドキュメントオブジェクトモデル)構造のノードです.1つのWebページはhtmlドキュメントであり、Webページのすべてのコンテンツは、ドキュメントノード、要素ノード、テキストノード、コメントノード、プロパティノードなど、ノードです.jQueryのクエリは、段落(p)、アンカーポイント(a)、テーブル(table)などの要素ノードを主に対象としており、テキストノードと注釈ノードを処理できる方法は少数しかない.同時にjQueryはattr法で要素ノードの属性を容易に読み取り/設定することもできる.jQueryが現れる前に、jsプログラムで要素ノードを取得するのは面倒です.例えば、idがelem 1のノードを取得するのは面倒です.

document.getElementById('elem1')

または、ページ上のすべてのcheckbox要素を取得するには、まずinputタイプの要素を取得する必要があります.

document.getElementsByTagName('input')

次に、得られた要素リストをforループ処理し、そのタイプがcheckboxであるか否かを1つずつ判断する.より多くのメタ化されたクエリー要件がある場合、対応するjsコードもかなり複雑になります.このようなニーズを解決できるライブラリはいくつかありますが、強さ、使いやすさなどは理想的ではありません.John Resigがブラインドポイントであるcssスタイルをページに適用する要素を発見した場合、ブラウザはcssセレクタを通じて一致する要素を見つけ、指定したスタイルをこれらの要素に適用するルールがあります.すなわち,cssセレクタにより要素検索位置決めを効率的に行うことができるが,当初はスタイル領域にのみ用いられていた.そこで,John Resigはcssセレクタに基づいてjQueryセレクタを記述し,セレクタのルールを拡張し,要素検索を非常に便利にした.たとえば、上記の2つの例はjQueryで次のように書くことができます.

$('#elem1')

と

$(":checkbox")

同時に、jQueryにはチェーン操作という核心思想があります.例えば、

$('div.con')
    .height(100)
    .show();

このような連続呼び出しは、jQuery自身のスローガンであるwrite less、do moreをより簡潔に書くことができます.
また、jQueryはブラウザ互換性、スタイル読み書き、イベントバインドと実行、アニメーションなどの特性を提供し、ajax、promiseなどを加え、便利なプラグイン作成メカニズムを加え、js全体の生態圏に大きな影響を及ぼし、js史上最大の影響力を持つライブラリと言える.セレクタエンジンはその後、sizzleとして個別に剥離され、他のjsライブラリ呼び出しに供される.この部分の仕事はまた公式に影響して、jQueryが成功した後、ブラウザはquerySelectorとquerySelectorAllの方法を持っています.これまでquerySelectorとquerySelectorAllがあったが,jQueryのセレクタには上位2者に取って代わることができない特性のほんの一部が残っている.
3. ajax
ajax全称Asynchronous JavaScript and XML(非同期JavaScriptとXML)は、ページをリフレッシュする必要がなく、jsを使用してサーバと対話する技術です.
ページの1つの領域だけを変更する必要がある場合があります.しかし、従来の技術フレームワークではページ全体をリフレッシュするしかなく、1ページ全体を再転送する必要があり、サーバ側とクライアントのトラフィック消費が大きい.②ダイナミックページであれば、サーバ側はページ全体を再生成する必要があり、お客様がリフレッシュしたくない領域であっても、サーバの負担が増大します.
GoogleのJesse James Garrettは2005年初めにこのようなニーズを解決する技術案、すなわちajaxを提供した文章を発表した.実はこれは実践先行の技術で、この案の技術依存の一つであるXMLHTTPは1998年にMicrosoftによって開発されたが、Googleは数年後にこの技術を使ってGoogle Mapsなどの製品を開発した後、相応の文章を発表し、命名した.
ajaxの基本的な流れは、ページ上のjsスクリプトがXMLhttpRequestオブジェクトをインスタンス化し、サーバ側のurl、必要なクエリーパラメータ、コールバック関数を設定した後、サーバに要求を発行し、サーバは要求を処理した後、処理結果をページに返し、事前にバインドされたコールバック関数をトリガーする.このように、ページスクリプトは、1つの領域の内容を変更するにはajaxを介してサーバにその領域に関する少量のデータを取得し、コールバック関数でその領域の内容を置き換えるだけで、ページ全体をリフレッシュする必要はありません.
XMLHttpRequestは、リクエストを送信する際に、同期と非同期の2つの方法があります.同期方式は,要求発行後,サーバから返されるデータを受信するまでブラウザプロセスがブロックされ,ページ上では何もできない.非同期方式ではブラウザプロセスがブロックされず、サービス側がデータを返してコールバック関数をトリガーする前に、ユーザーはこのページで他の操作を行うことができます.ajaxの核心は非同期方式であり,同期方式は極めて特殊な場合にのみ用いられる.
XMLHttpRequestは、初期のIEブラウザでActiveXを使用して実現されており、ブラウザ自体のオブジェクトではありません.その後、他の各ブラウザもXMLHttpRequestオブジェクトを実現し、高バージョンIEもXMLttpRequestをブラウザの組み込みオブジェクトに変更した.
4. JSON
JSONフルネームJavaScript Object Notation(jsオブジェクトマーキング法)は、Douglas Crockfordによって2002年に発見され制定された標準である.名前から分かるようにJSONはJavaScriptベースでJavaScriptのサブセットです.JSONはJavaScript構文でデータを表す軽量言語です.
Douglasは2002年に登録しましたがhttp://json.orgまた,JSONデータを解析・構築するライブラリを様々な言語に対して作成したが,最初の数年間はJSONが十分に重視されていなかった.状況はajaxの出現まで続いた.
ajaxのネーミングから,データ交換はXML形式で行われていることがわかる.ajaxが登場したばかりの頃は、ほとんどのアプリケーションがXML形式を採用していたが、純粋なテキストを使用する人も少なくなかった.しかし、XMLフォーマットには、ドキュメントの構造が複雑で、より多くのバイト数を転送する必要があるという欠点があります.この場合,JSONの軽量性が徐々に重視され,その後XMLに代わってajaxの最も主要なデータ伝送フォーマットとなった.簡単な例を挙げて、両者の違いを感じてみましょう.