公众号:uncle39py

V1

2022/08/18阅读:17主题:默认主题

爬虫基本功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的话,数据隐藏在什么地方你都无法分析

 <script>
        $(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()
        })
    
</script>
//$()是jquery的全局对象
//.text()表示剔除标签,只显示所有的文本内容
$(document).ready(function({
    $("#myform").click(function ({
        $("#myform").submit()  //js是可以操控form表单提交的
    })
})
...
<body>
<form id="myform" action="http://127.0.0.1:8000" method="POST" enctype="multipart/form-data">
    <input type="text" name="name"/>
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="button" value="登录">
</form>
//如果直接在表单中写onclick事件,就知道有相应的js,而通过这样的方式,则增加了分析的难度

四:ajax与json

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

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

<script>
        $(document).ready(function ({
            $.ajax({
                url:"http://127.0.0.1:8000",
                success:function (data{
                    for(let value of data){
                        $("table").append("<tr>\n" +
                            "            <td>"+value.name+"</td>\n" +
                            "            <td>"+value.teacher+"</td>\n" +
                            "            <td><a href=\""+value.url+"\">访问</a></td>\n" +
                            "          </tr>")
                    }
                }
            })
        })
    </script>
$(document).ready(function({
    $.ajax({
        type:"post",
        url:"http://127.0.0.1:8000",
        data: $("#myform").serialize(),
        success:function (data{
            console.log(data)
        }
    })
})
...
<form id="myform" action="http://127.0.0.1:8000" method="POST" enctype="multipart/form-data">
    <input type="text" name="name"/>
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="button" value="登录">
</form>

五:动态网页与静态网页

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

动态网页:有交互的数据,比如通过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元,免费送慕课网课程:爬虫工程师从入门到进阶

分类:

后端

标签:

Python

作者介绍

公众号:uncle39py
V1