小菜鸟变大笨鸟-封装ajax请求,后台使用node(练习node对get和post请求的处理)

XMLHttpRequest

用于前台和服务器之间交换数据
具体的属性和方法:
https://developer.mozilla.org...node

在本例中使用到的属性和方法
open(type,url,isAsync)
send(body),在post请求时在send方法中发送数据
onreadystatechange
responseText
更多的方法和属性看:https://developer.mozilla.org...ajax

封装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);
相关文章
相关标签/搜索