最近一直在学习scrapy的模拟网页获取源码slenium,里面涉及的Ajax异步加载。看了资料(Ajax菜鸟教程)有了一些了解,就来给大家分享一下成果。也希望大家能够"每天多学习一点,人就进步一点"。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
AJAX是基于现有的Internet标准，并且联合使用它们：
???XMLHttpRequest 对象 (异步的与服务器交换数据) ???JavaScript/DOM (信息显示/交互) ???CSS (给数据定义样式) ???XML (作为转换数据的格式)
XMLHttpRequest 对象
???所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 ???XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ???创建 XMLHttpRequest 对象的语法： ???????variable=new XMLHttpRequest(); ???老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： ???????variable=new ActiveXObject("Microsoft.XMLHTTP");向服务器发送请求
???xmlhttp.open("GET","ajax_info.txt",true); ???xmlhttp.send(); ???????open(method,url,async) ???规定请求的类型、URL 以及是否异步处理请求。 ???????method：请求的类型；GET 或 POST ???????url：文件在服务器上的位置 ???????async：true（异步）或 false（同步） ???setRequestHeader(header,value) ???向请求添加 HTTP 头。 ???????header: 规定头的名称 ???????value: 规定头的值 ???send(string) ???将请求发送到服务器。 ???????string：仅用于 POST 请求GET 还是 POST？
???与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 ???然而，在以下情况中，请使用 POST 请求： ???????无法使用缓存文件（更新服务器上的文件或数据库） ???????向服务器发送大量数据（POST 没有数据量限制） ???????发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 ???属性 ???????????????????????描述 ???responseText ???????获得字符串形式的响应数据。 ???responseXML ???????获得 XML 形式的响应数据。
onreadystatechange 事件
???当请求被发送到服务器时，我们需要执行一些基于响应的任务。 ???每当 readyState 改变时，就会触发 onreadystatechange 事件。 ???readyState 属性存有 XMLHttpRequest 的状态信息。 ???????onreadystatechange ???存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 ???readyState ???????????????????存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 ???????????????????????????????????????0：请求未初始化（还没有调用 open()）。 ???????????????????????????????????????1：请求已经建立，但是还没有发送（还没有调用 send()）。 ???????????????????????????????????????2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 ???????????????????????????????????????3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 ???????????????????????????????????????4：响应已完成；您可以获取并使用服务器的响应了。 ???status
xmlhttp.status的值及解释：
???100——客户必须继续发出请求 ???101——客户要求服务器根据请求转换HTTP协议版本 ???200——交易成功 ???201——提示知道新文件的URL ???202——接受和处理、但处理未完成 ???203——返回信息不确定或不完整 ???204——请求收到，但返回信息为空 ???205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 ???206——服务器已经完成了部分用户的GET请求 ???300——请求的资源可在多处得到 ???301——删除请求数据 ???302——在其他地址发现了请求数据 ???303——建议客户访问其他URL或访问方式 ???304——客户端已经执行了GET，但文件未变化 ???305——请求的资源必须从服务器指定的地址得到 ???306——前一版本HTTP中使用的代码，现行版本中不再使用 ???307——申明请求的资源临时性删除 ???400——错误请求，如语法错误 ???401——请求授权失败 ???402——保留有效ChargeTo头响应 ???403——请求不允许 ???404——没有发现文件、查询或URl ???405——用户在Request-Line字段定义的方法不允许 ???406——根据用户发送的Accept拖，请求资源不可访问 ???407——类似401，用户必须首先在代理服务器上得到授权 ???408——客户端没有在用户指定的饿时间内完成请求 ???409——对当前资源状态，请求不能完成 ???410——服务器上不再有此资源且无进一步的参考地址 ???411——服务器拒绝用户定义的Content-Length属性请求 ???412——一个或多个请求头字段在当前请求中错误 ???413——请求的资源大于服务器允许的大小 ???414——请求的资源URL长于服务器允许的长度 ???415——请求资源不支持请求项目格式 ???416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 ???417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 ???500——服务器产生内部错误 ???501——服务器不支持请求的函数 ???502——服务器暂时不可用，有时是为了防止发生系统过载 ???503——服务器过载或暂停维修 ???504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 ???505——服务器不支持或拒绝支请求头中指定的HTTP版本 ???????1xx:信息响应类，表示接收到请求并且继续处理 ???2xx:处理成功响应类，表示动作被成功接收、理解和接受 ???3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 ???4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 ???5xx:服务端错误，服务器不能正确执行一个正确的请求
二: 给大家看看源码:ajax_test.html
<!DOCTYPE html><html><head><meta charset="utf-8"><style>table,th,td { ?border : 1px solid black; ?border-collapse: collapse;}th,td { ?padding: 5px;}</style></head><body><h1>XMLHttpRequest 对象</h1><button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button><br><br><table id="demo"></table><script>function loadXMLDoc() { ?var xhttp; ??if (window.XMLHttpRequest) ???{ ???????// ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 ???????xmlhttp=new XMLHttpRequest(); ???} ???else ???{ ???????// IE6, IE5 浏览器执行代码 ???????xhttp=new ActiveXObject("Microsoft.XMLHTTP"); ???} ?xhttp.onreadystatechange = function() { ???if (this.readyState == 4 && this.status == 200) { ???????document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ???//获得字符串形式的响应数据,将响应文本插入id=‘myDiv‘的元素内 ???????myFunction(this); ???} ?}; ?xhttp.open("GET", "http://www.runoob.com/try/demo_source/cd_catalog.xml", true); ?xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader()
来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据 ?xhttp.send("fname=Henry&lname=Ford");}//当用户点击上面的"获取我收藏的 CD"这个按钮，就会执行 loadXMLDoc() 函数。loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，
并将请求发送到服务器。当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的 填充 id="demo" 的表格元素：function myFunction(xml) { ???????//回调函数 ?var i; ?var xmlDoc = xml.responseXML; ?var table="<tr><th>Artist</th><th>Title</th></tr>"; ?var x = xmlDoc.getElementsByTagName("CD"); ?for (i = 0; i <x.length; i++) { ???table += "<tr><td>" + ???x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + ???"</td><td>" + ???x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + ???"</td></tr>"; ?} ?document.getElementById("demo").innerHTML = table;}</script></body></html>xml文件:tests.xml
<!-- ?Edited by XMLSpy? ?--><CATALOG> ???<CD> ???????<TITLE>Empire Burlesque</TITLE> ???????<ARTIST>Bob Dylan</ARTIST> ???????<COUNTRY>USA</COUNTRY> ???????<COMPANY>Columbia</COMPANY> ???????<PRICE>10.90</PRICE> ???????<YEAR>1985</YEAR> ???</CD> ???<CD> ???????<TITLE>Hide your heart</TITLE> ???????<ARTIST>Bonnie Tyler</ARTIST> ???????<COUNTRY>UK</COUNTRY> ???????<COMPANY>CBS Records</COMPANY> ???????<PRICE>9.90</PRICE> ???????<YEAR>1988</YEAR> ???</CD> ???<CD> ???????<TITLE>Greatest Hits</TITLE> ???????<ARTIST>Dolly Parton</ARTIST> ???????<COUNTRY>USA</COUNTRY> ???????<COMPANY>RCA</COMPANY> ???????<PRICE>9.90</PRICE> ???????<YEAR>1982</YEAR> ???</CD></CATALOG>
效果图:
Ajax
原文地址：https://www.cnblogs.com/eilinge/p/9771101.html