zeTab-通过ajax请求NodeJS返回json数据

场景

客户端用ajax获取url返回的json并使用localstorage本地存储
NodeJs本地搭建服务器,监听具体url并用回调函数处理,返回json数据。

实现

客户端:

$.get("http://127.0.0.1:8080/?type=CONFIG", function(data, status) {
    //console.log(JSON.stringify(data));
    parseConfig(data.data);
    //json对象转化成json字符串
    storage.setItem("data", JSON.stringify(data.data))
})

nodejs服务:

var http = require("http"); //提供web服务
var url = require("url"); //解析GET请求
var query = require("querystring"); //解析POST请求
var fs = require("fs");
//服务
var server = function(request, response) {
    response.writeHead(200, {
        "Content-Type": 'text/json',
        'charset': 'utf-8',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS'
    }); //可以解决跨域的请求

    //判断是GET/POST请求
    if (request.method == "GET") {
        var params = [];
        params = url.parse(request.url, true).query;
        params['data'] = getData(params);
        var callback = params.callback;
        //jsonp
        if (callback) {
            response.end(callback + '(' + JSON.stringify(params) + ')');
        } else {
            response.write(JSON.stringify(params));
            response.end();
        }
    } else {
        var postdata = "";
        request.addListener("data", function(postchunk) {
            postdata += postchunk;
        })
        //POST结束输出结果
        request.addListener("end", function() {
            var params = [];
            params = query.parse(postdata);
            params['data'] = getData(params);
            response.write(JSON.stringify(params));
            response.end();
        })
    }
}
function getData(params) {
    switch (params['type']) {
        case "CONFIG":
            return configData();
            break;
        case "BG":
            return backGround();
    }

}
var configData = function() {
    var data = JSON.parse(fs.readFileSync('config.json'));
    return data;
}
//开启服务在127.0.0.1:8080
http.createServer(server).listen(8080);
console.log("Server start!");

AJAX跨域处理

1.XHR2(XMLHttpRequest Level2)

如上处理,在服务器端头部加上下面两句代码:

  header( "Access-Control-Allow-Origin:*" );

  header( "Access-Control-Allow-Methods:POST,GET" );

2.JSONP

JSONP的全称是JSON with Padding,是为实现跨域,而采用的一种脚本注入方法。基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理。

//jsonp
$.ajax({
    url: "http://127.0.0.1:8080/?type=CONFIG",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "successCallback"
}).done(function(data) {
    console.log(JSON.stringify(data));
});

或者直接使用 JSONP 形式的回调函数来加载 JSON 数据

$.getJSON("http://127.0.0.1:8080/?type=CONFIG&callback=?",
    function(data) {
        console.log(JSON.stringify(data));
});