① Ajax、Fetch、Axios 篇
Ajax是async javaScript and xml的縮寫,是一種可以擴展的文本標記語言,常用於從服務端返回數據結構,現在基本都是使用 json 格式返回數據。在不刷新全局的條件下,局部刷新頁面是Ajax的主要作用。
創建Ajax實例的方法為let xhr = new XMLHttpRequest(),注意:IE6不兼容這種寫法。打開請求時,配置請求前的配置項共有5個參數,包括:xhr.open([http method], [url], [async], [userName], [userPass])。常用的http方法有post,get,delete,put,head,options,trace,connect等。url表示想伺服器請求的api,async代表非同步,默認為true,userName和userPass分別代表用戶名和密碼。
Ajax狀態一共有5種,分別是:0(unsent,剛創建的XMLHttpRequest實例,還沒有發送)、1(載入,已調用send()方法,正在發送請求)、2(載入完成,send()方法執行完成,已經接收到全部響應內容)、3(loading,正在解析響應內容)、4(done,表示響應的主體內容解析完成,可以在客戶端調用)。
HTTP常見狀態碼包括:1xx(信息,伺服器收到請求,需要請求者繼續執行操作);2xx(表示請求已經被伺服器接收,理解,請接受),常見的有200表示ok,204No Content表示無內容;3xx(重定向,需要進一步的操作以完成請求);4xx(客戶端錯誤,請求包含語法錯誤或無法完成請求,無法被伺服器端理解),包括400(請求的參數錯誤)、401(無許可權訪問)、404(請求的資源不存在)、413(和伺服器的交互過大);5xx(伺服器端出錯,伺服器在處理請求的過程中發生了錯誤),包括500(表示伺服器端出現未知的錯誤)、503(伺服器超負荷)。
Ajax中常用的屬性和方法有:onabort(請求中斷後要處理的事,和xhr.abort()一起使用)、ontimeout(請求的超時,執行的方法,和timeout設定的事件一起使用)、response(響應的主體內容)、responseText(響應的具體內容是字元串,一般是json字元串)、responseXML(響應的具體內容是文檔)、status(http的狀態碼)、statusText(狀態碼描述)、withCredentials(表示是否允許跨域)、getAllResponseHeaders(獲取所有響應頭信息)、xhr.open()(打開URL請求)、xhr.send()(表示發送ajax)、setRequestHeader()(設置請求頭,這個屬性在必須在xhr.open()後面)。
思考:post和get有什麼區別?在所有請求方法中都可以從服務端獲取數據和傳遞內容,GET和POST本質上就是TCP鏈接,並無差別,但是由於HTTP的規定和瀏覽器/伺服器的限制,具體由以下區別:1、從緩存的角度上說,get請求會被瀏覽器默認緩存下來,而post請求默認不會。2、從參數來說,get請求的參數一般放在url中,post請求是放在請求主體中,因此post請求更安全一些。從TCP來說,get產生一個TCP數據包;post產生兩個TCP數據包。
Axios是使用promise封裝的ajax,axios不是一個類而是一個方法。axios的createInstance底層根據默認設置新建一個Axios對象,axios中的所有請求[axios,axios.get,axios.post等...內部調用的都是Axios.prototype.request,將Axios.prototype.request的內部this綁定到新建的Axios對象上,從而形成一個axios實例。新建一個Axios對象時,會有兩個攔截器,request請求攔截器和response響應攔截器。
axios的特點包括:axios是一個基於promise的HTTP庫,支持promise的所有API,它可以攔截請求和響應,它可以轉換請求數據和響應數據,並對響應回來的內容自動轉換成JSON類型的數據,安全性更高,客戶端支持防禦XSRF。
Axios的常用方法有:axios.post(url[, data[, config]]):post請求用於信息的添加;axios.delete(url[, config]):刪除;axios.put(url[, data[, config]]):更新操作;axios.patch(url[, data[, config]])。
思考:axios.all()是怎麼實現並發請求的?axios.all()使用的是promise.all()實現的,來看看axios中的源碼。
axios的配置屬性包括:url:'/user',method:'get',baseURL:'some-domain.com/api/',這將設置一個Authorization頭,覆寫掉現有的任意使用headers設置的自定義Authorization頭;auth表示HTTP基礎驗證應當用於連接代理,並提供憑據;這將會設置一個Proxy-Authorization頭,覆寫掉已有的通過使用header設置的自定義Proxy-Authorization頭。
Axios可以說把請求這件事做到了極致,封裝的很好用,瀏覽器支持的方法,除了IE低版本以外,最新版的瀏覽器都是支持的。
Fetch是http的數據請求方式,是XMLHttpRequest的一種代替方案,沒有使用到XMLHttpRequest這個類。fetch()採用模塊化設計,API分散在Response對象、Request對象、Headers對象上。fetch()通過數據流(Stream對象)處理數據,對於請求大文件或者網速慢的場景相當有用。XMLHttpRequest沒有使用數據流,所有的請求都必須完成後才拿到。在默認情況下fetch不會接受或者發送cookies。
fetch(url,optionObj)基本使用中,fetch參數沒有同步的設定,因為fetch是基於promise封裝的本身就是非同步的。fetch雖然使用的是promise封裝,但是catch函數不能直接捕獲到錯誤,需要在第一個then函數內做些操作。fetch發送post請求時,當發生的是跨域請求,fetch會先發送一個OPTIONS請求,來確認伺服器是否允許接受請求,這個請求主要是用來詢問伺服器是否允許修改header等一些操作。伺服器同意後返回204,才會發送真正的請求。沒有發生跨域的情況下不會產生兩次請求。
fetch的三個模塊包括:Response對象、Request對象、Headers對象。
fetch發送post兩次請求的原因是在使用fetch發送post請求時如果是跨域,那麼導致fetch第一次發送了一個Options請求,詢問伺服器是否支持修改的請求頭,如果伺服器支持,則在第二次中發送真正的請求。
fetch的缺點包括:get/head請求不能設置body屬性;fetch請求後,伺服器返回的狀態碼無論是多少包括(4xx,5xx),fetch都認為是失敗的,也就是使用catch也不能直接捕捉到錯誤,需要再第一個then中做一些處理。
Ajax、Fetch、Axios綜合中,實現一個Ajax可以將原生的Ajax封裝成promise。Ajax、Axios、Fetch的區別包括:傳統的Ajax利用的是XMLHttpRequest這個對象,和後端進行交互。JQueryAjax是對原生XHR的封裝,多請求間有嵌套的話就會出現回調地獄的問題。axios使用promise封裝xhr,解決了回調地獄問題。fetch不是XMLHttpRequest,fetch是原生的js,使用的是promise。
fetch使用的是promise方便使用非同步,沒有回調地獄的問題。要實現一個Ajax請求,可以將原生的Ajax封裝成promise。實現兩個有順序的Ajax請求可以使用promise.then()。Ajax解決瀏覽器緩存問題可以通過設置請求頭,例如:anyAjaxObj.setRequestHeader("If-Modified-Since","0") 或 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
② 如何修改114la導航源碼
1、我們先要去下載一份114la導航源碼,我這里用得時utf8的版本,宣傳頁面做得很漂亮,但這個不是主要的。下載好後我們解壓源碼。
2、解壓後我們看到如何下目錄結構,我先說明下每個目錄的功能
admin 後台管理目錄,其實幾乎所有的功能都在這個文件夾下面,我們也基本只要修改這個文件夾就可以
core 這個目錄裡面放置的是系統使用的框架,這個系統採用的時YII
ajax 幾個ajax游戲的頁面
html 這個就是後台生成的頁面存放的地方,就兩類一個是首頁,一個是頻道頁面,這個都是可以在後台設置的非常簡單
3、下面我們來說下如果和修改首頁的內容,default目錄裡面就是用戶來生成頁面的代碼,我們一個一個來說
footer.php 用來生成頁面底部的代碼,注意有幾個頁面效果的js也是寫在這個文件裡面的
games_hot_ajax.php 這個文件對應頁面熱門游戲部分
games_min_ajax.php 小游戲部分
games_web_ajax.php 網頁游戲部分
gouwu_ajax.php 購物部分
header.php 生成頁面的頭部
index.php 頁面首頁,其他的文件都是在這個頁面中調用的,一會詳細說明下這個文件
inner.php 是頻道頁面
left.php 首頁嗎左邊的內容
main.php 首頁主分區的內容 其實就是右邊靠上那部分
tools.php 工具模塊部分
yule_ajax.php 娛樂部分
4、說了好文件的目錄和功能,下面我們詳細看下創建主頁的文件,看到文件中得
<?php $this->renderPartial('default/left', array('x' => $x)); ?>
這個部分就是在調用模板,而且採用的方式是直接在頁面上寫php的代碼的方式,大多數用戶應該都可以看的懂。
5、最後我們說說核心的一點代碼是如果調用每個模塊的,其實非常簡單,這套系統式直接把資料庫中得所有分類以及數據讀取到一個數組中去了,看看下圖,foreach中得$x這個數組,91 就是分類的編號,是不是感覺茅塞頓開,以後需要什麼分類直接去調用分類的id然後循環就可以了。
6、不過大家還要把代碼中得廣告給清理干凈。