摘要:用規(guī)范重新封裝該函數(shù)什么是同源策略協(xié)議域名端口一摸一樣跨域就是告訴后端哪個域名可以訪問,后端中寫入你請求的網(wǎng)站所在一般現(xiàn)在跨域用跨域比較多
ajax的含義
ajax是異步JavaScript和xml(asynchronous JavaScript and xml):
利用XMLHttpRequest發(fā)請求
服務(wù)器返回XML格式的字符串,但后面一般使用JSON
JS解析XML,并更新局部頁面
代碼:
let httpRequest = new XMLHttpRequest() //聲明一個xmlhttprequest對象 httpRequest.open("GET", "/xxx") // 配置request httpRequest.setRequestHeader("Content-Type", "x-www-form-urlencoded") // 設(shè)置請求頭第二部分 httpRequest.onreadystatechange = ( => { //隨便放在哪個位置,監(jiān)聽狀態(tài)的變化 if(httpRequest.readyState === 4) { console.log("請求響應(yīng)完畢") console.log(httpRequest.status) console.log(httpRequest.statusText) if(httpRequest.status >= 200 && httpRequest.status < 300>) { console.log("請求成功") console.log(httpRequest.getAllResponseHeaders()) console.log(httpRequest.responseText) let string = httpRequest.responseText //取得響應(yīng)體 let object = window.JSON.parse(string) //把符合JSON語法的字符串轉(zhuǎn)換為JS對象 //JSON.parse是瀏覽器提供的 } else if(httpRequest.status >= 400) { console.log("說明請求失敗") } } }) httpRequest.send("設(shè)置request第四部分") //GET請求不會設(shè)置第四部分用AJAX設(shè)置請求頭
第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")
第一部分HOST: jack.com:8002 : httpRequest.open("get", "http://jack.com:8002/")
第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")
第四部分a = 1&b = 2 : httpRequest.send("a = 1&b = 2")
用AJAX獲取響應(yīng)頭第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText
第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")
所有的第二部分 : httpRequest.getAllResponseHeaders()
第四部分 : httpRequest.responseText
現(xiàn)在一般不使用XML,而使用JSON,JSON是道格拉斯寫的一本輕量型的文本語言
自己封裝jQuery的ajax函數(shù)//傳入一個對象,該對象具有url,method等方法和回調(diào)函數(shù)。 window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) { let request = new XMLHttpRequest() request.open(method, url) for(let key in headers) { let value = headers[key] request.setRequestHeader(key, value) } request.onreadystatechange = () => { if(request.readystate === 4) { if(request.status >= 200 && request.status < 300) { successFn.call(undefined, request.responseText) } else if(request.status >= 400) { failFn.call(undefined, request) } } } request.send(body) }用promise規(guī)范重新封裝該函數(shù):
window.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] request.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) }) } window.jQuery.ajax({ url: "/baidu.com", method: "GET", headers: { "Content-Type" : "application/x-www-form-urlencoded" } }).then( (responseText) => { console.log(responseText) }, (request) => { console.log(request) } )什么是同源策略?
協(xié)議+域名+端口一摸一樣
cors跨域 (Cross-Origin Resource Sharing)就是告訴后端哪個域名可以訪問,后端node中寫入
response.setHeader("Access-Control-Allow-Origin", "你請求的網(wǎng)站所在")
一般現(xiàn)在跨域用cors跨域比較多
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92747.html
摘要:起初,協(xié)議中沒有上傳文件方面的功能,直到為協(xié)議添加了這個功能。而我們在中設(shè)置為是為了避免對其操作,從而失去分界符,而使服務(wù)器不能正常解析文件。 在剛接觸 JQuery 中的 ajax 時,對其 contentType 并沒有很在意,只是知曉它是代表發(fā)送信息至服務(wù)器時內(nèi)容編碼類型,通俗點說就是告訴服務(wù)器從瀏覽器提交過來的數(shù)據(jù)格式。 默認值為contentType = applicatio...
摘要:以多線程的形式,允許單個任務(wù)分成不同的部分進行運行。提供協(xié)調(diào)機制,一方面防止進程之間和線程之間產(chǎn)生沖突,另一方面允許進程之間和線程之間共享資源。主線程會不斷的重復(fù)上訴過程。 眾所周知,js是單線程的,說到線程,我們首先來仔細辨析一下線程和進程的知識。 一、進程與線程 阮一峰老師的一篇文章寫的很好 cpu會給當(dāng)前進程分配資源,進程是資源分配的最小單位,進程的資源會分配給線程使用,線程是C...
摘要:前端模板的出現(xiàn)使得前后端分離成為可能??偨Y(jié)本文簡單介紹了模板引擎在前后端的使用,下文我們回到,重點分析下的使用方式以及源碼原理。樓主對于模板引擎的認識比較淺顯,有不正之處希望指出感謝 前言 這篇文章本來不打算寫的,實話說樓主對前端模板的認識還處在非常初級的階段,但是為了整個 源碼解讀系列 的完整性,在深入 Underscore _.template 方法源碼后,覺得還是有必要記下此文,...
摘要:我們可以進行適當(dāng)?shù)母倪M,把回調(diào)函數(shù)寫到外面即使是改寫成這樣,代碼還是不夠直觀,但是如果有了對象,代碼就可以寫得非常清晰,一目了然,請看這樣函數(shù)就不用寫在的回調(diào)中了目前的標準中還未支持對象,那么我們就自己動手,豐衣足食吧。 本文同步自我得博客:http://www.joeray61.com 很多做前端的朋友應(yīng)該都聽說過Promise(或者Deferred)對象,今天我就講一下我對Prom...
閱讀 2515·2021-09-09 09:33
閱讀 2876·2019-08-30 15:56
閱讀 3160·2019-08-30 14:21
閱讀 911·2019-08-30 13:01
閱讀 874·2019-08-26 18:27
閱讀 3594·2019-08-26 13:47
閱讀 3465·2019-08-26 10:26
閱讀 1597·2019-08-23 18:38