初學NodeJS（二）-- Ajax

關於Ajax

封裝好的Ajax

前端日後端傳遞數據須要用到Ajax來傳遞。

• 首先須要在網頁鏈入這個已經封裝好的Ajax<script src="..."></script>，由於若是直接在html頁面寫這個的話很差看

• 以後就能夠利用Ajax來傳遞了

  //    前端頁面
  
  文件名：<input type='text' id="fileName"/>
  文件內容：<textarea cols="30" rows="10" id="inner"></textarea>
  <input type='button' value='寫入文件' id='btn'/>
  
  <script>
  btn.onclick=function() {
    ajax({
      url:'localhost:1234',
      type:'get',
      data:{
          fileName:fileName.value,
          inner:inner.value
      },
      success:function(data){
          console.log('文件寫入完畢');
      }
  })  
  }  
  </script>

  • 首先要知道，封裝好的ajax須要做者傳遞個json格式的參數進去
  • 其次，必需要有的是後端接口的地址url，傳輸數據的方式type，前端傳給後端的數據內容都寫在data內，success方法會自動傳入個data參數，這個方法將處理成功接受到後端返回的數據

• 假設咱們後端想要寫個文本文件

  //後端頁面
  var http = require('http'),
  urlLib = require('url'),
  fs = require('fs');
  
  //利用http模塊建立本地服務固定格式
  http.createServer(function(req, res) {
      //跨域，‘*’號表示全部
      res.setHeader('Access-Control-Allow-Origin', '*');
      
      //利用url模塊解析網頁傳遞的地址數據
      var json = urlLib.parse(req.url, true).query;
  
      //利用fs模塊的writeFile方法寫入文件
      fs.writeFile(json.file, json.inner, function(err) {
         if(err)console.log(err);
         console.log('生成完畢');  
      });
  }).listen(1234);

  • http模塊的做用是讓後臺不用在html文件啓動，直接啓動本地服務器，在瀏覽器搜索欄輸入localhost:1234便可，1234是後端本身設置的監聽接口
  • url模塊的做用是若是用get方式傳輸數據的話，數據是能夠在地址欄看到的，因此直接解析地址就能夠獲得前端傳輸的數據了
  • 利用http模塊建立本地服務就能夠不用在打開html文件，設置好的話後端會直接訪問，用戶訪問網頁只須要在瀏覽器輸入localhost:+監聽接口號。
  • 跨域：跨域大體能夠理解爲在這個頁面訪問另外一個文件。Access-Control-Allow-Origin表示容許的域，*表示全部，也就是說給予最高訪問權限差很少意思。

• 代碼寫好還不止，由於咱們的NodeJS是後端語言，是網頁腳本，因此須要‘‘啓動’’。

  • 編寫好代碼以後須要進入腳本文件的文件夾內啓動控制檯cmd，輸入node xxx.js這個xxx是你的腳本js文件的名字
  • 注意檢查模塊是否 已經下載好，是否進入正確的文件夾內。