1. 程式人生 > >分頁。ajax

分頁。ajax

一個 ajax 設置 分頁 ESS allow quest 應該 彈出

暑假留校與同學一起做了一個貨運的系統都是學生一起進步。做一些 總結

1.操作DOM真的很繁瑣。。而且性能還不如用vue

2.真正實踐了一下ajax ,所以也碰到了跨域問題。

ajax跨域其實就是瀏覽器的同源策略。xhr對象只能訪問與包含它的頁面位於同一個域中的資源。(可以預防某些惡意行為,雖然對面開發來說很煩惱。。不過至少是好的 自我保護)

CORS(Cross-Origin-Resource Sharing) 跨源資源共享 資源共享嘛~所以服務器與瀏覽器應該要有溝通的載體 以達成共識 這個載體就是HTTP頭部請求

瀏覽器發送請求時應該設置一個頁面的源信息(協議,域名和端口) 。服務器根據Origin來決定是否給予響應

服務器 Access-Control-Allow-Origin 頭部設置 相投的源信息 或者通配符*代表全部都接收

webkit 內核的瀏覽器都通過XMLHttpRequest 對象實現了CORS的原生支持。要請求另一個域中的資源 ,使用標準的XHR對象open()方法裏傳入絕對路徑即可,不過不支持發送和接受cookie

所以要發送cookie的話 需要將lwithCredentials屬性設置為true, 然後服務器 Access-Control-Allow-Credentials:true

非簡單請求 瀏覽器會請求兩次服務器 第一次是預檢

自己測試的時候一直把返回信息彈出來看結果一直彈兩次,不知道原因以為是冒泡 就所有事件都阻止冒泡了一下 ,還特意寫了一個遮罩 結果還是不管用後面好像服務器設置了

技術分享圖片

了這個Access-Control-Max-Age 才好 委屈巴巴!我檢查了半天

因為不讓我用vue 所以原生寫了一個分頁(其實用vue的話更簡單,就當鞏固下dom操作好了)

設置兩個全局變量

技術分享圖片

一個存放從服務器的數據 ,一個表示動態生成的分頁數

技術分享圖片

這裏我設置一頁15行,然後就可以跟據count 來動態生成a了

技術分享圖片

這樣就完成了原生的分頁,想改一份的行數直接改 15的那個數字改成任意值就可以了

分頁。ajax