慕課網先端就職クラスノート(ajax知識点)
4696 ワード
Ajaxとは?
Ajaxは、Webページ全体をロードすることなく、一部のWebページを更新できる技術です.それはいくつかの従来技術の結合体である.
Ajaxのメリット:1.非同期モード->ユーザー体験の向上理由:Javascriptは単一スレッド言語であり、非同期通信はユーザー操作を中断する必要がなく(サーバデータベースの書き込みを待つ必要がなく)、応答能力が大幅に向上します.そのため、ユーザー体験を向上させることができます.
2.ブラウザとサーバ間の伝送が最適化されるため、不要なデータの往復が減少し、帯域幅の占有量が減少する(これまではこれらの往復伝送によるデータの占有帯域幅であったため、これらのデータは減少し、自然帯域幅の占有量も減少した).
3.では、なぜ転送が最適化されるのでしょうか.これは、Ajaxエンジンがクライアントで動作しているため、サーバ側で行われていた作業の一部がクライアントに転送され、クライアントを利用して処理され、サーバとブロードバンドの負担が軽減され、スペースとブロードバンドのコストが軽減されるためです.(特に、大ユーザ量のサーバでは負荷が大幅に削減されます)->ユーザーエクスペリエンスの向上
Ajaxの欠点:1.ブラウザbackボタンはサポートされていません.ページ内で行うためです.
2.サーバとの通信のため、セキュリティ上の問題があり、サーバとのインタラクションの詳細が明らかになった
3.検索エンジンのサポートが弱い.
XMLHttpRequest
XMLHttpRequestは技術(非同期要求をサポート)であり、Ajaxの核心である.
一、役割:(1)要求と処理応答の提出->サーバ(このプロセスはユーザーをブロックしない)(2)ページロード時に局所更新を行う
二、Ajaxの使い方(Ajax非同期呼び出しとローカルリフレッシュ)
オブジェクトの作成->要求の作成->応答関数の設定->要求の送信->非同期呼び出しで返されるデータの取得->JavaScriptとDOMによるローカルリフレッシュ
作成されたオブジェクトがXMLHttpRequestオブジェクト(非同期呼び出しオブジェクト)である作成されたリクエストが新しいHTTPリクエスト(リクエスト作成時にそのHTTPを指定する方法、URL)である設定された関数は、HTTPリクエストのステータスの変化に応答する関数である
1.XMLHttpRequestオブジェクトの作成(このオブジェクトは作成時にブラウザ互換性に関する問題があるので、書き方はIEブラウザ対応の書き方と非IEブラウザ対応の書き方の2種類に分けられ、各種ブラウザ互換性のためにブラウザを作成する際にパッケージ化される.
カプセル化コード:typeofでローカルオブジェクトとして判断され、=="undefined"がローカルオブジェクトであることを示す場合、最終的にはオブジェクトインスタンスが返されます.詳細コード
シンコード
var xmlhttp; if(window.XMLHtppRequest) { xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); }
HTTPリクエストの作成方法構文:open(method,url,async)機能:HTTPリクエストの作成、リクエストのタイプの指定、URLおよびリクエストの非同期処理の有無
パラメータの説明:method:要求タイプ、GETまたはPOST url:サーバ上のファイルの場所async:true(非同期)またはfalse(同期)
Openメソッドは、サーバに真のリクエストを送信しません.これは、初期化リクエストに相当し、同じドメインで同じプロトコルとポートしか使用できないURLにリクエストを送信する準備をしています.そうしないと、セキュリティ上の理由でエラーが発生します.urlパラメータはopen()メソッドで唯一指定しなければならないパラメータであり、サーバ上のファイルのアドレスを設定するために使用され、このファイルは任意のタイプのファイル、例えば.txt和.xml、またはサーバスクリプトファイル、例えば.aspと.php(応答を返す前にサーバ上でタスクを実行できる)
GETとPOSTの違いGETは簡単で速いが、以下の場合、POST要求を使用する必要がある:1.キャッシュファイルを使用できません(サーバ上のファイルまたはデータベースを更新します).サーバに大量のデータを送信(POSTはデータ量制限なし).未知文字を含むユーザ入力を送信する場合、POSTはGETよりも安定で信頼性が高い
同期と非同期の区別同期:要求の発行->サーバ処理の待機->処理が完了して戻ってくる(この間、クライアント・ブラウザは何もできない)非同期:要求はイベントによってトリガーされます->サーバ処理(これはブラウザが他のことをすることができます)->処理完了の説明:asyncはブール値です.非同期通信方式(true)であれば、クライアントはサーバの応答を待たない.同期方式(false)の場合、クライアントはサーバがメッセージを返すまで他の操作を実行しません.
コード:
//リクエストxhrを作成する.open(“get”,"./sever/slider.json",true);
応答関数コードの設定://XMLHttpRequestオブジェクトの状態変化に応答する関数、onreadystatechangeはreadystatechange属性送信変更時にxhrをトリガーする.onreadystatechange=function(){//非同期呼び出し成功if(xhr.readystate 4){//応答内容解析完了、クライアント呼び出しif(xhr.status>=200&&xhr.status<300||xhr.status=304){//status>=200で非同期呼び出しが成功したことを示す//status=304で要求リソースが変更されていないことを示すため、キャッシュ//を使用してサーバから返されたデータconsole.log(xhr.responseText)}}readyState 0は、まだ初期化されていない(呼び出されていない)readyState 1で呼び出されたメソッドを示す.リクエストがまだ送信されていないreadyState 2メソッドが実行済みであることを示すreadyState 3応答内容が解析中であることを示すreadyState 4非同期呼び出しに成功したことを示す
要求がサーバに送信される->サーバが要求に応じて応答を生成する->XHRオブジェクトへの返信
要求構文の発生方法:send(string)機能:要求をサーバパラメータに送信する説明:stringはpost要求の注意事項にのみ使用されます:POST要求時にのみパラメータを入力でき、必要でなければnullが発生し、sendメソッドを呼び出した後に要求がサーバに送信されます
HTTPヘッダの追加方法
HTMLフォームのようなPOSTデータが必要な場合はsetRequestHeader()を使用してHTTPヘッダを追加する、send()メソッドで送信したいデータ構文:xmlhttpを規定する.setRequestHeader(header,value)使用:xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); getを使用する場合://リクエストxhrを作成する.open(“get”,"./sever/slider.json?user=zhangsan&id=6",true);//リクエストxhrを送信する.send(null); postを使用する場合://要求xhrを作成する.open(“post”,"./sever/slider.json",true);//リクエストxhrを送信する.send({user:“zhangsan”,id:6});//httpヘッダ情報xhrを設定.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”)
応答を受信すると、対応するデータはXHRオブジェクトのプロパティに入力され、4つの関連プロパティがresponseText-サーバプロセスからデータを返す文字列形式responseXML-サーバプロセスから返されるDOM互換ドキュメントデータオブジェクトstatus-サーバから返されるデジタルコードに入力されます.404(見つからない)および200(準備完了)status Textのように、ステータスコードを伴う文字列情報
Ajaxは、Webページ全体をロードすることなく、一部のWebページを更新できる技術です.それはいくつかの従来技術の結合体である.
Ajaxのメリット:1.非同期モード->ユーザー体験の向上理由:Javascriptは単一スレッド言語であり、非同期通信はユーザー操作を中断する必要がなく(サーバデータベースの書き込みを待つ必要がなく)、応答能力が大幅に向上します.そのため、ユーザー体験を向上させることができます.
2.ブラウザとサーバ間の伝送が最適化されるため、不要なデータの往復が減少し、帯域幅の占有量が減少する(これまではこれらの往復伝送によるデータの占有帯域幅であったため、これらのデータは減少し、自然帯域幅の占有量も減少した).
3.では、なぜ転送が最適化されるのでしょうか.これは、Ajaxエンジンがクライアントで動作しているため、サーバ側で行われていた作業の一部がクライアントに転送され、クライアントを利用して処理され、サーバとブロードバンドの負担が軽減され、スペースとブロードバンドのコストが軽減されるためです.(特に、大ユーザ量のサーバでは負荷が大幅に削減されます)->ユーザーエクスペリエンスの向上
Ajaxの欠点:1.ブラウザbackボタンはサポートされていません.ページ内で行うためです.
2.サーバとの通信のため、セキュリティ上の問題があり、サーバとのインタラクションの詳細が明らかになった
3.検索エンジンのサポートが弱い.
XMLHttpRequest
XMLHttpRequestは技術(非同期要求をサポート)であり、Ajaxの核心である.
一、役割:(1)要求と処理応答の提出->サーバ(このプロセスはユーザーをブロックしない)(2)ページロード時に局所更新を行う
二、Ajaxの使い方(Ajax非同期呼び出しとローカルリフレッシュ)
オブジェクトの作成->要求の作成->応答関数の設定->要求の送信->非同期呼び出しで返されるデータの取得->JavaScriptとDOMによるローカルリフレッシュ
作成されたオブジェクトがXMLHttpRequestオブジェクト(非同期呼び出しオブジェクト)である作成されたリクエストが新しいHTTPリクエスト(リクエスト作成時にそのHTTPを指定する方法、URL)である設定された関数は、HTTPリクエストのステータスの変化に応答する関数である
1.XMLHttpRequestオブジェクトの作成(このオブジェクトは作成時にブラウザ互換性に関する問題があるので、書き方はIEブラウザ対応の書き方と非IEブラウザ対応の書き方の2種類に分けられ、各種ブラウザ互換性のためにブラウザを作成する際にパッケージ化される.
カプセル化コード:typeofでローカルオブジェクトとして判断され、=="undefined"がローカルオブジェクトであることを示す場合、最終的にはオブジェクトインスタンスが返されます.詳細コード
// xhr ，
function createXHR(){
// XMLHttpRequest ， IE7，firefox,opera
if(typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!="undefined"){//IE 7
// ActiveXObject
var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
// XMLHttpRequest
var len=xhrArr.length;
for(var i=0;iシンコード
var xmlhttp; if(window.XMLHtppRequest) { xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); }
HTTPリクエストの作成方法構文:open(method,url,async)機能:HTTPリクエストの作成、リクエストのタイプの指定、URLおよびリクエストの非同期処理の有無
パラメータの説明:method:要求タイプ、GETまたはPOST url:サーバ上のファイルの場所async:true(非同期)またはfalse(同期)
Openメソッドは、サーバに真のリクエストを送信しません.これは、初期化リクエストに相当し、同じドメインで同じプロトコルとポートしか使用できないURLにリクエストを送信する準備をしています.そうしないと、セキュリティ上の理由でエラーが発生します.urlパラメータはopen()メソッドで唯一指定しなければならないパラメータであり、サーバ上のファイルのアドレスを設定するために使用され、このファイルは任意のタイプのファイル、例えば.txt和.xml、またはサーバスクリプトファイル、例えば.aspと.php(応答を返す前にサーバ上でタスクを実行できる)
GETとPOSTの違いGETは簡単で速いが、以下の場合、POST要求を使用する必要がある:1.キャッシュファイルを使用できません(サーバ上のファイルまたはデータベースを更新します).サーバに大量のデータを送信(POSTはデータ量制限なし).未知文字を含むユーザ入力を送信する場合、POSTはGETよりも安定で信頼性が高い
同期と非同期の区別同期:要求の発行->サーバ処理の待機->処理が完了して戻ってくる(この間、クライアント・ブラウザは何もできない)非同期:要求はイベントによってトリガーされます->サーバ処理(これはブラウザが他のことをすることができます)->処理完了の説明:asyncはブール値です.非同期通信方式(true)であれば、クライアントはサーバの応答を待たない.同期方式(false)の場合、クライアントはサーバがメッセージを返すまで他の操作を実行しません.
コード:
//リクエストxhrを作成する.open(“get”,"./sever/slider.json",true);
応答関数コードの設定://XMLHttpRequestオブジェクトの状態変化に応答する関数、onreadystatechangeはreadystatechange属性送信変更時にxhrをトリガーする.onreadystatechange=function(){//非同期呼び出し成功if(xhr.readystate 4){//応答内容解析完了、クライアント呼び出しif(xhr.status>=200&&xhr.status<300||xhr.status=304){//status>=200で非同期呼び出しが成功したことを示す//status=304で要求リソースが変更されていないことを示すため、キャッシュ//を使用してサーバから返されたデータconsole.log(xhr.responseText)}}readyState 0は、まだ初期化されていない(呼び出されていない)readyState 1で呼び出されたメソッドを示す.リクエストがまだ送信されていないreadyState 2メソッドが実行済みであることを示すreadyState 3応答内容が解析中であることを示すreadyState 4非同期呼び出しに成功したことを示す
要求がサーバに送信される->サーバが要求に応じて応答を生成する->XHRオブジェクトへの返信
要求構文の発生方法:send(string)機能:要求をサーバパラメータに送信する説明:stringはpost要求の注意事項にのみ使用されます:POST要求時にのみパラメータを入力でき、必要でなければnullが発生し、sendメソッドを呼び出した後に要求がサーバに送信されます
HTTPヘッダの追加方法
HTMLフォームのようなPOSTデータが必要な場合はsetRequestHeader()を使用してHTTPヘッダを追加する、send()メソッドで送信したいデータ構文:xmlhttpを規定する.setRequestHeader(header,value)使用:xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); getを使用する場合://リクエストxhrを作成する.open(“get”,"./sever/slider.json?user=zhangsan&id=6",true);//リクエストxhrを送信する.send(null); postを使用する場合://要求xhrを作成する.open(“post”,"./sever/slider.json",true);//リクエストxhrを送信する.send({user:“zhangsan”,id:6});//httpヘッダ情報xhrを設定.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”)
応答を受信すると、対応するデータはXHRオブジェクトのプロパティに入力され、4つの関連プロパティがresponseText-サーバプロセスからデータを返す文字列形式responseXML-サーバプロセスから返されるDOM互換ドキュメントデータオブジェクトstatus-サーバから返されるデジタルコードに入力されます.404(見つからない)および200(準備完了)status Textのように、ステータスコードを伴う文字列情報