AJAX請求進行客戶端渲染
阿新 • • 發佈：2018-11-08
// 什麼是ajax? 非同步的JavaScript和xml，英文全稱async javascript and xml
// AJAX的好處？並不能提高程式執行的效能，但是可以防止頁面阻塞，實現無重新整理效果，增強了使用者體驗
// ajax中有很多，原生js中有一個xmlhttprequest物件是專門負責非同步請求。
// 還是jQuary中的$.ajxa(),$,get(),$.getJSON,$.post()等還有ES6中的豐田車，axios.js指令碼庫中也有ajax請求方法
百度詞條
Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和XML），是指一種建立互動式網頁應用的網頁開發技術。
Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。
Ajax 是一種用於建立快速動態網頁的技術。
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
簡單說：無需重新整理就可以更新頁面資料
例項：
ajax請求進行客戶端渲染
ajax請求資料再渲染到檢視上
router/index.js
// 在Node中每一個js檔案的作用域都是獨立的，當前js檔案中的變數，方法只在當前js檔案中有效，這一點一定和瀏覽器區分。即使外層的index.js已經引入了express模組，在當前router/index.js中也不能使用，要想在當前router/index.js中使用express模組，必須重新引入。 // 在瀏覽器端，如果一個HTML文件同時引用兩個js檔案，這兩個js檔案中的全域性檔案是共享的 var express = require("express"); // 先建立一個路由例項 var route = express.Router(); // 通過路由例項來建立一條“路”，建立一個API介面（application program interface應用程式介面） /* alt shift a切換塊註釋 */ /* "路"有以下常用的： get()客戶端向伺服器端獲取資訊（搜尋，在瀏覽器位址列中輸入url地址並回車，發起的也是get請求） post()客戶端向伺服器端提交資訊（註冊使用者新增購物車） put()客戶端修改伺服器端資訊 delete() 客戶端要刪除伺服器的資訊 如果一個專案的介面滿足這四種請求方式，我們稱它是RESTFUL風格的介面 */ // 第一個引數的路由器的路徑（名字），第二個引數是路由的業務邏輯（回撥函式） // req=request負責請求，站在客戶端的角度 // res=response負責響應，站在伺服器端的角度 // next轉到下一個網線 route.get("/order",function(req,res,next){ //res.send("我是訂單列表頁面"); // 此方法有硬程式碼，寫死了 // res.sendFile("C:/Users/ASUS/Desktop/yft/上課程式碼/2018.8.13使用express手動建立專案/public/order.html"); // 此種方法還不是最好的 res.sendFile(__dirname.replace('router','')+"./public/order.html"); // __dirname="C:/Users/ASUS/Desktop/yft/上課程式碼/2018.8.13使用express手動建立專案/router" // 後面介紹的render // res.render(); }); route.get("/order/detail",function(req,res,next){ res.send("我是訂單詳情頁面"); }); route.get("/api/getData",function(req,res,next){ res.json({ code:200, message:"成功", content:"我是更改後的內容。" }) }); // 把路由匯出 module.exports = route; /* 路徑： 相對路徑：如果一個路徑是/開頭的，表示當前執行檔案所在的碟符的根目錄 如果一個路徑是以./開頭的或者直接以檔案（夾）名字開頭，表示當前執行的js檔案所在的目錄 如果一個路徑以../開頭，表示當前路徑的上層目錄 */ // 訪問http://localhost:3000/order/detail
order.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="script/jquery.js"></script> </head> <body> <h1>我是訂單列表頁面2</h1> <button id="btnChange">更改標題</button> <script> // $(document).ready(function(){}) $(function(){ $("#btnChange").click(function(){ // 1.從介面中獲取資料 /* res.json({ code:200, message:"成功", content:"我是更改後的內容。" }) */ // alert("fdv"); // ------------------------------方法1------------------------- $.get("/api/getData",function(data,textStatus,xhr){ // router的index.js寫route.get。。 console.log(data); console.log(textStatus); console.log(xhr); // 更改元素內容 $("h1").text(data.content); }) // 不會阻塞下方程式碼的執行 console.log("這行程式碼什麼時候執行");//先執行 // 建立xhr物件（非同步請求物件） //-------- -------------------方法2------------------------------- /* var xhr = new XMLHttpRequest(); // 使用非同步物件開啟遠端連線 // 第一個引數是請求方式：GET，POST，PUT，DELETE // 第二個引數是請求的介面地址："/api/getData" xhr.open("GET","/api/getData"); //客戶端開始傳送請求，如果要攜帶資料 ，請在send方法中傳值 xhr.send(); // 客戶端需要接收伺服器端的響應 // 發起監聽 xhr.onreadystatechange = function(){ // 當狀態為200時，表示成功，xhr.readyState表示資料已經準備好 if(xhr.status === 200 && xhr.readyState === 4) // console.log(xhr); console.log(xhr.responseText); // JSON.parse()把一個字串解析成js物件，方便打點呼叫 var data = JSON.parse(xhr.responseText); $('h1').text(data.content); } */ //-------- -------------------方法3------------------------------- // 使用$.ajax()是對xmlhttprequest物件的封裝 // $.get()是對$.ajax()的進一步封裝 /* $.ajax({ method:"GET", url:"/api/getData", // 請求成功時回撥的函式 success:function(data){ console.log(data); $('h1').text(data.content); }, // 失敗時執行的回撥函式 error:function(err){ console.log(err); } }) */ //-------- -------------------方法4------------------------------ // $.getJSON()是專門用來請求JSON格式的資料 /* $.getJSON("/api/getData",function(data){ $('h1').text(data.content); }) */ }) }) </script> </body> </html>