javascript怎么獲取指定url網頁中的內容

一、總結

一句話總結：推薦jquery中ajax，簡單方便。

1、js能跨域操作么？

javascript出於安全機制不允許跨域操作的。

二、用php獲取

javascript出於安全機制不允許跨域操作的。因此不能抓取其他網站的內容。
可以使用php中的
echo file_get_contents("網址");

也可以使用curl
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"網址");
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
echo $data=curl_exec($ch);
curl_close($ch);

三、jquery中ajax獲取

用ajax。

引入jquery的話，

 
              $( 
              "button" 
              ).click( 
              function 
              (){ 
             
 
                  
              $( 
              "div" 
              ).load( 
              'test.html' 
              ); 
             
 
              }); 
             

如果你要獲取這個頁面某個id或者類的html還可以這么寫

 
              $( 
              "button" 
              ).click( 
              function 
              (){ 
             
 
                  
              $( 
              "div" 
              ).load( 
              'test.html #container' 
              ); 
             
 
              }); 
             

這個可以直接把新頁面的html元素加載到指定的div或者別的元素里面。

如果你要純代碼的話，那再獲取這個div的html就可以了。

1	`$(` `"div"` `).html();`

四、通過node.js獲取

以前一直聽說有爬蟲這種東西，稍微看了看資料，貌似不是太復雜。

正好了解過node.js，那就基於它來個簡單的爬蟲。

1.本次爬蟲目標：

從拉鈎招聘網站中找出“前端開發”這一類崗位的信息，並作相應頁面分析，提取出特定的幾個部分如崗位名稱、崗位薪資、崗位所屬公司、崗位發布日期等。並將抓取到的這些信息，展現出來。

初始拉鈎網站上界面信息如下：

2.設計方案：

爬蟲，實際上就是通過相應的技術，抓取頁面上特定的信息。

這里主要抓取上圖所示崗位列表部分相關的具體崗位信息。

首先，抓取，就得先有地址url:

http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=1

這個鏈接就是崗位列表的第一頁的網頁地址。

我們通過對地址的參數部分進行分析，先不管其他選擇的參數，只看最后的參數值：pn=1

我們的目的是通過page來各個抓取，所以設置為pn = page;

其次，爬蟲要獲取特定信息，就需要特定代表的標識符。

這里采用分析頁面代碼標簽值、class值、id值來考慮。

通過Firebug對這一小部分審查元素

分析得出將要獲取哪些信息則需要對特定的標識符進行處理。

3.代碼編寫：

按照預定的方案，考慮到node.js的使用情況，通過其內置http模塊進行頁面信息的獲取，另外再通過cheerio.js模塊對DOM的分析，進而轉化為json格式的數據，控制台直接輸出或者再次將json數據傳送回瀏覽器端顯示出來。

（cheerio.js這東西的用法很簡單，詳情可以自行搜索一下。其中最主要的也就下邊這份代碼了，其余的跟jQuery的用法差不多。

就是先將頁面的數據load進來形成一個特定的數據格式，然后通過類似jq的語法，對數據進行解析處理）

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

采用express模塊化開發，按要求建立好項目后。進入項目目錄，執行npm install安裝所需依賴包。如果還不了解express的可以 到這里看看

爬蟲需要cheerio.js 所以另外require進來，所以要另外 npm install cheerio

項目文件很多，為了簡單處理，就只修改了其中三個文件。（index.ejs index.js style.css )

（1）直接修改routes路由中的index.js文件，這也是最核心的部分。

還是看代碼吧，有足夠的注釋

 1 var express = require('express');
 2 var router = express.Router();
 3 var http = require('http');
 4 var cheerio = require('cheerio');
 5 
 6 /* GET home page. */
 7 router.get('/', function(req, res, next) {
 8   res.render('index', { title: '簡單nodejs爬蟲' });
 9   });
10 router.get('/getJobs', function(req, res, next) { // 瀏覽器端發來get請求
11 var page = req.param('page');  //獲取get請求中的參數 page
12 console.log("page: "+page);
13 var Res = res;  //保存，防止下邊的修改
14 //url 獲取信息的頁面部分地址
15 var url = 'http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&spc=1&pl=&gj=&xl=&yx=&gx=&st=&labelWords=label&lc=&workAddress=&city=%E5%85%A8%E5%9B%BD&requestId=&pn=';
16 
17 http.get(url+page,function(res){  //通過get方法獲取對應地址中的頁面信息
18     var chunks = [];
19     var size = 0;
20     res.on('data',function(chunk){   //監聽事件 傳輸
21         chunks.push(chunk);
22         size += chunk.length;
23     });
24     res.on('end',function(){  //數據傳輸完
25         var data = Buffer.concat(chunks,size);  
26         var html = data.toString();
27     //    console.log(html);
28         var $ = cheerio.load(html); //cheerio模塊開始處理 DOM處理
29         var jobs = [];
30 
31         var jobs_list = $(".hot_pos li");
32         $(".hot_pos>li").each(function(){   //對頁面崗位欄信息進行處理  每個崗位對應一個 li  ,各標識符到頁面進行分析得出
33             var job = {};
34             job.company = $(this).find(".hot_pos_r div").eq(1).find("a").html(); //公司名
35             job.period = $(this).find(".hot_pos_r span").eq(1).html(); //階段
36             job.scale = $(this).find(".hot_pos_r span").eq(2).html(); //規模
37 
38             job.name = $(this).find(".hot_pos_l a").attr("title"); //崗位名
39             job.src = $(this).find(".hot_pos_l a").attr("href"); //崗位鏈接
40             job.city = $(this).find(".hot_pos_l .c9").html(); //崗位所在城市
41             job.salary = $(this).find(".hot_pos_l span").eq(1).html(); //薪資
42             job.exp = $(this).find(".hot_pos_l span").eq(2).html(); //崗位所需經驗
43             job.time = $(this).find(".hot_pos_l span").eq(5).html(); //發布時間
44 
45             console.log(job.name);  //控制台輸出崗位名
46             jobs.push(job);  
47         });
48         Res.json({  //返回json格式數據給瀏覽器端
49             jobs:jobs
50         });
51     });
52 });
53 
54 });
55 
56 module.exports = router;

