Ajaxとドメインをまたぐ問題は深く分析します。

6717 ワード

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を包装します。


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 API jQuery 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:応答完了時に呼び出す(成功と失敗を含む)


 //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はダイナミック要素によって使用され、Src属性はドメインをまたぐURLを知っています。JSONPは有効なJavaScriptコードです。ブラウザはドメインをまたいでJSファイルを要求することができます。
利点：簡単で使いやすく、応答テキストに直接アクセスでき、ブラウザとサーバ間の双方向通信をサポートします。
短所：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 = "";

commet
より高度なajax技術.ajaxは、ページがサーバにデータを要求する技術である。
SSE（Server-Sent Events）サーバからイベントを送信します。
Web Sockets
Web Socketsの目標は、個々の永続的リンク上で全二重、双方向通信を提供することである。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

巧はajaxでサーバーにデータリストのロードを要求する時、loadingの方法を提示する。

正規表現に基づいてULの下でLIのスタイル置換機能を実現します。