JS的Ajax和同源策略

時間  2019-11-10
標籤 ajax 同源 策略 欄目 JavaScript 简体版
原文   原文鏈接

JS實現的ajax

AJAX核心（XMLHttpRequest）

其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。全部的異步交互都是使用XMLHttpServlet對象完成的。也就是說，咱們只須要學習一個Javascript的新對象便可。javascript

var xmlHttp = new XMLHttpRequest()；（大多數瀏覽器都支持DOM2規範）

注意，各個瀏覽器對XMLHttpRequest的支持也是不一樣的！爲了處理瀏覽器兼容問題，給出下面方法來建立XMLHttpRequest對象：html

function createXMLHttpRequest() {
        var xmlHttp;
        // 適用於大多數瀏覽器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 適用於IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 適用於IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

使用流程

 

步驟1:  打開與服務器的鏈接（open方法）

當獲得XMLHttpRequest對象後，就能夠調用該對象的open()方法打開與服務器的鏈接了。open()方法的參數以下：前端

open(method, url, async)：java

  • method：請求方式，一般爲GET或POST；
  • url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若爲GET請求，還能夠在URL後追加參數；
  • async：這個參數能夠不給，默認值爲true，表示異步請求； 
    var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true);　

步驟2:  發送請求

當使用open打開鏈接後，就能夠調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數爲POST請求參數，即對應HTTP協議的請求體內容，如果GET請求，須要在URL後鏈接參數。python

注意：若沒有參數，須要給出null爲參數！若不給出null爲參數，可能會致使FireFox瀏覽器不能正常發送請求！jquery

xmlHttp.send(null);

當請求發送出去後，服務器端就開始執行了，但服務器端的響應尚未接收到。接下來咱們來接收服務器的響應。ajax

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：django

  • 0：初始化未完成狀態，只是建立了XMLHttpRequest對象，還未調用open()方法；
  • 1：請求已開始，open()方法已調用，但還沒調用send()方法；
  • 2：請求發送完成狀態，send()方法已調用；
  • 3：開始讀取服務器響應；
  • 4：讀取服務器響應結束。 

onreadystatechange事件會在狀態爲1、2、3、4時引起。json

　　下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！跨域

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

　　但一般咱們只關心最後一種狀態，即讀取服務器響應結束時，客戶端纔會作出改變。咱們能夠經過XMLHttpRequest對象的readyState屬性來獲得XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其實咱們還要關心服務器響應的狀態碼是否爲200，其服務器響應爲404，或500，那麼就表示請求失敗了。咱們能夠經過XMLHttpRequest對象的status屬性獲得服務器的狀態碼。

最後，咱們還須要獲取到服務器響應的內容，能夠經過XMLHttpRequest對象的responseText獲得服務器響應內容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

if 發送POST請求

<1>須要設置請求頭：xmlHttp.setRequestHeader(「Content-Type」, 「application/x-www-form-urlencoded」)；注意 :form表單會默認這個鍵值對不設定，Web服務器會忽略請求體的內容。

<2>在發送時能夠指定請求體了：xmlHttp.send(「username=yuan&password=123」)

JS實現ajax小結

/*建立XMLHttpRequest對象；
    調用open()方法打開與服務器的鏈接；
    調用send()方法發送請求；
    爲XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在

    XMLHttpRequest的一、二、三、4，四種狀態時被調用；

    XMLHttpRequest對象的5種狀態，一般咱們只關心4狀態。

    XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState爲4時才能獲取到。

    XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在
    readyState爲4時才能獲取到*/

同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

同源策略，它是由Netscape提出的一個著名的安全策略。如今全部支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。
 
須要注意的是對於當前頁面來講,頁面內存放的JS文件的與並不重要,重要的是加載JS頁面所在的域是什麼.
a.com經過如下代碼: 
<script src="http//b.com/b.js"></script>

加載了b.com上的b.js,可是b.js是運行在a.com中的,所以對於當前打開的頁面來講,b.js的源就應該是a.com 而非 b.com.

 

在瀏覽器中<script>,<img>,<iframe>,<link>等標籤均可以跨域加載資源,而不受同源策略的限制.這些帶src屬性的標籤每次加載時,其實是由瀏覽器發起了一次GET請求,不一樣於XMLHttpRequest的是,經過src屬性加載的資源,瀏覽器限制JS的權限,使其不能讀寫返回的內容(也就是說對於JS的跨域請求返回的結果作了攔截)

Jsonp

jsonp是json用來跨域的一個東西。原理是經過script標籤的跨域特性來繞過同源策略。

<script>src標籤的功能--從src的url裏得到內容做爲JS代碼

<script src="http://code.jquery.com/jquery-latest.js"></script>

藉助script標籤，實現跨域請求，示例：

# =============================http://127.0.0.1:8001/index


<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:7766/SendAjax/"></script> #func('yuan')


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json
    return HttpResponse("func('yuan')")

這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：建立一個回調函數，而後在遠程服務上調用這個函數而且將JSON 數據形式做爲參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。

      通常狀況下，咱們但願這個script標籤可以動態的調用，而不是像上面由於固定在html裏面因此沒等頁面顯示就執行了，很不靈活。咱們能夠經過javascript動態的建立script標籤，這樣咱們就能夠靈活調用遠程服務了。

<button onclick="f()">sendAjax</button>

<script>
# 這個函數接受一個url,而且根據這個url建立一個script標籤
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }

　　# 這個是回調函數
    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

　　爲了更加靈活，如今將你本身在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調：

將8001的f()改寫爲：

function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

8002的views改成：

def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))
    callbacks=request.GET.get("callbacks")
 
    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

jQuery對JSONP的實現

getJSON

jQuery框架也固然支持JSONP，可使用$.getJSON(url,[data],[callback])方法

8001的html改成

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });
    }
    
</script>

結果是同樣的，要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。

      此外，若是說咱們想指定本身的回調函數名，或者說服務上規定了固定回調函數名該怎麼辦呢？咱們可使用$.ajax方法來實現

$.ajax

8001的html改成：

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks', # 這個是鍵
                jsonpCallback:"SayHi" # 回調函數名
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>

固然，最簡單的形式仍是經過回調函數來處理：

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必須有，告訴server，此次訪問要的是一個jsonp的結果。
               jsonp: 'callbacks',          //jQuery幫助隨機生成的：callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

　　

 jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值後就能夠在其中填充數據打包返回了; 

jsonpCallback參數能夠不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery能夠很方便的實現JSONP來進行跨域訪問。　　

注意 JSONP必定是GET請求

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程