首页手记原生javascript封装ajax

原生javascript封装ajax

标签：

JavaScript

原文见martin的博客

最近重新看《javascript高级程序设计》，突然看到了ajax，想起来之前学习的各种坑，又想着结合最近学习的模块化编程、面向对象式编程，所以用原生的js采用面向对象的设计思路对ajax进行了一个封装，同时，想起之前学习ajax的最大困难：没有服务器端代码，不好测试，所以这次用原生node写了一个简单的服务器，用于处理ajax的测试。

综上，本文主要提供了以下几个点：

采用面向对象的方法用原生js封装了一个ajax类，更便捷的实现ajax通信
提供了一个Node写的服务器端的代码，可以用来测试ajax
提供了一个demo，服务器端以及浏览器端的代码来测试ajax类

仓库在这里,服务器，客户端的代码都在里面，也有一些测试的说明。

ajax实现原理

ajax是一项伟大的技术，其很好的解决了传统浏览器一言不合就重新发送整个页面，速度慢，用户体验差的问题。它是一个获取资源的手段，可以在不进行整体刷新的情况下进行局部dom修改，速度快，用户体验好。实现的原理主要是基于一个类，XMLHttpRequest(IE7以下不支持，提供了另外的类进行实现，不在本文讨论范围中，都2017年了。。)。
大概的原理分成下面几步：

新建XMLHttpRequest对象，var xhr = new XMLHttpRequest().
通信需要有一个回调函数，就是接收到对方的回信之后需要有一个处理的函数，这个函数可以通过xhr.onreadystatechange = callback；来进行回调。对方的回信存储在xhr.responseText。当通信状态xhr.readyState === 4的时候，xhr.responseText就是完整的接收到的数据。
收到回信，进行相应的dom操作，实现页面的局部刷新。

可以看到，其实一个ajax的请求，是很简单简洁的，只要开发者提供，method（get还是post）,data(要传递的数据，ajax本身是用来通信的嘛)，url(通信的对象)，callback(收到回信后的处理)就可以完成一次通信，别的地方是重复性的劳动，不必每次都繁琐的写一遍。所以我建了一个类，提供send方法，实现信息的发送（ajax重复性的工作），上述四个数据存储在每个实例中，只要实例调用send方法，就会进行一次ajax通信。大概的代码思路是这样：

function Ajax(obj){  //根据obj对method,data,url等进行初始化};
Ajax.prototype.send = function(){  var xhr = new XMLHttpRequest();//新建ajax请求，不兼容IE7以下
  xhr.onreadystatechange = function(){//注册回调函数
    if(xhr.readyState === 4)
      callback(xhr.responseText);
  }  if(method === 'get'){//如果是get方法，需要把data中的数据转化作为url传递给服务器
    xhr.open(method,url,true);
    xhr.send(null);
  }else if(method === 'post'){//如果是post，需要在头中添加content-type说明
      xhr.open(method,url,true);
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xhr.send(JSON.stringify(data));//发送的数据需要转化成JSON格式
  }else {    console.log('不识别的方法:'+method);    return fasle;
  }
}

源码点击这里
有了这个类，要实现一条ajax请求，只需执行下面代码即可:

var ajax = new Ajax({  method:'get',//设置ajax方法
  url:'http://localhost:3000',//设置通讯地址
  callback:function(res){//设置回调函数
     alert(res)
  },  data: data//需要传递的数据})
ajax.send();

详细的关于这个类的使用方法，可以参考这里
有了ajax，要测试，怎么办？当然可以找网上一些提供接口的网站进行ajax通信，比如聚合数据，有一些Key需要自己申请，相比之下，自己写一个服务器端的代码来处理请求，反而显得更简单一点。

服务器端处理ajax请求

node.js出来之后，javascript又能打前端，又能干后端，也把我拉进了坑里。在这里，主要是为了进行测试，所以越简单越好（我服务器端的代码水平还不够）。这里我主要参考了菜鸟教程中关于处理客户端请求的代码：原理及介绍点这里

var http = require('http');var url = require('url');var util = require('util');

http.createServer(function(req,res){  console.log(req.method);  if(req.method==='GET'){//处理get请求
      res.writeHead(200,{'content-Type':'text/plain',"Access-Control-Allow-Origin":"*"});
      res.end(util.inspect(url.parse(req.url, true)));//处理get请求，并将结果传递给客户端
  }  else{//处理post请求
      // 定义了一个post变量，用于暂存请求体的信息
        var post = '';        // 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
        req.on('data', function(chunk){
            post += chunk;
        });        // 在end事件触发后然后向客户端返回。
        req.on('end', function(){
            post = JSON.parse(post);            console.log(post);
            res.writeHead(200, {'Content-Type': 'text/html',"Access-Control-Allow-Origin":"*"});
            res.end(util.inspect(post));
        });
    }
}).listen(3000);console.log('server is listening on "3000"');

get请求的处理比较简单，因为get方法将信息都加在url中，服务器端对url进行解析就可以得到该请求的内容，我这里的处理是将其原封不动的返回给客户端。
post的请求相对麻烦，需要注册两个时间，on,end。一个是处理数据块，因为Post请求一般数据比较多，分多次传输，我们要的其实只是end之后的数据，在这里我也是直接将其信息几乎原封不动的返回。