Ajax基本原理

---

一、Ajax是什么？

• Ajax，全称为Asychronous Javascript and XML,异步 JavaScript 和 XML.它是一种浏览器的请求方式。
• Ajax可以保证在页面无需刷新更新数据和不更改链接的条件下，浏览器与服务器进行数据交换进而更新网页。
• 使用Ajax技术，那么浏览器从Web服务器获取信息时，页面不需要重新加载即可完成，浏览器不需要单独的页面请求就可以实现与Web服务器进行信息交互！
• 具体而言，比如我们用的微博，今日头条App等，我们只需要向下滚动就可以获得新的页面，这个过程其实就是通过ajax实现的。

二、Ajax实现步骤

1.创建XMLHttpRequest对象

#XMLHttpRequest对象用在后台与服务器进行数据交换
variable=new XMLHttpRequest();
#此为老版本创建对象形式（IE5,IE6）
variable=new ActiveXObject("Microsoft.XMLHTTP");

#具体代码如下：
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");
  }

2.由向服务器发送请求

#提前定义一个XMLHttpRequest对象的onreadystatechange函数，这个函数是当服务器返回响应后便会被触发。
#例如：调用document.getElementById（）方法可以对某个元素的源代码进行更改，进而网页显示内容也会被改变
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
#即为发送请求，‘true‘表示调用onreadystatechange函数
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

3.服务器响应

具体而言，服务器响应分为responseText和responseXML两种，上面函数使用的是responseText
xmlhttp.responseText返回字符串格式数据
xmlhttp.responseXML返回XML格式数据

4.XHR readyState

发送请求到服务器，浏览器需要执行一些基本的响应任务，这便借助于XMLHttpRequest的三个属性
（a）XMLHttpRequest.onreadystatechange:
用于存储函数，每当readyState 改变时，就会触发 onreadystatechange 事件;
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化；

（b）XMLHttpRequest.readyState:
存有 XMLHttpRequest 的状态,用数学来表示，0: 请求未初始化；1: 服务器连接已建立；
2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪

（c）XMLHttpRequest.status：
同样用数字表示状态，200：‘OK’，404: 未找到页面

注意，以上的步骤是由执行JavaScript来实现完成，每向下获得一个新的页面，JavaScript就向服务器发送一个新的请求，获得数据并解析渲染呈现到用户端。

---

三、处理Ajax

• 使用Ajax技术，html网页上的内容只有执行（浏览器执行）JavaScript之后才能显示，使用传统方式的爬虫去获取网页内容只能获得执行（浏览器执行）JavaScript之前的网页内容，所以处理使用Ajax技术的网页有两种方法

1.直接从JavaScript代码里抓取内容；
2.使用python 的第三方库执行JavaScript，进而获得真正人操作获得浏览器内容；