这几天把自己常用的获取数据的方式整理了下。因自己也是菜鸟一个,还有好多都不知道,所以不是太好,但自己一直用着,就拿出来分享。也为以后自己方便查找。这几天一直用着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")
});