摘要:這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新創(chuàng)建對象實例的傳輸方式傳輸數(shù)據(jù)方式有兩種,一種,一種。
Ajax 介紹
在node.js中前后臺交互數(shù)據(jù)經(jīng)常會用到這個東西,Ajax不是新的編程語言,而是一種使用現(xiàn)有標準的新方法,他可以實現(xiàn)不刷新網(wǎng)頁部分更新數(shù)據(jù)。
Ajax數(shù)據(jù)格式
ajax封裝
使用封裝Ajax需要了解什么是XMLHttpRequest;
什么是XMLHttpRequestXMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新
創(chuàng)建XMLHttpRequest對象實例:
var XMLHttpRequest=new XMLHttpRequest();
Ajax的傳輸方式
傳輸數(shù)據(jù)方式有兩種,一種get,一種post。
get: 地址欄 - 數(shù)據(jù)都可視, 不安全, 方便 可傳輸數(shù)據(jù)大小32kb
post: 加密 - 數(shù)據(jù)不可視,安全, 不方便 可傳輸數(shù)據(jù)大小2gb
向后端發(fā)送數(shù)據(jù)利用XMLHttpRequest對象的open方法
open方法用于解析數(shù)據(jù)傳輸方式,數(shù)據(jù)內容,是否異步調用
get方法var XMLHttpRequest = new XMLHttpRequest(); XMLHttpRequest.open("GET","數(shù)據(jù)",true); XMLHttpRequest.send();
var XMLHttpRequest = new XMLHttpRequest(); XMLHttpRequest.open("POST","數(shù)據(jù)",true); XMLHttpReuqest.send();
異步 - True 或 False
同步:后臺進程一步一步完成
異步:后臺進程同時調用運行
XMLHttpRequest的open方法第三個參數(shù)‘true’ or ‘false’就是選擇是否異步,當然選擇true啦,高效。
XMLHttpRequest.onreadystatechange=function() { if(XMLHttpRequest.readyState == 4) { if(XMLHttpRequest.status >= 200 && XMLHttpRequest.status < 300 || XMLHttpReuqest.status == 304) { //console.log(XMLHttpRequest.responseText); json.success(XMLHttpReuqest.responseText); }else{ //console.log("服務器錯誤"); } } }
onreadystatechange方法:當狀態(tài)碼改變時觸發(fā),
readyState 當前狀態(tài)碼
ajax狀態(tài)碼 - ajax readyState: 0 - (未初始化)還沒有調用send()方法 1 - (載入)已調用send()方法,正在發(fā)送請求 2 - (載入完成)send()方法執(zhí)行完成,已經(jīng)接收到全部響應內容 3 - (交互)正在解析響應內容 4 - (完成)響應內容解析完成,可以在客戶端調用了
XMLHttpRequest.state
當前進程加載狀態(tài),例如404是無回應的,200是加載成功等
服務器響應
如果服務器有內容響應也就是后端有數(shù)據(jù)返回前端則有兩個XMLHttpRequest對象獲取responseText,responseXML。
responseText返回字符串形式的數(shù)據(jù)
responseXML返回XML形式的數(shù)據(jù)
html: js: var XMLHttpRequest = new XMLHttpRequest(); document.getElementById("div1").innerHTML=XMLHttpRequest.responseText;
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://www.ezyhdfw.cn/yun/104599.html
摘要:是基于規(guī)范實現(xiàn)的,每一個文件都是一個模塊,每個模塊代碼都要遵守規(guī)范,多個文件之間的調用的核心也是基于模塊的對外暴露接口和互相引用。所以學習是很必要的。下一篇初學二用斷點調試我們的代碼 本文章是一邊看著《狼書:更了不起的Node.js》一邊寫的,會有自己學習中遇到的問題,也會有書中的一些知識 Hello Node.js ! 最簡單的例子 創(chuàng)建 helloworld.js, 代碼如下。 ...
摘要:前言關于此教程作為一名業(yè)余開發(fā)者,因為公司都是做和的。。。建議采用的方式下載,可參考官方教程。但是服務的進程管理,即便對于初學者來說,也是必不可少的一課。 前言 關于此教程 作為一名業(yè)余Nodejs開發(fā)者,因為公司都是做Java和C++的。。。我是在沒有任何人可請教的情況下,一個坑一個坑堅(ku)實(bi)地踩過來的。作為對segmentdefault社區(qū)的回報,把自己微不足道的經(jīng)驗分...
摘要:中的模塊在中有模塊的概念,類似于語言中的頭文件,都是函數(shù)庫。靈活運用模塊可以非常便捷的操作后端操作前端。最好在運行文件的同個文件夾下下載方便使用,也可以在上級文件夾下載全局調用。他可以為文檔增刪改查。 nodeJS中的模塊 在nodeJS中有模塊的概念,類似于C語言中的頭文件,都是函數(shù)庫。靈活運用模塊可以非常便捷的操作后端操作前端。而在nodeJS中引入模塊要使用require();這...
摘要:關于封裝好的前端往后端傳遞數(shù)據(jù)需要用到來傳遞。跨域跨域大致可以理解為在這個頁面訪問另一個文件。表示允許的域,表示所有,也就是說給予最高訪問權限差不多意思。 關于Ajax 封裝好的Ajax 前端往后端傳遞數(shù)據(jù)需要用到Ajax來傳遞。 首先需要在網(wǎng)頁鏈入這個已經(jīng)封裝好的Ajax,因為如果直接在html頁面寫這個的話不好看 之后就可以利用Ajax來傳遞了 // 前端頁面 文件名:...
閱讀 3289·2021-10-12 10:20
閱讀 2988·2021-09-27 13:56
閱讀 921·2021-09-27 13:36
閱讀 1545·2021-09-26 09:46
閱讀 2560·2019-08-30 14:02
閱讀 2769·2019-08-28 18:14
閱讀 1353·2019-08-26 10:32
閱讀 1800·2019-08-23 18:25