ajax跨域——Jsonp

今天在進行學習的當中,想利用jquery當中的$.ajax通路其他伺服器來擷取資料.這時在Console中提示

XMLHttpRequest cannot load http://0.0.0.0:3001/xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:3000' is therefore not allowed access. 
           

從這裡我們可以知道是 我想用3000這個端口去通路3001 但是被拒絕了..

原本是采用的 通過ajax通路本地伺服器,在通過伺服器端的請求實作跨域請求的.. 

但是後來發現,使用jsonp可以直接實作ajax跨域的get方法

以下以ruby在rails上為例:

3000端口主要代碼:(浏覽器)

:javascript
    $(document).ready(function(){
      user_login();
    })


    function user_login(){
       $.ajax({
           type:'get',
           url:'http://0.0.0.0:3001/show_user/',
           dataType:"jsonp",
           success:success_result,
           error:error_result
     })
    }
    function success_result(username)
    {
      alert(username)
    }
    function error_result(error)
    {
      alert(error)
    }
           

3001端口主要代碼(伺服器)

def show_user
    callback=params[:callback]
    render :text =>callback+"('XiaoMing')"
end
           

這裡的params[:callback]是jquery中預設命名的回調函數名,實際url為url?callback=success_result

其實就是success後所對應的方法..

最終結果為  在3000端口彈出'XiaoMing'提示框

因為是jquery中的技術..是以也可以自行轉化為其他語言實驗..