大企業営業から未経験ITエンジニアを目指すブログ

アラサー大企業営業から未経験ITエンジニアを目指すブログ。日々学んだことを忘備録的に記します。

Ajaxのプロトコルではまった件

jQueryajax()のurlパラメータに自分のホストの傘下を指定した。

 現在ページのURLのプロトコルhttpsでもhttpでも、ajaxの送信プロトコルがhttpになってしまい、httpsからアクセスしたときにブラウザの下記エラーが出る。

Mixed Content: The page at 'https://XXX' was loaded over HTTPS,
but requested an insecure script 'http://XXX.
This request has been blocked; the content must be served over HTTPS.

  →ホスト傘下を指定した場合にちゃんとホストの通りのプロトコルを選んでほしい。

 →もしくはhttpを呼んでもエラーが出ないようにしてほしい。

 

ajaxでクロスドメインを許可する方法

https://tea-leaves.jp/home/ja/article/1375702709

①CORS(Cross-Origin Resource Sharing)を使うことで回避

サーバ側に、以下のような通信を許可するHTTPヘッダを返すようにします。

Access-control-allow-origin: http://〜(接続元ドメインまたは、全てのサイトから許可する場合はhttpすら書かずに「*」)

②IE8、IE9では効果なしなので、下記もやる

iframeを使ってhttpsのページを読み込みそこから通信、フレーム間はpostMessageを使ってやり取り。→面倒くさすぎる!!

 

 

javascriptで現在のページのURLを取得する方法一覧

http://www.htmq.com/js/location_host.shtml

 

ajax通信の返り値について

https://qiita.com/otsukayuhi/items/31ee9a761ce3b978c87a

第一引数dataはjqXHRオブジェクトのresponseJsonプロパティ値と同じものです。

第二引数textStatusは、通信の結果により、success, notmodified, nocontent, error, timeout, abort, parsererrorのどれかが返る。

第三引数jqXHRオブジェクトは、XMLHttpRequestオブジェクトのこと。つまり、クライアントとサーバー間とをやり取りするための情報?のこと。

 

ajax()メソッドのサンプル

$.ajax({

 url:"http://httpbin.org/post",// 通信先のURL

 /* 同一ホスト内のルートからのパスで指定するときは先頭を"/"にします。
  先頭が"/"でない場合は、現在のURLからの相対パスになります。

  https://qa.atmarkit.co.jp/q/4767

 */

 type:"POST", // 使用するHTTPメソッド

 data:$("#form1").serialize(), // 送信するデータ

 dataType:"json", // 応答のデータの種類  // (xml/html/script/json/jsonp/text)

 timespan:1000 // 通信のタイムアウトの設定(ミリ秒)

 }).done(function(data1,textStatus,jqXHR) {

 $("#span1").text(jqXHR.status); //例:200

 $("#span2").text(textStatus); //例:success

}).fail(function(jqXHR, textStatus, errorThrown ) {

 $("#span1").text(jqXHR.status); //例:404

 $("#span2").text(textStatus); //例:error

 $("#span3").text(errorThrown); //例:NOT FOUND
}).always(function(){

 $("#span6").text("complete");

});

 

〇ファイルパスについて(知らなかった「サイトルート相対パス」!!!)

 =相対URI(相対URL)

http://mypcmemo.com/file-path