本文综合php,ajax的基础知识来做次很酷的事-爬虫,代理. 作为练习,这里仅仅实现抓去别人页面上的图片显示在自己的页面上---这已经很酷了.
1.域安全限制:
在js里是访问不了不同域下面的文件的.除非那目标网站是你的,而且你能对要访问的页面进行修改.但是任何网站都不会限制客户端的正常访问请求.所以,我们先在自己的网站实现一个代理页面.这东西和原来经常出现的翻墙工具一样.
2.php代理:

<?php
//dl.php
require_once("simple_html_dom.php");
$user_agent= "Mozilla/4.0"; //浏览器
$url = '';

if ($_GET['p']) {
    $url = $_GET['p'];
    $url = base64_decode($url);
}

if($url)
{
    $session = curl_init();
    curl_setopt($session,CURLOPT_URL,$url);
    curl_setopt($session, CURLOPT_HEADER, false);
    curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
    $lofter = curl_exec($session);
    curl_close($session);

    $html = str_get_html($lofter);
    $url = $html->find('textarea[name=js]', 0)->innertext;
    $html->clear();
    $ibpos = stripos ($url,'\'');
    $iepos = stripos($url,'\'', $ibpos + 1);
    $url = substr($url,$ibpos + 1,$iepos - $ibpos  - 1);
    echo '<img src = "'.$url.'"/>';
}
?>

第1行是引入一个很好用的dom工具类.有他可以很方便的获取修改各个节点的信息.名字就是simplehtmldom.很简单方便.把他想象成c/cpp经常用的tinyxml也可以.
6-9行是看通过get方法传进来的结果base64编码过的网站地址.
13-18通过curl抓去页面.
20-22通过simplehtmldom获取一个节点的内容.
后面通过字符串操作修剪得到自己要的内容.这里是得到其中的一个图片地址.你完全可以做到得到里面你想要的任何数据,入库等.

ok,先访问这个页面,传入正确的参数,如:http://epics.cn/dl.php?p=aHR0cDovL3d3dy5sb2Z0ZXIuY29tLw== .还不错的样子.

3,自己的页面lofter.html

<html>
<head>
     <title>Lofter</title>
     <script src="lofter.js"></script>
</head>
<body>
     <p>
        <a id="makeImgRequest" href="#">Get</a>   
     </p>
     <div id="ImgArea"> </div>
</body>
</html>

这个页面就一个链接和准备显示抓来的图片. 重要的工作是在js里做的.

4,ajax~:
ajax有很多好处,最醒目的估计就是让web程序看起来更像本地应用程序的风格-反应快.原理也简单,搜索就知道了.
lofter.js

window.onload = initAll; 
var xhr = false;

function initAll() {
     document.getElementById("makeImgRequest").onclick = getNewFile;
}

function getNewFile() {
     makeRequest();
     return false;
}

function makeRequest() {
     if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
     }
     else {
        if (window.ActiveXObject) {
           try {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch (e) { }
        }
     }

     if (xhr) {
        xhr.onreadystatechange = showContents;
        xhr.open("GET", 'dl.php?p=aHR0cDovL3d3dy5sb2Z0ZXIuY29tLw==', true);
        xhr.send(null);
     }
     else {
        document.getElementById("ImgArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
     }
}

function showContents() {
    var outMsg = "";
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) {
                var bg = xhr.responseXML.getElementsById ("bg");
                var outMsg = getText(xhr.responseXML.getElementsById ("bg"));
            }
            else {
                var outMsg = xhr.responseText;

            }
        }
        else {
            var outMsg = "There was a problem with the request " + xhr.status;
        }
        document.getElementById("ImgArea").innerHTML = outMsg;
     }

     function getText(inVal) {
        if (inVal.textContent) {
           return inVal.textContent;
        }
        return inVal.text;
     }
}   

代码都是套路.过程就是异步获取到同域下的文件,还记得前面说的'一般情况下js不能访问不同域的文件'吗.通过代理获取并且分析过滤得到的一个图片地址.然后更新到页面的imgarea节点下.

效果如:http://epics.cn/lofter.html over~

我的博客