（2）node.js抓取的核心代碼就是上面的部分了。

下一步就是將抓取到的數據展示出來，所以需要另一個頁面，將views中的index.ejs模板修改一下

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title><%= title %></title>
 5     <link rel='stylesheet' href='/stylesheets/style.css' />
 6   </head>
 7   <body>
 8     <h3>【nodejs爬蟲】 獲取拉勾網招聘崗位--前端開發</h3>
 9     <p>初始化完成 ...</p>
10     <p><button class="btn" id="btn0" onclick="cheerFetch(1)">點擊開始抓取第一頁</button></p>
11     <div class="container">
12     <!--<div class="jobs"> </div>-->
13     </div>
14     <div class="footer">
15     <p class="fetching">數據抓取中 ... 請稍后</p>
16         <button class="btn" id="btn1" onclick="cheerFetch(--currentPage)">抓取上一頁</button>
17         <button class="btn" id="btn2" onclick="cheerFetch(++currentPage)">抓取下一頁</button>
18     </div>
19     <script type="text/javascript" src="javascripts/jquery.min.js"></script>
20     <script type="text/javascript">
21     function getData(str){   //獲取到的數據有雜亂..需要把前面部分去掉,只需要data（<em>......<em>  data)
22         if(str){
23         return str.slice(str.lastIndexOf(">")+1);
24     }
25 }
26 
27 document.getElementById("btn1").style.visibility = "hidden";
28 document.getElementById("btn2").style.visibility = "hidden";
29 var currentPage = 0;  //page初始0
30 
31 function cheerFetch(_page){  //抓取數據處理函數
32     if(_page == 1){ 
33         currentPage  = 1;      //開始抓取則更改page
34     }
35     $(document).ajaxSend(function(event, xhr, settings) {  //抓取中...
36         $(".fetching").css("display","block");
37     });
38     $(document).ajaxSuccess(function(event, xhr, settings) {  //抓取成功
39         $(".fetching").css("display","none");
40     });
41     $.ajax({   //開始發送ajax請求至路徑 /getJobs  進而作頁面抓取處理
42         data:{page:_page},  //參數 page = _page
43         dataType: "json",
44         type: "get",
45         url: "/getJobs",
46         success: function(data){   //收到返回的json數據
47             console.log(data);
48             var html = "";
49             $(".container").empty();
50             if(data.jobs.length == 0){ 
51                 alert("Error2: 未找到數據..");
52                 return;
53             }
54             for(var i=0;i<data.jobs.length;i++){   //遍歷數據並提取處理
55                 var job = data.jobs[i];
56                 html += "<div class='jobs'><p><span >崗位序號：</span>  "+((i+1)+15*(currentPage-1))+"</p>"+
57                 "<p>崗位名稱：<a href='"+job.src+"'target='_blank'>"+job.name+"</a></p>"+
58                 "<p><span >崗位所在公司：</span>  "+job.company+"</p>"+
59                 "<p><span>公司階段：</span>  "+getData(job.period)+"</p>"+
60                 "<p><span>崗位規模：</span>  "+getData(job.scale)+"</p>"+
61                 "<p><span>崗位所在城市：</span>  "+job.city+"</p>"+
62                 "<p><span>崗位薪資：</span>  "+getData(job.salary)+"</p>"+
63                 "<p><span>崗位最低經驗要求：</span>  "+getData(job.exp)+"</p>"+
64                 "<p><span>崗位發布時間：</span>  "+getData(job.time)+"</p>"+
65                 "</div>"
66             }
67 
68             $(".container").append(html);  //展現至頁面
69             if(_page == 1){ 
70                 document.getElementById("btn1").style.visibility = "hidden";
71                 document.getElementById("btn2").style.visibility = "visible";
72             }else if(_page > 1){ 
73                 document.getElementById("btn1").style.visibility = "visible";
74                 document.getElementById("btn2").style.visibility = "visible";
75             }
76         },
77         error: function(){ 
78             alert("Error1: 未找到數據..");
79         }
80     });
81 }
82 
83     </script>
84   </body>
85 </html>

（3）當然了，也少不了樣式部分的簡單修改 public文件下的 style.css

body {
  padding: 20px 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00B7FF;
  cursor: pointer;
}
.container{position: relative;width: 1100px;overflow: hidden;zoom:1;}
.jobs{margin: 30px; float: left;}
.jobs span{ color: green; font-weight: bold;}
.btn{cursor: pointer;}
.fetching{display: none;color: red;}
.footer{clear: both;}