Ajax 詳解及CORS

來源:互聯網
上載者:User

標籤:body   指令碼   mis   gem   pac   let   ref   images   click   

Ajax 是什嗎?

Ajax 即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML)是指一種建立互動式網頁應用的網頁開發技術。
它由以下幾種技術組合而成,包括:

  • HTML/XHTML——主要的內容表示語言。
  • CSS——為XHTML提供文字格式設定定義。
  • DOM——對已載入的頁面進行動態更新。
  • XML——資料交換格式。
  • XSLT——將XML轉換為XHTML(用CSS修飾樣式)。
  • XMLHttp——用XMLHttpRequest來和伺服器進行非同步通訊,是主要的通訊代理。
  • JavaScript——用來編寫Ajax引擎的指令碼語言。

在Ajax解決方案中,HTML/XHTML、DOM以及JavaScript是必須的。大概分為三個過程:

  • 使用XMLHttpRequest發請求
  • 伺服器返回XML格式字串
  • JS解析XML並更新局部變數
XMLHttpRequest對象

當需要非同步與伺服器交換資料時,需要XMLHttpRequest對象來非同步交換。XMLHttpRequest對象的主要屬性有:

  • onreadystatechange——每次狀態改變所觸發事件的事件處理常式。
  • responseText——從伺服器處理序返回資料的字串形式。
  • responseXML——從伺服器處理序返回的DOM相容的文檔資料對象。
  • status——從伺服器返回的數字代碼,狀態代碼如404(未找到)和200(已就緒)。
  • status Text——伴隨狀態代碼的字串資訊。
  • readyState——對象狀態值。對象狀態值有以下幾個:
    0 - (未初始化)還沒有調用send()方法
    1 - (載入)已調用send()方法,正在發送請求
    2 - (載入完成)send()方法執行完成
    3 - (互動)正在解析響應內容
    4 - (完成)響應內容解析完成,可以在用戶端調用了
    對於readyState的狀態值,其中“0”狀態是預設狀態值,而對於成功訪問的狀態(得到資訊)我們大多數採用“4”進行判斷
Ajax的核心就是是JavaScript對象XmlHttpRequest,這個對象為向伺服器發送請求和解析伺服器響應提供了流暢的介面。XmlHttpRequest可以使用JavaScript向伺服器提出請求並處理響應,而不阻塞使用者。XMLHttpRequest對象用法

XMLHttpRequest對象有兩個重要方法 open與send

 let request = new XMLHttpRequest()  request.open(‘GET‘,‘/xxx‘) // 配置request  request.send()

 

 

 

open方法:

URL是相對於當前頁面的路徑,也可以似乎用絕對路徑。open方法不會向伺服器發送真正請求,它相當於初始化請求並準備發送。只能向同一個域中使用相同協議和連接埠的URL發送請求,否則會因為安全原因報錯。

在發送同步請求的時候沒問題,只有得到響應後才會執行檢查status語句,但是在非同步請求時,JavaScript會繼續執行,不等產生響應就檢查狀態代碼,這樣我們不能保證檢查狀態代碼語句是在得到響應後執行,這時候我們可以檢查request對象的readyState屬性,該屬性工作表示請求/響應過程中的當前活動階段,每當readyState值改變的時候都會觸發一次onreadystatechange事件。

  request.onreadystatechange = function(){    if(request.readyState===4){      if(request.status>=200 && request.status<300){        let string = request.responseText        // 把符合 JSON 文法的字串轉換成 JS 對應的值        let object = window.JSON.parse(string)      }else if(request.status >= 400){        console.log(‘說明請求失敗‘)       }    }          }

 

CORS(跨源資源共用)

CORS(Cross-Origin Resource Sharing)允許瀏覽器向跨源(協議 + 網域名稱 + 連接埠)伺服器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
同源策略 : 只有協議+連接埠+網域名稱 一模一樣的才允許發AJAX請求。AJAX可以讀取響應內容。
突破同源策略 === 跨域
CORS將導致跨域訪問的請求分為三種:Simple Request(請求沒有包含任何自訂要求標頭),Preflighted Request(請求包含了任何自訂要求標頭)以及Requests with Credential(跨域請求包含了當前頁面的使用者憑證)。

//回應標頭用來記錄可以訪問該資源的域 ,它的值要麼是請求時Origin欄位的具體值,要麼是一個*,表示接受任意網域名稱的請求。 (‘Access-Control-Allow-Origin‘:,‘*‘)

原生 JS 寫出AJAX 請求
  let request = new XMLHttpRequest()  request.open(‘get‘,‘/xxx‘)  request.send()  request.onreadystatechange = function(){    if(request.readyState===4){      if(request.status>=200 && request.status<300){        let string = request.responseText           let object = window.JSON.parse(string)      }else if(request.status >= 400){        console.log(‘說明請求失敗‘)       }    }          }

 

jQuery.ajax封裝代碼連結
window.jQuery = function(nodeOrSelector){    let nodes = {}    nodes.addClass = function(){}    nodes.html = function(){}    return nodes  }window.$ = window.jQuerywindow.jQuery.ajax = function({url,method,body,headers}){    return new Promise(function(resolve,reject){        let request = new XMLHttpRequest()        request.open(method,url)        for(let key in headers){            let value = headers[key]            requeq.setRequestHeader(key,value)        }        request.onreadystatechange = ()=>{            if(request.readyState===4){                if(request.status >=200 && request.status <300){                    resolve.call(undefined,request.responseText)                }else if(request.status >= 400){                    reject.call(undefined,request)                }            }        }        request.send(body)            })}myButton.addEventListener(‘click‘,(e)=>{    window.jQuery.ajax({        url: ‘/xxx‘,        method: ‘get‘,        headers:{            ‘content-type‘:‘application/x-www-form-urlencoded‘,            ‘frank‘: ‘18‘        },    }).then(        (text)=>{console.log(text)},        (request)=>{console.log(request)},    )    })

 

Ajax 詳解及CORS

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.