网页qq抓取什么原理(什么是AJax?Ajax的基本原理初步链接Ajax全称为)

优采云 发布时间: 2022-03-24 12:00

  网页qq抓取什么原理(什么是AJax?Ajax的基本原理初步链接Ajax全称为)

  什么是 AJax?

  Ajax 代表 Asychronous JavaScript and XML,即异步 JavaScript 和 XML,它不是一种新的编程语言,而是一种利用现有标准的新方法,它可以与服务器交换数据而无需重新加载整个网页并更新数据一些网页。

  Ajax 应用程序

  以下为飞昌准大数据网页示例( ),在浏览器中打开链接,在输入框中输入“PEK”,点击【搜索】按钮,如下图:

  

  得到查询结果后,仔细观察查询前后的页面,尤其是URL地址栏。可以发现查询前后的 URL 没有变化,只是下面列表中的数据不同。这其实就是AJax的效果——在部署所有页面时,通过Ajax异步加载数据,实现部分数据更新。

  阿贾克斯基础

  在初步链接到 Ajax 之后,让我们进一步了解它的基本原理。向网页更新发送 Ajax 请求的过程可以简单分为以下 3 个步骤:

  发送请求。解析返回数据。渲染网页。

  根据步骤可以知道Ajax的流程如下:

  

  1. 发送请求

  我们知道JavaScript可以实现页面的各种交互功能。Ajax 也不例外,它的底层也是用 JavaScript 实现的。要使用Ajax技术,需要先创建一个XMLHttpRequest对象,否则无法实现异步传输。因此,要执行 Ajax,您需要执行以下代码。

  // JavaScript- 执行AJax代码

var xmlhttp;

if(window.XMLHttpRequest){

// IE7+ , Firefox、Chrome、Opera、Safari浏览器执行代码

xmlhttp = new XMLHttpRequest();

}else{

// IE6、IE5浏览器执行代码

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.open("GET","/try/demo_get2.php?fname-Hennry&lname=Ford" , true);

xmlhttp.send();

xmlhttp.open("POST","/try/demo_get2.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlen coded");

xmlhttp.send();

  为网页中某些事件的响应绑定异步操作:通过场景xmlhttp对象传输请求和携带数据。发送请求之前,需要定义请求对象的方法,提交给服务器处理请求的文件是什么,携带什么数据,判断是否是异步的。

  其中,和普通的Request提交数据一样,这里也有两种形式——GET和POST,在实践中可以根据需要独立选择。GET 和 POST 都向服务器提交数据,并且都从服务器获取数据。它们之间的区别如下:

  对于 GET 请求,浏览器会将 HTTP 头和数据一起发送,服务器响应 200(返回数据);对于POST,浏览器先发送header,服务器响应100 continue,浏览器发送数据,服务器响应200 OK(返回数据)。也就是说,GET 只需要一步,而 POST 需要两步——这就是为什么 GET 比 POST 更有效的原因。

  2. 解析请求

  服务器收到请求后,会将附加的参数作为输入传递给处理请求文件,然后根据传入的数据对文件进行处理,并通过Response对象回传最终结果。客户端根据xmlhttp对象获取Response的内容,返回的响应可能是HTML或者JSON。接下来,您只需要在方法中使用 JavaScript 进行进一步处理。

  比如用谷歌浏览器打开飞畅准大数据(),按【F12】打开调试模式。然后在页面的搜索框中输入“PEK”,点击【搜索】按钮。切换到调试面板中的【网络】选项卡,找到名为“airportCode”的请求,点击查看Ajax发起请求或返回的JSON数据。

  

  3. 呈现网页

  JavaScript具有改变网页内容的能力,所以通过Ajax请求获得返回的数据后,通过解析,可以调用JavaScript获取网页的指定DOM对象,进行更新、修改等数据处理。例如,通过 document.getElementById().innerHTML 操作,可以修改一个元素中的元素,从而改变网页上显示的内容。操作,如修改、删除等。

  Ajax方法分析

  这里再次以飞常准大数据()网页为例,说明在哪里寻找AJax请求。

  这里需要用到浏览器的开发者工具,下面以Chrome浏览器为例:

  第 1 步:用 Chrome 打开 URL。

  第二步:按【F12】键,弹出开发者工具。

  第三步:切换到【网络】选项卡,刷新当前页面,可以发现这里有很多条目。实际上,这些条目都是页面加载过程中浏览器与服务器之间发送请求和接收响应的记录,如图1所示。

  

  图1

  Ajax 有其特殊的请求类型,称为 xhr,即 Type 为 xhr。单击请求以查看其详细信息。

  

  图 2

  Step 4:点击【airportCode】请求,右侧会看到一些详细信息,如图3所示。

  

  图 3

  在请求分析的时候,如果发现条目太多,不方便直接找到xhr方法,可以点击【类型】选项,快速对请求进行过滤和分类。按类别查找 xhr 要快得多。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线