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匹该标签。废话不说，直接贴出正则：

<?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 ; //只取前五条信息  
  }  
?>

运行一下，看看抓到了什么：

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

Array ( [0] => 
我校第二次党代会即将召开
 [1] => 
“勤•信”文化大讲堂第30讲学习习近平总书记十八大以来重要讲话精神
 [2] => 
我校在2013北京高校红色“1+1”示范活动评选中获得佳绩
 [3] => 
2014新年致辞
 [4] => 
岁末大点兵 好稿共欣赏
 [5] => 
柳贡慧校长与20名新生畅谈大学青春
 ) 

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

<?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 ;  
 }  
?>

这回再看看：

我校第二次党代会即将召开

“勤•信”文化大讲堂第30讲学习习近平总书记十八大以来重要讲话精神

我校在2013北京高校红色“1+1”示范活动评选中获得佳绩

2014新年致辞

岁末大点兵 好稿共欣赏

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

<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/，

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