Ajaxとドメインをまたぐ問題は深く分析します。
何がajaxですか
Ajax（Aynchronous JavaScript and XML）は、サーバに追加のデータを要求し、ページを更新する必要がない技術であり、ajaxの出現はより良いユーザー体験をもたらした。
Ajaxの核心はXMLHttpRequest（XHR）オブジェクトです。XHRはサーバに要求を送信し、解析サーバ応答を提供するために流暢なインターフェースを提供します。XHRオブジェクトを使って新しいデータを取得し、DOMを通して新しいデータをページに挿入します。名前にXMLが含まれますが、ajax通信とデータフォーマットは関係ありません。この技術は更新せずにサーバーからデータを取得することができますが、必ずしもXMLデータではなく、jsonでもいいです。
XMLHttpRequestオブジェクト
XHRの使い方
1.XMLtpRequestオブジェクトを作成します。
2.送信要求
1）設定要求行xhr.open()
2）POST要求は要求ヘッドxhr.set Request Header（）POST要求ヘッドConteet-Typeの値を設定する必要があります。
3）設定要求体xhr.send()get要求転送null、postは状況により
3.処理サーバの応答
まず、応答状態コードと非同期オブジェクトの解析が完了したかどうかを判断します。
サーバから返されたステータスコードstatus
1 xx:メッセージ
2 xx:成功
3 xx:リダイレクト
4 xx:要求エラー
5 xx:サーバエラー
非同期オブジェクトの状態コードreadystate
0:非同期オブジェクトを作成しました。
1:非同期オブジェクトの初期化が完了しました。要求を送信します。
2:受信サーバからの元のデータ
3：データは解析中で、解析に時間がかかります。
4：データ解析が完了しました。データは使用できます。
XML
XMLの特徴として、名門出身のW 3 Cが制定し、マイクロソフトとIBMが共同で推奨したデータフォーマットがあります。XMLは拡張可能なマーク言語を指し、データを転送したり、保存したりするように設計されています。HTMLはページを表すために設計されています。
文法ルール：HTMLとほぼ同じマークで表示されます。
特殊記号:<>エンティティを使用するには、文字を移動します。
xmlの解析にはバックグラウンドの協力が必要です。
1.バックグラウンドが戻る時、応答ヘッダにContent-Typeを設定する値は、aplication/xmlです。
2.フロントの非同期の対象はバックグラウンドデータを受信する時、xml方式で受信したことを覚えています。xhr.reponseXML、そしてそれが戻ってきたのはobjectの対象で、内容は潈documentです。
JSON
JSON（JavaScript Object Notation）は、草の根の出身であり、Javascriptのサブセットであり、データフォーマットを説明するのに特化しています。JSON自体は特殊なフォーマットの文字列であり、jsオブジェクトに変換することができます。
文法規則：データはkey/valueの値で表しています。データはカンマで区切られています。大かっこは対象を保存しています。中かっこは配列を保存しています。名前と値は二重引用符を使って含まれています。
jsで解析/操作JSON:
1.JSON.parse（json文字列）json形式の文字列をjsオブジェクトに解析します。
2.JSON.strigify（js対象）jsオブジェクトをjson形式の文字列に変換します。
自分で1つのajaxを包装します。
jQueryはもっと便利なajaxパッケージを提供してくれました。
$ajax({}は、ajax要求を開始するように構成されてもよい。
$get()はajax要求をget方式で開始する。
$post()ajaxリクエストをpostで開始する
$('form').serialize()プログレッシブフォーム(フォーマットkey=val$key=val)
パラメータの説明
url：ポートアドレス
type：要求方式（get/post）
timeout：要求はNumberタイプのパラメータで、要求タイムアウト時間（ミリ秒）を設定します。
dataType：クライアントがサーバに渡すべき値です。どのように処理するかをサーバに教えます。
data:送信要求データ
beforeSend：Functionタイプのパラメータが要求されています。送信要求の前に、XMLHttpRequestオブジェクトの関数を変更することができます。例えば、カスタムHTTPヘッダを追加します。beforeSendでfalseに戻ると今度のajax要求をキャンセルできます。
success:成功応答後に呼び出す
error:エラー応答時に呼び出します。
complettee:応答完了時に呼び出す(成功と失敗を含む)
XHRを通じてajax通信の主な制限（同じドメイン、同じポート、同じプロトコル）を実現し、セキュリティポリシーにまたがって、デフォルトではXHRは同じドメインのリソースしか要求できない。
CORSクロスドメイン
CORS(cross-origings resource sharring)はドメインを跨ぐ際に、ブラウザとサーバがどのようにコミュニケーションすべきかを定義しています。CORSはドメイン上のネットワークアプリケーションを別のドメインにドメインAJAX要求を提出することができます。この機能を実現するのは非常に簡単で、サーバーから応答ヘッダを送信すればいいです。
CORSはすべてのタイプのHTTP要求をサポートします。
サーバー側のCORSに対するサポートは、主にAccess-Coontrol-Allow-Originを設定することによって行われます。
JSONP
JSONPは、コールバック関数とデータから構成されています。JSONPはGET要求のみをサポートしています。JSONPの利点は、旧式のブラウザをサポートすることと、CORSをサポートしていないウェブサイトにデータを要求することができます。
JSONPはダイナミック要素によって使用され、Src属性はドメインをまたぐURLを知っています。JSONPは有効なJavaScriptコードです。ブラウザはドメインをまたいでJSファイルを要求することができます。
利点：簡単で使いやすく、応答テキストに直接アクセスでき、ブラウザとサーバ間の双方向通信をサポートします。
短所：1.JSONPは他のドメインからコードをロードして実行します。安全でないリスクがあります。
document.domainを修正することによって、サブドメインを横断します。
window.nameを使ってクロスドメインを行います。
HTML 5では、Windows.postMessageを新たに導入し、ドメインを越えてデータを転送します。
flash
iframe
サーバ設定プロキシページ
イメージPing
ラベルを使うことによって、ページを利用して、どのページからも画像原理をロードすることができます。
画像Pingは、ユーザーがページをクリックしたり、ダイナミック広告の露出回数を追跡するのによく使われます。
2つの欠点：1.GET要求のみサポートしています。2.サーバの応答テキストにアクセスできません。ブラウザとサーバ間の単一通信にのみ使用できます。
より高度なajax技術.ajaxは、ページがサーバにデータを要求する技術である。
SSE（Server-Sent Events）サーバからイベントを送信します。
Web Sockets
Web Socketsの目標は、個々の永続的リンク上で全二重、双方向通信を提供することである。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Ajax（Aynchronous JavaScript and XML）は、サーバに追加のデータを要求し、ページを更新する必要がない技術であり、ajaxの出現はより良いユーザー体験をもたらした。
Ajaxの核心はXMLHttpRequest（XHR）オブジェクトです。XHRはサーバに要求を送信し、解析サーバ応答を提供するために流暢なインターフェースを提供します。XHRオブジェクトを使って新しいデータを取得し、DOMを通して新しいデータをページに挿入します。名前にXMLが含まれますが、ajax通信とデータフォーマットは関係ありません。この技術は更新せずにサーバーからデータを取得することができますが、必ずしもXMLデータではなく、jsonでもいいです。
XMLHttpRequestオブジェクト
XHRの使い方
1.XMLtpRequestオブジェクトを作成します。
2.送信要求
1）設定要求行xhr.open()
2）POST要求は要求ヘッドxhr.set Request Header（）POST要求ヘッドConteet-Typeの値を設定する必要があります。
3）設定要求体xhr.send()get要求転送null、postは状況により
3.処理サーバの応答
まず、応答状態コードと非同期オブジェクトの解析が完了したかどうかを判断します。
サーバから返されたステータスコードstatus
1 xx:メッセージ
2 xx:成功
3 xx:リダイレクト
4 xx:要求エラー
5 xx:サーバエラー
非同期オブジェクトの状態コードreadystate
0:非同期オブジェクトを作成しました。
1:非同期オブジェクトの初期化が完了しました。要求を送信します。
2:受信サーバからの元のデータ
3：データは解析中で、解析に時間がかかります。
4：データ解析が完了しました。データは使用できます。
XML
XMLの特徴として、名門出身のW 3 Cが制定し、マイクロソフトとIBMが共同で推奨したデータフォーマットがあります。XMLは拡張可能なマーク言語を指し、データを転送したり、保存したりするように設計されています。HTMLはページを表すために設計されています。
文法ルール：HTMLとほぼ同じマークで表示されます。
特殊記号:<>エンティティを使用するには、文字を移動します。
xmlの解析にはバックグラウンドの協力が必要です。
1.バックグラウンドが戻る時、応答ヘッダにContent-Typeを設定する値は、aplication/xmlです。
2.フロントの非同期の対象はバックグラウンドデータを受信する時、xml方式で受信したことを覚えています。xhr.reponseXML、そしてそれが戻ってきたのはobjectの対象で、内容は潈documentです。
JSON
JSON（JavaScript Object Notation）は、草の根の出身であり、Javascriptのサブセットであり、データフォーマットを説明するのに特化しています。JSON自体は特殊なフォーマットの文字列であり、jsオブジェクトに変換することができます。
文法規則：データはkey/valueの値で表しています。データはカンマで区切られています。大かっこは対象を保存しています。中かっこは配列を保存しています。名前と値は二重引用符を使って含まれています。
jsで解析/操作JSON:
1.JSON.parse（json文字列）json形式の文字列をjsオブジェクトに解析します。
2.JSON.strigify（js対象）jsオブジェクトをjson形式の文字列に変換します。
自分で1つのajaxを包装します。
function pinjieData(obj) {
//obj {key:value,key:value}
// "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData key:value,key:value
//1. xhr
var xhr = new XMLHttpRequest();
//get ,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.
xhr.open(method,url);
// post ,
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.
xhr.send(finalData);
//4.
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse json
// [{ "src":"./images/nav0.png","content":" 1"}]
// js
result = JSON.parse(xhr.responseText);
}else{//
result = xhr.responseText;
}
//
success(result);
}
}
}
jQueryはもっと便利なajaxパッケージを提供してくれました。
$ajax({}は、ajax要求を開始するように構成されてもよい。
$get()はajax要求をget方式で開始する。
$post()ajaxリクエストをpostで開始する
$('form').serialize()プログレッシブフォーム(フォーマットkey=val$key=val)
パラメータの説明
url：ポートアドレス
type：要求方式（get/post）
timeout：要求はNumberタイプのパラメータで、要求タイムアウト時間（ミリ秒）を設定します。
dataType：クライアントがサーバに渡すべき値です。どのように処理するかをサーバに教えます。
data:送信要求データ
beforeSend：Functionタイプのパラメータが要求されています。送信要求の前に、XMLHttpRequestオブジェクトの関数を変更することができます。例えば、カスタムHTTPヘッダを追加します。beforeSendでfalseに戻ると今度のajax要求をキャンセルできます。
success:成功応答後に呼び出す
error:エラー応答時に呼び出します。
complettee:応答完了時に呼び出す(成功と失敗を含む)
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
// jQuery ajax , dataType jsonp ajax
dataType:'jsonp'
XHRを通じてajax通信の主な制限（同じドメイン、同じポート、同じプロトコル）を実現し、セキュリティポリシーにまたがって、デフォルトではXHRは同じドメインのリソースしか要求できない。
CORSクロスドメイン
CORS(cross-origings resource sharring)はドメインを跨ぐ際に、ブラウザとサーバがどのようにコミュニケーションすべきかを定義しています。CORSはドメイン上のネットワークアプリケーションを別のドメインにドメインAJAX要求を提出することができます。この機能を実現するのは非常に簡単で、サーバーから応答ヘッダを送信すればいいです。
CORSはすべてのタイプのHTTP要求をサポートします。
サーバー側のCORSに対するサポートは、主にAccess-Coontrol-Allow-Originを設定することによって行われます。
JSONP
JSONPは、コールバック関数とデータから構成されています。JSONPはGET要求のみをサポートしています。JSONPの利点は、旧式のブラウザをサポートすることと、CORSをサポートしていないウェブサイトにデータを要求することができます。
JSONPはダイナミック
利点：簡単で使いやすく、応答テキストに直接アクセスでき、ブラウザとサーバ間の双方向通信をサポートします。
短所：1.JSONPは他のドメインからコードをロードして実行します。安全でないリスクがあります。
document.domainを修正することによって、サブドメインを横断します。
window.nameを使ってクロスドメインを行います。
HTML 5では、Windows.postMessageを新たに導入し、ドメインを越えてデータを転送します。
flash
iframe
サーバ設定プロキシページ
イメージPing
ラベルを使うことによって、ページを利用して、どのページからも画像原理をロードすることができます。
画像Pingは、ユーザーがページをクリックしたり、ダイナミック広告の露出回数を追跡するのによく使われます。
2つの欠点：1.GET要求のみサポートしています。2.サーバの応答テキストにアクセスできません。ブラウザとサーバ間の単一通信にのみ使用できます。
var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";より高度なajax技術.ajaxは、ページがサーバにデータを要求する技術である。
SSE（Server-Sent Events）サーバからイベントを送信します。
Web Sockets
Web Socketsの目標は、個々の永続的リンク上で全二重、双方向通信を提供することである。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。