爬虫基本功2:前端

一:爬虫重点分析html与js

Html:骨骼

css:衣服,主要的目的是用来做美化的,做数据提取的时候不用考虑css

JavaScript:肌肉,让人能够运动起来,可以动态的控制网页

网页右键->查看网页源代码: 查看服务器返回的最原始的代码

F12->Elements:是js执行完之后展现出来的html

极端的情况:原始的页面什么都没,但是可以通过js与服务器交互,拿回来一堆的数据.

二:浏览器的加载过程

根据html内容构建dom树

加载子资源:css/图片/js

css执行,js执行

三:DOM树

js操作html标签,就是通过dom树来控制的,浏览器返回回来的html,可以通过js改的面目全非,整个html都由js来构建也是可以的,不懂js的话,数据隐藏在什么地方你都无法分析

         $(document).ready(function () {            console.log($("#info")[0].nodeName)            // console.log($("#info").text())            // console.log($("#info").html())            // console.log($(".teacher_info").html())            // console.log($("#info").children().first().text())            // console.log($(".name").siblings().first().text())            $(".name").addClass("bobby")            console.log($(".name").attr("class"))            $(".age").attr("data", "30")            $(".age").remove()        })    //$()是jquery的全局对象//.text()表示剔除标签,只显示所有的文本内容

$(document).ready(function() {    $("#myform").click(function () {        $("#myform").submit()  //js是可以操控form表单提交的    })})...                //如果直接在表单中写onclick事件,就知道有相应的js,而通过这样的方式,则增加了分析的难度

四:ajax与json

json本质是python的dict,是被所有语言所能识别,跨语言的数据交互的格式

ajax:异步js,局部刷新网页,要分析这里面访问服务器带回来的数据

        $(document).ready(function () {            $.ajax({                url:"http://127.0.0.1:8000",                success:function (data) {                    for(let value of data){                        $("table").append("\n" +                            "            "+value.name+"\n" +                            "            "+value.teacher+"\n" +                            "            访问\n" +                            "          ")                    }                }            })        })    

$(document).ready(function() {    $.ajax({        type:"post",        url:"http://127.0.0.1:8000",        data: $("#myform").serialize(),        success:function (data) {            console.log(data)        }    })})...                

五:动态网页与静态网页

静态网页:直接有固定的数据,爬虫友好

动态网页:有交互的数据,比如通过ajax请求,动态加载数据

六:Get/Post方法

区别(大体知道下即可):

• GET在把参数包含在URL中,POST通过request body传递参数

• GET请求在URL中传递的参数有长度限制(比如图片,就传递不了),Post没有

• GET请求只能进行url编码,而POST支持多种编码方式

三种content-type

• application/x-www-form-urlencoded,提交的数据按照key1=val1&key2=val2的方式进行编码,键值都进行了url转码

• multipart/form-data,必须配合Post,上传文件时必须让表单的enctype等于这个值

• application/json

总结:可以看到数据可以写死在静态网页里面,可以从js、ajax获取,要能够分析出数据藏在哪儿

加微信1040417074打赏10元，免费送慕课网课程：爬虫工程师从入门到进阶

本文由 mdnice 多平台发布