search

Wscats / angular-tutorial

:rabbit:Some of the angular tutorial - 《Angular学习笔记》
387 stars 125 forks source link

angular运用jsonp #6

Open Wscats opened 8 years ago

Wscats commented 8 years ago 
var http = require('http');
var fs = require('fs');
var url = require('url');
var querystring = require('querystring')
    //console.log(http);
http.createServer(function(request, response) {
    request.setEncoding('utf-8');
    //获取请求路径 比如index.html
    var pathname = url.parse(request.url).pathname;
    //获取请求参数 例如?callback=JSON_CALLBACK&name=yao
    var paramStr = url.parse(request.url).query;
    console.log(pathname);
    //将参数转化为json对象
    var param = querystring.parse(paramStr);
    console.log(param.callback);
    //发送 HTTP 头部 
    //HTTP 状态值: 200 : OK
    //内容类型: text/plain
    response.writeHead(200, {
        'Content-Type': 'text/jsonp'
    });
    var datas = {
        name: "wsscat",
        age: "99",
        sex: "cat",
        skill: ["html", "css", "js", "php"]
    };

    //发送响应数据
    //"angular.callbacks._0"才能正确执行&&JSON_CALLBACK不能正确执行
    //转化为jsonp的格式传递
    response.end(param.callback + "(" + JSON.stringify(datas)+")");
}).listen(8888);

//终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="angular/angular.js"></script>
    <body ng-controller="homeCtrl">
            {{text}}
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('homeCtrl', ['$scope', '$http', function($scope, $http) {
            $scope.text = 'wsscat';
            $http.jsonp('http://localhost:8888/index?callback=JSON_CALLBACK').success(function(data){
                console.log(data);
            })
        }])
    </script>
</html>
Wscats commented 8 years ago

angular.html

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="js/angular.js"></script>
    <body ng-controller="indexCtrl">
        {{name}}
    </body>
    <script>
        var app = angular.module('wsscat',[]);
        app.controller('indexCtrl',['$scope','$http',function($scope,$http){
            $scope.name = "cat";
            $http.jsonp('http://127.0.0.1:8888/http.js?name=wsscat&skill=cat&callback=JSON_CALLBACK').success(function(data){
                console.log(data);
            })
        }])
    </script>
    <!--<script src="http://127.0.0.1:8888/http.js?name=wsscat&skill=cat&callback=JSON_CALLBACK"></script>-->
</html>

http.js

//http
//fs IO
//url
//querystring 
var http = require('http');
var url = require('url');
var fs = require('fs');
var querystring = require('querystring');
//console.log(http);
//console.log(url);
//http.get('http.js')
http.createServer(function(request,response){
    request.setEncoding('utf-8');
    //request.url
    //获取url参数
    var paramStr = url.parse(request.url).query;
    console.log(pathname); 
    //获取url路由
    var pathname = url.parse(request.url).pathname;
    //php $_GET 拿get请求的参数
    var param = querystring.parse(paramStr);
    console.log(param);
    console.log(paramStr);
    if(param['name']){
        var name = '{"name":"wsscat","skill":"cat"}';
    }

    var obj = {
        name:'wsscat',
        age:'0',
        sex:'man',
        skill:['php','ps']
    }

    var data = JSON.stringify(obj);
    var jsonp = param['callback']+"("+data+")";
    //响应状态码
    //响应头
    response.writeHead(200,{
        'Content-Type':'text/html',
    });
    //相应体
    response.end(jsonp);
    //监听端口号
}).listen(8888);