小菜鳥變大笨鳥-封裝ajax請求，後臺使用node(練習node對get和post請求的處理)

XMLHttpRequest

用於前臺和服務器之間交換數據
具體的屬性和方法：
https://developer.mozilla.org...

在本例中使用到的屬性和方法
open(type,url,isAsync)
send(body),在post請求時在send方法中發送數據
onreadystatechange
responseText
更多的方法和屬性看：https://developer.mozilla.org...

封裝ajax代碼

// 封裝ajax方法，
    // 思路:利用XMLHttpRequest以及改對象的方法send和open
    // get和post在寫法上的區別：
    // get的數據直接在open方法裏面的url參數上傳到後臺
    // post的數據須要在send方法裏面傳送到後臺
    function ajax(json) {
      var ajax;

      // 建立一個XMLHTTP對象
      if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
      }
      else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");  //微軟
      }

      // get請求方式
      if (json.type == "get") {
        ajax.open('get', json.url + '?' + getParams(json.data), true);
        ajax.send();
      }
      // post請求方式
      else {
        ajax.open('post', json.url, true);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.send(getParams(json.data));
      }

      //onreadystatechange
      // 當readyState 改變時，會觸發onreadystatechange()
      //  readyState裏面存有XMLHttpRequest 的狀態信息
      // readyState:
      // 0:請求未初始化
      // 1:與服務器鏈接已創建
      // 2:服務器接受到請求
      // 3:服務器正響應請求
      // 4:請求已完成,且響應就緒
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) { //結束響應,前臺接接收到數據 
          if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
            json.success(ajax.responseText);
          }
          else {
            json.error && json.error();
          }
        }
      }

    }

    // 處理參數格式
    function getParams(paramsObj) {
      let paramsArr = [];
      for (let key in paramsObj) {
        paramsArr.push(key + "=" + paramsObj[key]);
      }
      return paramsArr.join("&");
    }

node後臺

// 封裝ajax請求方法
var http = require("http");
var UrlLid = require("url"); //處理get請求的url參數
var queryString = require("querystring"); //處理post請求參數

//get請求
http
  .createServer(function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    let userMessage = UrlLid.parse(req.url, true);
    if (userMessage.username == "wanglf" && userMessage.password == "123") {
      res.write("ok");
    } else {
      res.write("no ok");
    }
    res.end();
  })
  .listen(7890);

//post請求
http
  .createServer(function (req, res) {
    res.setHeader("Access-Control-Allow-Origin", "*"); //容許跨域
    let str = "";

    req.on("data", function (data) {
      str += data;
    });

    req.on("end", function () {
      var json = queryString.parse(str);
      if (json.username == "wanglf" && json.password == "123") {
        res.write("ok");
      } else {
        res.write("no ok");
      }
      res.end();
    });
  })
  .listen(7891);