ドメイン間問題の解決方法(JSONP編)

ドメイン間問題の解決方法(一)

1.ドメイン間とは?

ドメイン間、すなわちドメイン名、ポート番号、プロトコルなどが異なると、アクセスにドメイン間の問題が発生します.

2.JSONドメイン間解決

eg 1:localhost:8081でlocalhost:8082/index/demoにアクセス

scriptラベルによるドメイン間問題の解決

script image iframeなどのラベルは、ドメイン間

を行うことができる.
​

    
    



     


//      :8081


	/* */
    /* ：ShowMessage( {"info":"requestSuccess"} )*/
    function ShowMessage(data) {
       console.log(data.info)
    }
	/* head script， */
    function demoFunc() {
        var ele=document.createElement("script");
        ele.type='text/javascript';
        ele.src="http://localhost:8082/index/demo?callback=ShowMessage";
        $('head').append(ele)
    }
	/* */
    function demoFunc(){
        $('head').append("<script src='http://localhost:8082/index/demo?callback=ShowMessage'>					<\/script>")  /*   ‘\’   */
    }

   

 
 //    ：8082
    
 @Controller
 @RequestMapping("/index")
public class IndexController {

    @RequestMapping("/demo")
    @ResponseBody
    public String demo(@RequestParam("callback") String callback){
        String jsonData="{\"info\":\"RequestSuccess\"}";
        String resInfo=callback+"("+jsonData+")";
        return resInfo;
    }
    // ： （   * json *  ）
}

クライアントajaxリクエストの使用

 function demoFunc() {
      $.ajax({
          url:'http://localhost:8082/index/demo',
          type:'get',
          dataType:'jsonp',  // 
          jsonp:'callback',  //   callback  ？callback=ShowMessage
          jsonpCallback:'ShowMessage',   // 
          success:function (data) {
              console.log("success")
          }
      })
}

注意:jsonpはpostメソッドをサポートしていないので、フォームなどの場合、jsonpを使用することはできません.すなわち、CORSの解決方法は後述します.