zoukankan      html  css  js  c++  java
  • 几种获取网络数据的方式

      这几天把自己常用的获取数据的方式整理了下。因自己也是菜鸟一个,还有好多都不知道,所以不是太好,但自己一直用着,就拿出来分享。也为以后自己方便查找。这几天一直用着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 = 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 postData = "";
    
    
        //
        req.addListener("data" , function (data) {
            postData += data;
        });
    
    
    
    
        req.addListener("end" , function () {
            // 把接收到的data转化成对象方式
    
            var postDataObj = JSON.parse(postData);
    
            var myUrl = postDataObj.myUrl;
            var resultData = "";
            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")
        });
  • 相关阅读:
    文件上传和下载
    代理模式
    设计模式分类
    单例模式
    抽象工厂模式
    成长
    Java教程
    python面试大全
    python入门教程
    收藏网摘
  • 原文地址:https://www.cnblogs.com/zhaoyong1/p/6760141.html
Copyright © 2011-2022 走看看