首页 > 其他分享 >一步一步学爬虫(5)什么是Ajax

一步一步学爬虫(5)什么是Ajax

时间:2023-01-08 22:01:22浏览次数:46  
标签:xmlhttp 请求 一步 JavaScript 爬虫 Ajax 网页 页面

(什么是Ajax)   Ajax,全称为 Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML。它不是一门编程语言,而是利用 JavaScript 在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

  对于传统的网页,如果想更新其内容,那么必须刷新整个页面,但有了 Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用 JavaScript 改变网页,这样网页内容就会更新了。

  可以到 W3School 上体验几个示例感受一下:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp。

1. 实例引入

  浏览网页的时候,我们会发现很多网页都有下滑查看更多的选项。比如,拿微博来说,以我的主页为例:https://m.weibo.cn/u/2830678474,切换到微博页面,一直下滑,可以发现下滑几个微博之后,再向下就没有了,转而会出现一个加载的动画,不一会儿下方就继续出现了新的微博内容,这个过程其实就是 Ajax 加载的过程,如图所示。

  我们注意到页面其实并没有整个刷新,也就意味着页面的链接没有变化,但是网页中却多了新内容,也就是后面刷出来的新微博。这就是通过 Ajax 获取新数据并呈现的过程。

2. 基本原理

  初步了解了 Ajax 之后,我们再来详细了解它的基本原理。发送 Ajax 请求到网页更新的这个过程可以简单分为以下 3 步:

  1、发送请求   2、解析内容   3、渲染网页   下面我们分别来详细介绍一下这几个过程。

2.1 发送请求

  我们知道 JavaScript 可以实现页面的各种交互功能,Ajax 也不例外,它也是由 JavaScript 实现的,

var xmlhttp;
if (window.XMLHttpRequest) {
  //code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {
  //code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  }
};
xmlhttp.open("POST", "/ajax/", true);
xmlhttp.send();

  这是 JavaScript 对 Ajax 最底层的实现,实际上就是新建了 XMLHttpRequest 对象,然后调用 onreadystatechange 属性设置了监听,然后调用 open 和 send 方法向某个链接(也就是服务器)发送了请求。前面用 Python 实现请求发送之后,可以得到响应结果,但这里请求的发送变成 JavaScript 来完成。由于设置了监听,所以当服务器返回响应时,onreadystatechange 对应的方法便会被触发,然后在这个方法里面解析响应内容即可。

2.2 解析内容

  得到响应之后,onreadystatechange 属性对应的方法便会被触发,此时利用 xmlhttp 的 responseText 属性便可取到响应内容。这类似于 Python 中利用 requests 向服务器发起请求,然后得到响应的过程。那么返回内容可能是 HTML,可能是 JSON,接下来只需要在方法中用 JavaScript 进一步处理即可。比如,如果是 JSON 的话,可以进行解析和转化。

2.3 渲染网页

  JavaScript 有改变网页内容的能力,解析完响应内容之后,就可以调用 JavaScript 来针对解析完的内容对网页进行下一步处理了。比如,通过document.getElementById().innerHTML 这样的操作,便可以对某个元素内的源代码进行更改,这样网页显示的内容就改变了,这样的操作也被称作 DOM 操作,即对网页文档进行操作,如更改、删除等。

  上例中,document.getElementById("myDiv").innerHTML=xmlhttp.responseText 便将 ID 为 myDiv 的节点内部的 HTML 代码更改为服务器返回的内容,这样 myDiv 元素内部便会呈现出服务器返回的新数据,网页的部分内容看上去就更新了。

  我们观察到,这 3 个步骤其实都是由 JavaScript 完成的,它完成了整个请求、解析和渲染的过程。

  再回想微博的下拉刷新,这其实就是 JavaScript 向服务器发送了一个 Ajax 请求,然后获取新的微博数据,将其解析,并将其渲染在网页中。

  因此,我们知道,真实的数据其实都是一次次 Ajax 请求得到的,如果想要抓取这些数据,需要知道这些请求到底是怎么发送的,发往哪里,发了哪些参数。如果我们知道了这些,不就可以用 Python 模拟这个发送操作,获取到其中的结果了吗?

  1. 总结   本节我们简单了解了 Ajax 请求的基本原理和带来的页面加载效果,下一节我们来介绍下怎么来分析 Ajax 请求。

标签:xmlhttp,请求,一步,JavaScript,爬虫,Ajax,网页,页面
From: https://blog.51cto.com/u_15930659/5996798

相关文章

  • 爬虫学习笔记
    1.基本步骤 2.案例  -1.爬取指定词条对应的搜索页面    -2.爬取百度翻译的数据   -3.爬取豆瓣排行榜信息(带分析)  获取url和请求方法,url截......
  • 关于服务端反爬虫的限制及告警方案
     前言    当前对于一些大型网站的开放式服务,有相当一部分流量都是爬虫程序导致,大概占比在20%左右,爬虫程序会增加服务端数据及流量开销、内部资料外泄等很多问题......
  • python爬虫
    信息表示方式Python库静态网页urlib、requests、BeautifulSoup、re动态网页Selenium和PhantomJS爬虫框架Scrapy数据存储CSV文件、TXT文本或JSON......
  • 爬虫.第三篇 文本框输入
    这一篇介绍如何自动化地在网站https://www.byhy.net/_files/stock1.html的查询框中输入股票名称来查询股票代码。首先打开该网站,按下F12,进入开发者页面按下图所示先......
  • python网络爬虫数据解析之正则
    本节内容,讲解爬取网络图片,利用正则匹配图片地址请求网页之后,响应部分内容如下图: 1时间:2023/1/710:422功能描述31.进行指定标签的定位42.标签或者标签对......
  • 爬虫模块——数据解析之bs4模块
    目录模块bs4(beautifulSoup)基本概念基本使用模块bs4(beautifulSoup)基本概念BeautifulSoup是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现......
  • 解释 AJAX 中请求的不同就绪状态
    AJAX代表异步JavaScript和XML。它是一组用于创建交互式Web应用程序的Web开发技术。AJAX允许网页与服务器通信,而无需重新加载页面。就绪状态是处理AJAX请求的重......
  • 一步一步实现若依框架--2.1实现多数据源
    在项目中使用到了若依,想从头实现一下。思路就是把项目中涉及到的知识内容单独拎出来理解和做测试,然后再合到系统里去,重点的地方会将涉及到的知识进行总结和扩展。顺序......
  • AJAX跨域请求的理解,JAVA
    1.浏览器的同源策略  目前所有浏览器都由同源策略      什么是同源策略:   协议、域名、端口都一直的uri称为“同源”       不同源之间存在以下......
  • 爬虫基本概念-分类及http协议
    1.爬虫分类:1)通用爬虫:抓取系统重要组成部分,抓取的是一整张页面数据。2)聚焦爬虫:建立在通用爬虫的基础之上。抓取的是页面中特定的局部内容3)......