Ajax

Posted on 2018-10-11 10:38  eilinge  阅读(132)  评论(0编辑  收藏  举报

  最近一直在学习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>

效果图: