Ajax、Jsonp和 跨域

xml: Extensible Markup Language, 即 可擴(kuò)展標(biāo)記語言
json: JavaScript Object Notation,即 JavaScript對(duì)象簡譜
ajax: Asynchronous JavaScript and XML,即 異步的JavaScript和XML, 一種前后端異步通訊技術(shù)。
jsonp: JSON with Padding, 是數(shù)據(jù)格式JSON的一種“使用模式”,利用瀏覽器對(duì)<script>標(biāo)簽沒有跨域限制的“漏洞”,來達(dá)到與第三方通訊的目的。

ajax出現(xiàn)請(qǐng)求跨域錯(cuò)誤問題,主要原因就是因?yàn)闉g覽器的“同源策略(協(xié)議相同 域名相同 端口相同)”。
CORS是一個(gè)W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請(qǐng)求,從而克服了AJAX只能同源使用的限制,需要后端允許請(qǐng)求。

Ajax幾種常用的api

JavaScript原生的數(shù)據(jù)通信 XHR(XMLHttpRequest):

let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
//get
xhr.open("get", "index.php?id=1", true);
xhr.send();
//post
xhr.open("post", "index.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('id=1');

ES6對(duì)XHR封裝的原生API,F(xiàn)etch:

fetch(`url`, { method: "post/get(默認(rèn)get)", mode: "cors", body: "json對(duì)象或者formData對(duì)象"})
.then(res => res.json()).then(req => { todo })
.catch(err => console.log(err));

Vue的axios :

axios({
    url: '/user/12345',
    method: 'post/get(默認(rèn)get)',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    },
    ...
}).then(res => console.log(res))
.catch(err => console.log(err) );

Jquery的$.ajax:

$.ajax({
    url: "test.html",
    method: "post/get(默認(rèn)get)",
    data:{
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    success(res){},
    error(err){}
    ...
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • ??2005 年,Jesse James Garrett 發(fā)表了一篇在線文章,題為“Ajax: A new App...
    霜天曉閱讀 902評(píng)論 0 1
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,274評(píng)論 0 7
  • ajax作為前端開發(fā)必需的基礎(chǔ)能力之一,你可能會(huì)使用它,但并不一定懂得其原理,以及更深入的服務(wù)器通信相關(guān)的知識(shí)。在...
    蕭玄辭閱讀 844評(píng)論 0 0
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest,但細(xì)究起來它們兩個(gè)是...
    changxiaonan閱讀 2,267評(píng)論 0 2
  • Jsonp 和 Ajax 有個(gè)毛關(guān)系啊!!! 這一點(diǎn)非常重要啊 大概是jQuery把Jsonp放到了ajax AP...
    squall1744閱讀 621評(píng)論 2 3