JS跨域抓取信息

众所周知,JS是不能跨域抓取数据的,除非有授权。所以本文并非真的直接跨域抓取,而是换个思路。通过转折,先用PHP抓取所需信息,然后传给JS.

今日,应老师要求,给学校做一个无线网登陆页面。为了更好的适应PC,移动终端,选择bootstrap快速开发,静态页面马上完工。剩下的便是今天要说到的问题:

要从学校主页http://www.bistu.edu.cn抓取通知数据和http://news.bistu.edu.cn/zhxw/抓取学校要闻,都取最新的五条,由于是HTML页面,PHP显得苍白无力,只好用JS。。可惜JS基本白痴,Google发现还不能跨域,虽然有些解决办法,貌似很复杂,对JS小白是在做不到啊~

于是想到了先用PHP正则抓到新闻,(期间也用php生成json数组供JS远程调用,略显麻烦)输出让JS舒服的数组,然后JS再上简单多了,说上就上,首先看需要抓取的页面的源码,找到所需信息的特定标签,然后直接PHP匹该标签。废话不说,直接贴出正则:

1
2
3
4
5
6
7
<?php  
$text=file_get_contents(‘http://news.bistu.edu.cn/zhxw/’);
preg_match_all(‘/<div[^>]*class="xs2 mar_top15"[^>]*>(.*?)<\/div>/si’, $text,$match);
foreach($match[0] as $key => $news) {
if($key<5) echo $news ; //只取前五条信息
}
?>

运行一下,看看抓到了什么:

QQ图片20140518231050

看来抓取成功了,到底抓到了什么,再看看,加一句print_r ($match[0]);再运行看看:

Array ( [0] =>  [1] =>  [2] =>  [3] =>  [4] =>  [5] =>  ) 

正是所需信息,可是看看链接,发现不对,中的标签都是相对链接,不仅有./还有../(好贱)而我需要的是绝对链接,怎么办?正则出链接在替换?不用那么麻烦,直接上代码:

1
2
3
4
5
6
7
8
9
10
<?php  
$text=file_get_contents(‘http://news.bistu.edu.cn/zhxw/’);
preg_match_all(‘/<div[^>]*class="xs2 mar_top15"[^>]*>(.*?)<\/div>/si’, $text,$match);
$match = str_replace(‘../’, ‘http://news.bistu.edu.cn/’, $match[0]);  //替换../
$match = str_replace(‘./’, ‘http://news.bistu.edu.cn/zhxw/’, $match);  //替换./
foreach($match as $key => $news)
{
if($key<5) echo $news ;
}
?>

这回再看看:

好了,链接换成绝对链接了,php的工作完成了,剩下的交给JS,让js调用php正则好的五条新闻即可,用innerHTML直接将五条信息输出到html指定的id下面。直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">  
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
var a = document.getElementById("hot"); //你需要输出的地方的html id
a.innerHTML = xhr.responseText;
} else {
alert("request was unsuccessful:" + xhr.status);
}
}
}
xhr.open("get", "http://1.ibin.sinaapp.com/news.php(你的php页面地址)", false);
xhr.send(null);
</script>

一切完成,最终效果请看这儿:http://1.ibin.sinaapp.com/

其中通知和新闻热点就是这样抓过来的~

Author

Ludis

Posted on

2014-05-18

Updated on

2014-05-18

Licensed under

Comments