js jq 如何进行页面采集（或测试）

首先需要指出的是，js jq是不可能实现页面采集的，但有时候作为前端开发，又想要一种轻量级的解决方案实现页面中某些特定信息的获取，目前可行的最简单的办法也需要在后端实现采集功能，如果目标页面是动态的，就还需要借助某些开源框架，总的来说就是太“重”了。于是我考虑将现有的一些页面测试技术进行了整合，并提供统一的http接口，一个是自用，另一个是对外提供服务。目前还处于构想和实验阶段，简单地实现了一个动态页面的解析接口，可以将你提交的网页链接进行解析，生成经js处理后的html代码。当然这个速度是比较慢的，整个流程走下来最快也要10秒左右。不过目前是针对比较复杂的js页面，后续考虑采用多种框架，解决不同类型需求（那速度也就有快有慢了，当然也可以考虑分布式架构实现速度提升）。有这方面需求或兴趣的童鞋可以加Q群（581425491）一起讨论学习。下面就简单的介绍下这个接口的使用方法：

1 可以到网站上体验一下整个采集流程：

http://120.79.247.23/f12b

2 也可以通过http接口（ajax）（当然你将链接拼好了放浏览器里一样能得到执行结果）

1）发送指令

<script>
    $.ajax({
        type : "get",
        async:false,
        url:"http://120.79.247.23/f12b",
        data:{
              cmd:'api_putACommand',
              url:'www.weibo.com',    //需要采集的链接
              wait:'5000'    //因为js加载需要时间，所以需要等待一定秒数，这个数值可根据实际情况设置
        },
        dataType: 'jsonp',　　//这里使用jsonp解决跨域问题
        jsonp:"jsonpCallback",
        success: function(data) {
              if(data.status==200){
                  //status=200时表明执行正常 返回一个id，此id是后续查询采集进度的唯一标识
                  alert(data.commandID);
              }else{
                  //status!=200则表明执行有问题
                  alert(data.msg);
              }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            var errorMsg = textStatus+"("+XMLHttpRequest.status+")";
            alert(errorMsg);
            return false;
        }
    });
    
</script><br /><br />正常返回值：<br />　　{"status":"200","commandID":17}<br />　　//status: 处理状态，200是正常，-1是异常<br />　　//commandID: 任务ID，需要保存起来后面查询要用<br />其他返回值:<br />　　{"status":"-1","msg":"参数不能为空"}<br />　　{"status":"-1","msg":"保存至数据库失败"}<br />　　{"status":"-1","msg":"null"}

2）查询指令执行情况

<script>
    $.ajax({
        type : "get",
        async:false,
        url:"http://120.79.24.23/f12b",
        data:{
              cmd:'api_quaryACommand',
              commandID:17,    //前面返回给你的ID
        },
        dataType: 'jsonp',
        jsonp:"jsonpCallback",
        success: function(data) {
              if(data.status==200){
                  //status=200时表明查询成功<br />　　　　　　　　　　if(data.commandStatus=="create"){<br />　　　　　　　　　　　　//表明此指令已被服务端接受，但还未开始执行（通常是因为在排队）<br />　　　　　　　　　　}else if(data.commandStatus=="start"){<br />　　　　　　　　　　　　//表明此指令已开始执行<br />　　　　　　　　　　}else if(data.commandStatus=="success"){<br />　　　　　　　　　　　　//指令执行完成，会返回一个fileID，链接经js解析后的html代码就存放在这个文件里<br />　　　　　　　　　　　　alert(data.fileID);<br />　　　　　　　　　　}
              }else{
                  //status!=200则表明查询有问题
                  alert(data.msg);
              }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            var errorMsg = textStatus+"("+XMLHttpRequest.status+")";
            alert(errorMsg);
            return false;
        }
    });
    
</script><br /><br />//正常返回值：<br />　　任务已创建正在等待执行：{"status":"200","commandStatus":"create"}<br />　　任务已开始执行：{"status":"200","commandStatus":"start"}<br />　　任务执行完成：{"status":"200","commandStatus":"success","fileID":"18"}<br />//其他返回值：<br />　　{"status":"-1","msg":"参数不能为空"}<br />　　{"status":"-1","msg":"数据库链接失败"}<br />　　{"status":"-1","msg":"数据库查询失败"}<br />　　{"status":"-1","msg":"找不到commandID"}<br />　　{"status":"-1","msg":"null"}

3）得到执行结果（html文件内容）

<script>
    $.ajax({
        type : "get",
        async:false,
        url:"http://120.79.247.23/f12b",
        data:{
              cmd:'api_getAFileContent',
              fileID:'18'    //上一步提供给你的文件id
        },
        dataType: 'jsonp',　　
        jsonp:"jsonpCallback",
        success: function(data) {
              if(data.status==200){
                  //status=200时表明执行正常，直接将html文件的内容返回给你
                  alert(data.fileContent);
              }else{
                  //status!=200则表明执行有问题
                  alert(data.msg);
              }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            var errorMsg = textStatus+"("+XMLHttpRequest.status+")";
            alert(errorMsg);
            return false;
        }
    });
    
</script><br /><br />//正常返回值<br />　　{"status":"200","fileContent":"xx"}<br />//其他返回值<br />　　{"status":"-1","msg":"null"}

参考：

https://www.cnblogs.com/dream0530/p/6179819.html