首页 > 代码库 > 几种获取网络数据的方式

几种获取网络数据的方式

  这几天把自己常用的获取数据的方式整理了下。因自己也是菜鸟一个,还有好多都不知道,所以不是太好,但自己一直用着,就拿出来分享。也为以后自己方便查找。这几天一直用着anguler,就用anguler写吧!里面用到了node,所以在使用的时候要看下自己的电脑是否有node 环境。如果还有别的更简单的方法希望赐教,嘻嘻!

HTML:

<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>获取数据</title>
    </head>
    <body>
        <div ng-controller="myController">
            <button ng-click="getDataAction()">获取数据</button>
        </div>
    </body>
</html>
<script src="../lib/angular.js"></script>
<script>
//    http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html
    var app = angular.module("myApp" , [])
        .controller("myController" , function($scope , $http){
            $scope.getDataAction = function(){
                console.log("开始获取数据");
//                #http()
//                    .success()
//                    .error()
                
                 var url="http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
                 url = encodeURIComponent(url);
                 url = "http://localhost:3000?myUrl=" + url;
                 
//                $http({
//                    url:url,
//                    method:"get"
//                })
//                    .then(function(res){
//                        console.log(res);
//                    }),function(err){
//                        console.log(err);
//                    };


                //jsonp
                //json 通过动态创建script元素来访问服务器
                //把回调函数名作为参数传递跟服务器 
                //服务器请求得到数据以后 把数据放回回调函数中
                //前端通过回调函数的实现部分 得到数据

//                var script = document.createElement("script");
//                url = url + "&callback=xxx";
//                script.src = http://www.mamicode.com/url;
//                document.documentElement.appendChild(script);

                //anguler $http服务中 自带有JSON的请求方式 这样就不用动态的创建脚本
                //$http服务中 callback参数 必须写成JSON_CALLBACK
                //意思是告诉angular自己去创建一个回调函数
//                var myUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
//                $http({
//                    method:"jsonp",
//                    url:"http://localhost:3000?myUrl=" + myUrl + "&callback=JSON_CALLBACK"
//                })
//                    .then(function (res) {
//                        console.log(res);
//                    },function (err) {
//                        console.log(err);
//                    });

                //$http post请求
//                $http({
//                    method:"post",
//                    url:"http://localhost:3010",
//                    headers:{
//                        "Content-Type":"application/x-www-form-urlencoded"
//                    },
//                    data:{
//                        myUrl:"http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"
//                    }
//                })
//
//                    .then(function (res) {
//                        console.log(res);
//                    },function (err) {
//                        console.log(err);
//                    })

                //promise请求
                var promise = $http({
                    method:"post",
                    url:"http://localhost:3010",
                    headers:{
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    data:{
                        myUrl:"http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"
                    }

                });
//
//                promise.success(function (res) {
//                    console.log(res);
//                });
//
//                promise.error(function (err) {
//                    console.log(err);
//                });

                promise.then(function (res) {
                    console.log(res);
                },function (err) {
                    console.log(err);
                })

            }
        })
function xxx(res) {
    console.log(res);
}
</script>

js:

var http = require("http");

var url = require("url");

var qs = require("querystring");

http.createServer(function (req , res) {
    res.setHeader("Access-Control-Allow-Origin" , "*");

    req.setEncoding("utf-8");

    //
    var postDatahttp://www.mamicode.com/= "";


    //
    req.addListener("data" , function (data) {
        postData += data;
    });




    req.addListener("end" , function () {
        // 把接收到的data转化成对象方式

        var postDataObj = JSON.parse(postData);

        var myUrl = postDataObj.myUrl;
        var resultDatahttp://www.mamicode.com/= "";
        http.get(myUrl ,function (request) {
            request.on("data" , function (data) {
                resultData += data;
            } );
            request.on("end" , function () {
                res.end(resultData);
            } );
        }).on("error" , function (err) {
            console.log(err);
        });


    });
})
    .listen(3010 , function () {
        console.log("3010")
    });

js2:

var http = require("http");

var url = require("url");

var qs = require("querystring");

http.createServer(function( req , res){
    res.setHeader("Access-Control-Allow-Origin" , "*");
    //对请求对象的url进行解析 拿到?后面的查询参数
var query =    url.parse(req.url).query;
    //把key=value
    var queryObj = qs.parse(query);

    var result = "";
    http.get(queryObj.myUrl , function (request) {
        request.on("data" , function (data) {
            result += data;
        });
        request.on("end" , function () {
            if(queryObj.callback){
                var fn = queryObj.callback;
                var resultStr = JSON.stringify(result);
                var str = fn + "("+ result + ")";
                res.end(str);
            }else {
                res.end(result);
            }

        })
    }).on("error" , function (err) {
        res.end(err);
    });

    // res.end("helloWorld");
    
})
    .listen(3000 , function(){
        console.log("监听3000")
    });

 

几种获取网络数据的方式