Ajax手書きコード対応会
5672 ワード
一、Ajaxとは何ですか.
Ajaxはいくつかの単語の頭文字の略語です:Asynchronous(非同期)Javascript And Xml.新しいテクノロジーではなく、Javascript、XML、CSSなど、いくつかの既存のテクノロジーを統合しています.
JavascriptのXMLhttpRequestオブジェクトによってサーバに要求を送信して結果を返すタスクを完了し、jsでローカルのWebページを更新します.xmlは一般的にデータと応答データのパッケージを要求し、CSSはページスタイルを美化するために使用されます.
二、伝統的なweb開発技術とAjax技術の違いは何ですか.
いずれの開発技術を用いても,プロセスはクライアントからHTTPリクエストを送信した後,サーバからリクエストに応答するものであり,両者には多くの相違がある.
1、送信要求方式が違う:伝統的なwebアプリケーションはフォームを提出することによって要求を送信し、Ajax技術はjavascriptのXMLHttpRequestオブジェクトによって要求を送信する
2、サーバーの応答が違う:伝統的なweb応用サーバーの応答は完全なページで、Ajax技術を採用した後、サーバーの応答はただ必要なデータである
3、クライアント処理の応答方式は異なっている:伝統的なwebアプリケーションが要求を送信した後、ブラウザはサーバーの応答が完成した後に全体のページを再ロードすることを待つが、Ajax技術を採用した後、ブラウザは要求の応答を待つのではなく、ただ動的にページを更新する中で更に新しい部分が必要である
三、XmlHttpRequestの常用方法
1、Open(method、URL、async):サーバーに確立された接続、methodパラメータ指定要求のHTTP方法;URLパラメータは要求のアドレスを指定する.asyncパラメータは、trueまたはfalse[Firefoxで応答なし]の値を持つ非同期要求を使用するかどうかを指定します.
2、send(content):要求を送信し、contentパラメータは要求のパラメータを指定する
3、setRequestHeader(header,value):要求のヘッダ情報を設定する
経験:XMLHttpRequestのsend()メソッドがパラメータ、すなわちxmlHttpRequestを構成しない場合.send()の場合、IEでは正常に動作しますが、Firefoxではできませんのでnullを付けることをお勧めします
四、XmlHttpRequestの共通属性
1、onreadystatechange:XMLHttpRequestオブジェクトのコールバック関数を指定します.onreadystatechangeプロパティは、テキストボックスのonblurなどのプロパティと同様に、XmlHttpRequestの状態が変化すると、XmlHttpRequestオブジェクトがonreadystatechangeで指定した関数をトリガーするイベント処理プロパティです.
2、readyState:XmlHttpRequestのステータス情報.
5つの状態があります.
u 0:XmlHttpRequestオブジェクトの初期化が完了していません.XmlHttpRequestオブジェクトが作成されましたが、まだ初期化されていません.
u 1:XmlHttpRequestオブジェクトはリクエストの送信を開始し、コードはopen()メソッドを呼び出し、XmlHttpRequestはリクエストをサーバに送信する準備ができている.
u 2:XmlHttpRequestオブジェクトのリクエスト送信が完了しました.この時点でsendメソッドによって1つのリクエストがサーバ側に送信されましたが、まだ1つの応答が受信されていません.
u 3:XmlHttpRequestオブジェクト読み出し応答開始;このときHTTP応答ヘッダ情報は既に受信されているが,メッセージ抽出部はまだ完全に受信が終了していない.
u 4:XmlHttpRequestオブジェクト読み出し応答が終了し、応答が完全に受信されました
3、status:HTTPのステータスコード.statusプロパティは、readyStateの値が3または4の場合にのみ使用できます.
HTTPでよく使われるステータスコードとその意味は以下の通りです.
200:サーバ応答正常
400:要求されたリソースの検索を開始
403:アクセス権なし
404:アクセスするリソースが存在しない
500:サーバ内部エラー
4、responseText:応答のテキスト内容を得る
注意:readyState値が0、1または2の場合、responseTextには空の文字列が含まれます.readyState値が3の場合、応答にはまだ完了していない応答情報が含まれます.readyStateが4の場合、responseTextには完全な応答情報が含まれます.
5.responseXML:応答を得たXML文書オブジェクト
注意:readyStateの値が4でない場合、responseXMLの値はnullです.responseXMLが完全な応答を受信する場合、Conent-Typeが指定したMIMEタイプにtext/xmlまたはアプリケーション/xmlが含まれていない場合、または+xmlの末尾の1つであるMIMEタイプの場合、responseXMLの値はnullになります.
五、Ajax技術を用いて非同期インタラクションを実現する手順は以下の通りである.
1、JS DOM技術を用いてページデータを取得する
2、処理したデータをXmlHttpRequestでサーバーに送る
3、サーバー処理データ
4、処理結果、JS DOMでページデータを更新する
Ajaxはいくつかの単語の頭文字の略語です:Asynchronous(非同期)Javascript And Xml.新しいテクノロジーではなく、Javascript、XML、CSSなど、いくつかの既存のテクノロジーを統合しています.
JavascriptのXMLhttpRequestオブジェクトによってサーバに要求を送信して結果を返すタスクを完了し、jsでローカルのWebページを更新します.xmlは一般的にデータと応答データのパッケージを要求し、CSSはページスタイルを美化するために使用されます.
二、伝統的なweb開発技術とAjax技術の違いは何ですか.
いずれの開発技術を用いても,プロセスはクライアントからHTTPリクエストを送信した後,サーバからリクエストに応答するものであり,両者には多くの相違がある.
1、送信要求方式が違う:伝統的なwebアプリケーションはフォームを提出することによって要求を送信し、Ajax技術はjavascriptのXMLHttpRequestオブジェクトによって要求を送信する
2、サーバーの応答が違う:伝統的なweb応用サーバーの応答は完全なページで、Ajax技術を採用した後、サーバーの応答はただ必要なデータである
3、クライアント処理の応答方式は異なっている:伝統的なwebアプリケーションが要求を送信した後、ブラウザはサーバーの応答が完成した後に全体のページを再ロードすることを待つが、Ajax技術を採用した後、ブラウザは要求の応答を待つのではなく、ただ動的にページを更新する中で更に新しい部分が必要である
三、XmlHttpRequestの常用方法
1、Open(method、URL、async):サーバーに確立された接続、methodパラメータ指定要求のHTTP方法;URLパラメータは要求のアドレスを指定する.asyncパラメータは、trueまたはfalse[Firefoxで応答なし]の値を持つ非同期要求を使用するかどうかを指定します.
2、send(content):要求を送信し、contentパラメータは要求のパラメータを指定する
3、setRequestHeader(header,value):要求のヘッダ情報を設定する
経験:XMLHttpRequestのsend()メソッドがパラメータ、すなわちxmlHttpRequestを構成しない場合.send()の場合、IEでは正常に動作しますが、Firefoxではできませんのでnullを付けることをお勧めします
四、XmlHttpRequestの共通属性
1、onreadystatechange:XMLHttpRequestオブジェクトのコールバック関数を指定します.onreadystatechangeプロパティは、テキストボックスのonblurなどのプロパティと同様に、XmlHttpRequestの状態が変化すると、XmlHttpRequestオブジェクトがonreadystatechangeで指定した関数をトリガーするイベント処理プロパティです.
2、readyState:XmlHttpRequestのステータス情報.
5つの状態があります.
u 0:XmlHttpRequestオブジェクトの初期化が完了していません.XmlHttpRequestオブジェクトが作成されましたが、まだ初期化されていません.
u 1:XmlHttpRequestオブジェクトはリクエストの送信を開始し、コードはopen()メソッドを呼び出し、XmlHttpRequestはリクエストをサーバに送信する準備ができている.
u 2:XmlHttpRequestオブジェクトのリクエスト送信が完了しました.この時点でsendメソッドによって1つのリクエストがサーバ側に送信されましたが、まだ1つの応答が受信されていません.
u 3:XmlHttpRequestオブジェクト読み出し応答開始;このときHTTP応答ヘッダ情報は既に受信されているが,メッセージ抽出部はまだ完全に受信が終了していない.
u 4:XmlHttpRequestオブジェクト読み出し応答が終了し、応答が完全に受信されました
3、status:HTTPのステータスコード.statusプロパティは、readyStateの値が3または4の場合にのみ使用できます.
HTTPでよく使われるステータスコードとその意味は以下の通りです.
200:サーバ応答正常
400:要求されたリソースの検索を開始
403:アクセス権なし
404:アクセスするリソースが存在しない
500:サーバ内部エラー
4、responseText:応答のテキスト内容を得る
注意:readyState値が0、1または2の場合、responseTextには空の文字列が含まれます.readyState値が3の場合、応答にはまだ完了していない応答情報が含まれます.readyStateが4の場合、responseTextには完全な応答情報が含まれます.
5.responseXML:応答を得たXML文書オブジェクト
注意:readyStateの値が4でない場合、responseXMLの値はnullです.responseXMLが完全な応答を受信する場合、Conent-Typeが指定したMIMEタイプにtext/xmlまたはアプリケーション/xmlが含まれていない場合、または+xmlの末尾の1つであるMIMEタイプの場合、responseXMLの値はnullになります.
五、Ajax技術を用いて非同期インタラクションを実現する手順は以下の通りである.
1、JS DOM技術を用いてページデータを取得する
2、処理したデータをXmlHttpRequestでサーバーに送る
3、サーバー処理データ
4、処理結果、JS DOMでページデータを更新する
(function (window) {
'use strict';
///XMLHttpRequest
var ReadyStateType = {
UNSENT: 0, //open()
OPENED: 1, //open()
HEADERS_RECEIVED: 2, //
LOADING: 3, //
DONE: 4 //
},
///
mimeType = {
'form': 'application/x-www-form-urlencoded',
'json': "application/json"
},
XHP = new XMLHttpRequest(),
Ajax = function () {
};
Ajax.prototype.encodeFormData = function (data) {
///<summary>
/// 1： / application/x-www-form-urlencoded
/// 2：string encodeFormData(object data)
///</summary>
if (Array.isArray(data) || !data) {
throw new Error(":" + "data");
}
var valus = [];
for (var item in data) {
var value = data[item].toString();
var key = item.toString();
valus.push(key + "=" + value);
}
return valus.join("&")
};
Ajax.prototype.ajax = function (option) {
///<summary>
/// 1：void ajax(option)
///</summary>
try {
XHP.open(option.type || "get", option.url);
XHP.onreadystatechange = function () {
if (XHP.readyState == 4 && XHP.status == 200) {
///responseText
option.success(XHP.responseText, XHP.statusText, XHP);
}
}
// alert(ContentType[(type || "form")]);
XHP.setRequestHeader("Content-Type", mimeType[option.mimeType || "form"]);
// XHP.send(this.encodeFormData(option.data));
var json = JSON.stringify(option.data);
XHP.send(json);
} catch (erro) {
throw new Error(erro.ToString());
}
};
Ajax.prototype.post = function (url, data, callback, type) {
///<summary>
/// POST
///</summary>
///<param type="String" name="url"> </param>
///<param type="Object" name="data"> Key/value </param>
///<param type="Function" name="callback"> </param>
///<param type="String" name="[type]"> ，xml, html, script, json, text, _default</param>
this.ajax({
type: "POST",
url: url,
success: callback,
data: data
});
var json = JSON.stringify(data);
$(function () {
$.ajax({
type: "POST",
data: json,
url: url,
success: callback
});
});
};
window.Ajax = Ajax;
} (window));