Clever Geek Handbook

OperaのクロスドメインAJAXリクエスト。

OperaのXmlHttpRequestは、javascriptが開いているドメインでのみ機能することが知られています。 以下に、この見落としを回避する方法を示します。



データを送信して結果を得る-写真



XmlHttpRequestの代わりに別のホストに情報を送信するには、別のドメインからサーバースクリプトを読み込む画像を作成する単純なDOMを使用します。 結果は画像になります。 以下は、サードパーティのサーバーにのみデータを送信するスクリプトの例です。 



  //テストする
関数postDataImage（addr）{
   //新しい画像を作成します 
   var img = document.createElement（ "img"）;
   img.src = addr;
   //結果をユーザーに表示したい場合、 
   //次に、この画像をドキュメントに接続します
   document.getElementById（ "result"）。appendChild（img）;
 }

 //この方法でajaxリクエストの「類似性」を実行します
 postDataImage（ "http://your.domain.com/serverside.image.php"）;


その結果、画像が得られました。たとえば、「クリック」された画像を置き換えることができます。 データを送信するだけの場合は、ドキュメントから画像を完全に省略できます。 しかし、他の結果はどうですか？



結果が数値の場合



前述のように、Operaの写真には問題がなく、どのドメインからでも要求されます。 私たちだけが十分な画像を持っていないので、番号（たとえば、ユーザーID）を教えてください。 数字が小さい場合は、おそらく解決できます。 たとえば、サーバーから受け取った写真のサイズを考えてみましょう。幅* 256 +高さにより、0〜65535または-32767〜32767の数字を表示できます。このサイズのJPEG画像は重くなりません。



次に例を示します。スクリプトはSuccess！に応答します。 サーバーから受信した画像の幅が290ピクセルの場合。 



  // 2つのテスト
関数postDataImageAndProcess（addr）{
   //メッセージLoa​​ding ...を表示します
   document.getElementById（ "result"）。innerHTML = "読み込み中...";
   //画像を作成します
   var img = document.createElement（ "img"）;
   img.src = addr;
   //画像の読み込み時にトリガーを設定します
   img.onload = function（）{
     //画像が読み込まれたら、その幅を確認します
     // 290ピクセルの場合、すべてが正しい
     var result =（this.width == 290）？ 
           「成功、画像幅290px！」  ： 
           「その他の結果！画像の幅は290ピクセルではありません」;
     document.getElementById（ "result"）。innerHTML = result;
   }  
 }

 //この方法でajaxリクエストの「類似性」を実行します
 postDataImageAndProcess（ "http://your.domain.com/serverside.image.php"）;


紳士、これは私の中で成熟した工学の進化を説明しています。 そして、私は最も興味深いことになりました。 結局のところ、サーバーに対して通常のリクエストを作成し、そこから通常の応答を取得する方法は次のとおりです。テキスト、データの配列、または他の何か。 私はあなたにこの質問をしたかったのですが、ところで、私は考え直して、自分で記事を完成させました（考えるのに役立つことが判明しました;）



最後に、完全なリクエスト/レスポンス



srcパラメーターを持つ他のタグを覚えていますか？ <スクリプト>！ そして、私たちは手順を混乱させ始めます： 



  //テスト3
関数postDataScript（addr）{
   //メッセージLoa​​ding ...を表示します
   document.getElementById（ "result"）。innerHTML = "読み込み中...";
   //オブジェクトを作成します
   var awesome = document.createElement（ "script"）;
   awesome.src = addr;
   document.getElementsByTagName（ "head"）[0] .appendChild（素晴らしい）;
 }

 //この方法でajaxリクエストの「類似性」を実行します
 postDataImageAndProcess（ "http://your.domain.com/serverside.javascript.php"）;


serverside.javascript.phpにはヘッダーが含まれます（「Content-type：text / javascript」）; そしてもちろん、結果がキャッシュされないようにすべての属性、およびjavascriptが本文に書き込まれます。 たとえば、ドキュメントの結果セルの内容を変更する行を追加します。 



  document.getElementById（ "result"）。innerHTML = "はい、機能します";


以上です。 どんなことがあっても、AJAXが最もわかりました。



すべてのアクションはOpera 9.61で実行され、調査対象はクロスドメインAJAXリクエストであり、Operaでは標準で禁止されていることを明確にします。 このトピックは使い果たされたものとはほど遠いもので、まだ考えるべきことがあります：

-クロスドメインリクエスト専用の、MSXMLHTTPなどの一連の関数を使用してライブラリを作成します。

-POSTメソッドを使用してリクエストを行うのと同じ方法でOperaを指導します（これは可能ですか？フォームを介して）

-提案...;）



実際の例はこちら： www.blackcrystal.net/labs/operacrossdomainrequest/test.html

テスト用のサーバースクリプトはこちら： www.blackcrystal.net/labs/operacrossdomainrequest

サンプル（htmlファイル）をダウンロードし、localhostで開いてテストできます。 サーバーへのリクエストは時計仕掛けのように機能します。 そしてOperaだけでなく;-)


More articles:


All Articles