搜索

有思俱乐部学习园地

Node.js ajax封装

ajax封装

打开vsCode编辑器
新建html文件, ajax.html 建立html结构,将下面代码写在body内
window.onload = function () {
    ajax("http://127.0.0.1:3000", ["Select * from test"], function (r) {
        console.log(r);
    });
}
ajax = function (url, arg, callback) {//url 请求url     参数     回调函数
    var arg = "mode=" + arg.join(); //把数组中的所有元素放入一个字符串
    var _xmr = new XMLHttpRequest(); //XMLHttpRequest 对象用于在后台与服务器交换数据。
    _xmr.open("POST", url, true);   //规定请求的类型、URL 以及是否异步处理请求。
    _xmr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求头
    _xmr.send(arg); //将请求发送到服务器。
    _xmr.onreadystatechange = function () {//响应请求
        if (this.readyState == 4 && this.status == 200) {
            //this.readyState 为4 请求已完成,且响应已就绪  this.status 200 ok
            callback ? callback(this.responseText) : ""; //回调
        }
    }
}
新建js文件 ajax.js, data = querystring.parse(data); 在代码的这行添加断点,  F5 启动调试
var http = require('http'); //加载一个 http 外部模块 
var querystring = require('querystring');//导入querystring模块(解析post请求数据)


http.createServer(function (request, response) {//创建一个HTTP服务器

    var data = '';//创建空字符叠加数据片段
    request.on('data', function (chunk) {// chunk 默认是一个二进制数据,和 data 拼接会自动 toString
        data += chunk;
    });

    //当接收表单提交的数据完毕之后,就可以进一步处理了
    //注册end事件,所有数据接收完成会执行一次该方法
    request.on('end', function () {

        //对url进行解码(url会对中文进行编码)
        data = decodeURI(data);
        /**post请求参数不能使用url模块解析,因为他不是一个url,而是一个请求体对象 */

        //使用querystring对url进行反序列化(解析url将&和=拆分成键值对),得到一个对象
        //querystring是nodejs内置的一个专用于处理url的模块,API只有四个,详情见nodejs官方文档
        data = querystring.parse(data);
      //console.log(dataObject);
      
      if(request.url=='/'){//判断请求的url
          console.log(request.method+"\n"); //request 请求对象  request.method  获取请求对象的请求方式 GET/POST
          response.writeHead(200, {
              'Content-Type': 'text/plain; charset=utf8',
              'Access-Control-Allow-Origin': '*'
          });  //向请求的客户端发送响应头。
          //var str = JSON.stringify("Hello Wolder"); 
          // response.write(str);
          response.end(data["mode"]);
      }
    });

}).listen(3000);//监听 3000 端口

console.log('Server running at http://127.0.0.1:3000/');//控制台打印
用google浏览器,打开ajax.html,F12 打开开发者工具,点击 Sources ,在 console.log(r) 那一行的行号,点击行号添加断点。
下图为进入准备调试
Alternate Text
data为前台传递的参数 
Alternate Text
r 为后台返回的值 
Alternate Text

工作人员

 
        
作者:赖文剑
信息录入:赖文剑
文案编辑:XXX
视频录制:XXX
视频编辑:XXX
图片编辑:XXX