Ajax【温故而知新-Javascript】使用 Ajax

以此事例中的脚本扩大了用户所按按钮的情节,把它附加到 http://127.0.0.1:8080/
上,然后尝试生成Ajax请求(如 http://127.0.0.1:8080/apples)。这里会从
http://localhost:63342/HTML5/ajax/ajax-06.html 载入此文书档案,那就象征脚本正在准备生成一个跨源请求。

 

 那里只展现了HTTP方法和呼吁的U奥迪Q3L。要使那些请求能顺风工作,服务器端必须由应用程序能明了那么些请求,并将它转变成一段合适的多少以发送回服务器。假设想删除数据,可以这么写:

设置标头的方法和前面包车型客车事例一样,但这次使用的标头是
Cache-Control,而想要的值是
no-cache。放置那条语句后,假诺由此Ajax请求的内容产生了改变,就会在下三遍呼吁文书档案时呈现出来。

5. 扭转跨源Ajax请求

当服务器收到到三个伸手,它会先写入开端的响应标头,暂停3分钟后再形成全体响应。上边代码体现了何等在浏览器上利用
XMLHttpRequest 的刹车功效:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置一个请求标头</title>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<div id="target">Press a button</div>

<script>
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;
    function handleButtonPress(e){
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("GET", e.target.innerHTML+".html");
        httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");
        httpRequest.send();
    }

    function handleError(e){
        displayErrorMsg("Error event",httpRequest.status+httpRequest.statusText);
    }

    function handleResponse(){
        if(httpRequest.readyState == 4 && httpRequest.status == 200){
            document.getElementById("target").innerHTML = httpRequest.responseText;
        }
    }
</script>
</body>
</html>

用作预备,上边代码显示了三个HTML文书档案,它含有的脚本会尝试生成跨源请求:

其次类标题是从应用程序的角度来看的难点,而非 XMLHttpRequest
对象。它们发出于请求成功发送至服务器,服务器收到请求、进行拍卖并转移响应,但该响应并不指向您期望的始末。例如,借使请求的URAV4L
不存在,那类难点就会发生。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Apples</title>
    <style>
        img { float:left;padding:2px;margin:5px;border: medium double black;background-color: lightgrey; width: 100px;height: 100px;}
    </style>
</head>
<body>
<p>
    <img src="../imgs/apple.png"/>
    Page for apples.
</p>
</body>
</html>

剧本尝试连接的服务器运维的是 Node.js。代码如下,把它保存在了3个名为
fruitselector.js 的文件里:

 

XMLHttpRequest 通过 abort 事件和 readystatechange
事件给出中止信号。在那一个事例中,响应了 abort
事件,并立异了id为target的div成分中的内容,以此申明请求已被搁浅。效果图如下:

5.2 高级CORS功能

成效图如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XMLHttpRequest定义的一次性事件</title>
    <style>
        table {margin: 10px;border-collapse: collapse; float: left;}
        div{margin: 10px;}
        td,th{padding: 4px;}
    </style>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<table id="events" border="1"></table>
<div id="target">
    Press a button
</div>

<script type="application/javascript">
    var buttons = document.getElementsByTagName("button");
    for(var i=0; i<buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;
    function  handleButtonPress(e){
        clearEventDetails();
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;

        httpRequest.onerror = handleError;
        httpRequest.onload = handleLoad;;
        httpRequest.onloadend = handleLoadEnd;
        httpRequest.onloadstart = handleLoadStart;;
        httpRequest.onprogress = handleProgress;

        httpRequest.open("GET", e.target.innerHTML+".html");
        httpRequest.send();
    }

    function handleResponse(e){
        displayEventDetails("readystate("+httpRequest.readyState+")")
        if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){
            document.getElementById("target").innerHTML = e.target.responseText;
        }
    }

    function handleError(e){ displayEventDetails("error",e);}
    function handleLoad(e){ displayEventDetails("load",e);}
    function handleLoadEnd(e){ displayEventDetails("loadend",e);}
    function handleLoadStart(e){ displayEventDetails("loadstart",e);}
    function handleProgress(e){ displayEventDetails("progress",e);}

    function clearEventDetails(){
        document.getElementById("events").innerHTML = "<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th>";
    }

    function displayEventDetails(eventName,e){
        if(e){
            document.getElementById("events").innerHTML
                    +="<tr><td>"+eventName+"</td><td>"+ e.lengthComputable+"</td><td>"+ e.loaded+"</td><td>"+ e.total+"</td></tr>";
        }else {
            document.getElementById("events").innerHTML += "<tr><td>"+eventName+"</td><td>NA</td><td>NA</td><td>NA</td></tr>";
        }
    }
</script>
</body>
</html>

其次类错误发生在呼吁已转移,但别的方面出错开上下班时间。为了模仿那类难题,在演示中添加了一个标签为
Bad Host (错误主机)的按钮。当那个按钮被按下后,就会调用 open
方法访问三个不可用的 U卡宴L:

此地的关键在于通过HTTP方法表达出您想让服务器做哪些,而不是把它用某种方式编码进U奥迪Q7L。

在那几个例子中,只是不难的呈现了status和statusText的值。而在真的的应用程序里,供给以一种有用且有含义的艺术进行复原(比如呈现备用内容或警示用户卓殊,具体看哪一种更契合应用程序)。

来源:《HTML5权威指南》(《The Definitive Guide to
HTML5》)

PS:这一国策的目标是降低跨站脚本攻击(cross-site
scripting,简称CSS)的危害,即诱导浏览器(或用户)执行恶意脚本。

调度那么些事件时,浏览器会对 readystatechange 事件选取正规的 伊芙nt
对象,对别的事件则动用 Progress伊芙nt 对象。 Progress伊夫nt 对象定义了
伊芙nt 对象的兼具成员,并追加了下图中介绍的这个成员:

这一进度本身没有错误(因为请求已形成),要求依照status属性来分明产生了怎么样。当呼吁有些存在的文书档案时,会取得404那个状态码,它的意趣是服务器不恐怕找到请求的文档。能够看到示例是哪些处理200(意思是OK)以外的状态码的:

PS:仍是可以吧 Access-Control-Allow-Origin
标头设置成二个星号(*),意思是同意任何来源的跨源请求。使用那个装置此前应当密切考虑这么做的安全隐患。

4.2 禁止使用内容缓存

 httpRequest.open("GET","http://")

XMLHttpRequest 对象定义了2个能够中止请求的章程,如下图所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中止请求</title>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<div>
    <button id="abortbutton">Abort</button>
</div>
<div id="target">Press a button</div>

<script>
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;

    function handleButtonPress(e){
        if(e.target.id == "abortbutton"){
            httpRequest.abort();
        }else {
            httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = handleResponse;
            httpRequest.onabort = handleAbort;
            httpRequest.open("GET","http://127.0.0.1:8080/"+ e.target.innerHTML);
            httpRequest.send();
            document.getElementById("target").innerHTML = "Request Started";
        }
    }

    function handleResponse(){
        if(httpRequest.readyState == 4 && httpRequest.status == 200){
            document.getElementById("target").innerHTML = httpRequest.responseText;
        }
    }

    function handleAbort(){
        document.getElementById("target").innerHTML = "Request Aborted";
    }
</script>
</body>
</html>

CO卡宴S规范定义了众多额外的标头,可用来精细化控制跨域请求,包蕴限制请求能够利用的HTTP方法。这几个高级功效供给实行二次先行请求(preflight
request),即浏览器先向服务器发送叁个请求来规定有怎么样限制,然后再发送请求来获取数据本人。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试生成跨源请求的脚本</title>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<div id="target">Press a button</div>

<script>
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;

    function handleButtonPress(e){
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("GET","http://127.0.0.1:8080/"+ e.target.innerHTML);
        httpRequest.send();
    }

    function handleResponse(){
        if(httpRequest.readyState == 4 && httpRequest.status == 200){
            document.getElementById("target").innerHTML = httpRequest.responseText;
        }
    }
</script>
</body>
</html>

末尾一类错误爆发于请求成功做到(从XMLHttpRequest对象的角度看),但从不回到您想要的数码时。为了构建那类难题,在上边示例中添加八个认证标签为
cucumber 的 button 。按下那个按钮会转移类似于 apples、cherries 和
bananas 按钮这样的央求U福睿斯L,然而在服务器上不存在 cucumber.html 那个文书档案。

运用XMLHttpRequest对象,能够安装发送给服务器的恳求标头(Header)和读取服务器响应里的标头。

Ajax 1

其次个能够添加到Ajax请求上的有用标头是Cache-Control,它在编辑和调剂脚本时尤其有用。一些浏览器会缓存通过Ajax请求所获得的始末,在浏览会话时期不会再请求它。对在前边的事例而言,意味着
apples.html、cherries.html和bananas.html
上的改变不会立刻反映到浏览器中。上面代码显示了足以什么设置标头来幸免那点:

Access-Control-Allow-Origin
标头钦赐了某些来源应该被允许对此文书档案生成跨源请求。若是标头里钦赐的发源当前文书档案的根源匹配,浏览器就会加载和处理该响应所包涵的多少。

2. 使用 Ajax 事件

 

var http = require('http');
http.createServer(function (req,res){
    console.log("[200] "+req.method+" to "+req.url);

    res.statusCode = 200;
    res.setHeader("Content-Type","text/html");

    var origin = req.headers["origin"];
    if(origin.indexOf("localhost:63342") > -1){
        res.setHeader("Access-Control-Allow-Origin",origin)
    }

    res.write('<html><head><title>Fruit Total</title></head><body>');
    res.write('<p>');
    res.write('You selectd '+req.url.substring(1));
    res.write('</p></body></html>');
    res.end();
}).listen(8080);

私下认可意况下,浏览器限制脚本只可以在它们所属文书档案的发源内生成Ajax请求。而来自由U途达L中的协议、主机名和端口号组成。那就表示当从http://titan
载入了二个文书档案后,文书档案内含的本子经常无法转移对 http://titan:8080
的乞请,因为第③个U汉兰达L的端口号是不相同的,所以处在文书档案来源之外。从3个源于到另1个出自的Ajax请求被称呼跨源请求(cross-origin
request)。

树立和探讨1个简练的演示之后,能够初始长远掌握 XMLHttpRequest
对象帮助的遵从,以及怎么着在乞请中应用它们了。起源正是第2级标准里定义的那贰个额外交事务件:

此地修改了服务器端的本子,让它只在伸手包括Origin标头并且值里有 localhost:63342
时才设置 Access-Control-Allow-Origin
响应标头。那是一种万分简短的请求来源检查措施,但足以依照具体品种的上下文环境来调动那种措施,使它更规范。

catch
子句让您有机遇从错误中回复。能够选拔提示用户输入四个值,也得以回退至暗中同意的U奥迪Q7L
,或是不难地放弃那一个请求。 在那一个例子中,仅仅调用了 displayErrorMsg
函数来突显错误消息。

 第贰个难题是UTiggoL和生成请求的富有分裂的源点,在暗许意况下那是不允许的。你屡见不鲜只可以向载入脚本的同源U君越L发送Ajax请求。浏览器报告以此难点时或然会抛出
Error
或许触发error事件,分歧浏览器的处理措施互不相同。不一样浏览器还会在不相同的时点检查来源,那就意味着不肯定总是能观望浏览器对相同难题卓越展示。能够行使跨站能源专业(CO奥迪Q5S,克罗丝-Origin
Resource Sharing)来绕过同源限制。

那是一个万分简单的服务器:它依据客户端请求的U奥迪Q5L生成一小段HTML文书档案。距离的话,假设客户端请求了 http://127.0.0.1:8080/apples
,那么客户端就会生成并回到下列HTML文书档案:

趁着用户点击各类水果按钮,浏览器会异步执行并取回所请求的文书档案,而主文档不会被重新加载。那就是压倒元稹和白居易的
Ajax 行为。

Ajax 宗旨标准的称呼继承于用来确立和发起呼吁的 Javascript
对象:XMLHttpRequest
。这些正式有多少个等级。全部主流浏览器都落到实处了第拔尖,它象征了根基级其他功能。第③级扩展了早期的正儿八经,纳入了附加的事件和一部分效益来让它更易于与
form 成分合作,并且协助部分有关专业。

能够透过 getResponseHeader 和 getAllResponseHeaders
方法来读取服务器响应有些Ajax请求时发送的HTTP标头。在大部状态下,你不供给关切标头里有何,因为它们是浏览器和服务器之间交互事务的组成都部队分。下面代码展示了何等接纳那天性情:

遵从现行反革命那些样子,show-ajax-css.html
里的本子无法从服务器获取它想要的数量。试运作,反映难题如下图所示:

Ajax 的关键在于 XMLHttpRequest
对象,而精通这几个指标的艺术是看个例子。上面代码浮现了 XMLHttpRequest
对象的着力用法:

以此UENVISIONL 存在多个难点。第①个难题是主机名不能够被 DNS
解析,由此浏览器不能转移服务器连接。这些题材领会 XMLHttpRequest
对象早先变化请求时才会变得精晓,由此它会以三种方式发出错误信号。固然您注册了3个error 事件的监听器,浏览器就会向你的监听函数发送一个 伊夫nt
对象。以下是出现说法中利用的函数:

3. 处理错误

用作CO瑞虎S的一片段,浏览器会给请求添加三个Origin标头以表明当前文书档案的来自。能够经过它来更灵活地安装
Access-Control-Allow-Origin 标头的值,代码如下所示:

Ajax 2

function handleError(e){
        displayErrorMsg("Error event",httpRequest.status + httpRequest.statusText);
    }
<html><head><title>Fruit Total</title></head><body><p>You selectd apples</p></body></html>

 

6. 搁浅请求

Ajax 3

1. Ajax起步

4. 到手和安装标头

       try{
            ...
            httpRequest.open("GET","http://")
            ...
            httpRequest.send();
        }catch(error){
            displayErrorMsg("try/catch",error.message)
        }        

4.1 覆盖请求的HTTP方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>处理Ajax错误</title>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
    <button id="badhost">Bad Host</button>
    <button id="badurl">Bad URL</button>
</div>
<div id="target">Press a button</div>
<div id="errormsg"></div>
<div id="statusmsg"></div>

<script type="application/javascript">
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;

    function handleButtonPress(e){
        clearMessages();
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.onerror = handleError;
        try{
            switch(e.target.id){
                case "badhost":
                    httpRequest.open("GET","http://www.ycdoitt.com/nopage.html")
                    break;
                case "badurl":
                    httpRequest.open("GET","http://")
                    break;
                default:
                    httpRequest.open("GET", e.target.innerHTML + ".html")
                    break;
            }
            httpRequest.send();
        }catch(error){
            displayErrorMsg("try/catch",error.message+"("+error.name+")")
        }
    }

    function handleError(e){
        displayErrorMsg("Error event",httpRequest.status + httpRequest.statusText);
    }

    function handleResponse(){
        if(httpRequest.readyState == 4){
            var target = document.getElementById("target");
            if(httpRequest.status == 200){
                target.innerHTML = httpRequest.responseText;
            }else{
                document.getElementById("statusmsg").innerHTML
                        = "Status:" + httpRequest.status +" "+ httpRequest.statusText;
            }
        }
    }

    function displayErrorMsg(src,msg){
        document.getElementById("errormsg").innerHTML = src + ": " + msg;
    }

    function clearMessages(){
        document.getElementById("errormsg").innerHTML = "";
        document.getElementById("statusmsg").innerHTML = "";
    }
</script>
</body>
</html>

 

急需处理的首先类题材是向 XMLHttpResquest
对象传递了错误的多少,比如格式不科学的 USportageL
。它们然而不难生出在变化基于用户输入的URL
时。为了模仿那类难题,上边文书档案中有添加叁个标签 Bad UOdysseyL
(错误的U奥迪Q3L)的button 。按下那些按钮会以以下格局调用 open 方法:

Ajax 4

Ajax 5

Ajax 6

 

 

 

httpRequest.open("GET","http://myserver/records/freeman/adam");

PS:覆盖HTTP需求劳务器端的Web应用程序框架能明了X-HTTP-Method-Override那些惯例,并且你的劳动器端应用程序要设置成能寻找和领悟那三个用的较少的HTTP方法。

 

为了演示这些效应,修改 fruitselector.js 那段 Node.js
脚本来引入一个2秒延缓,代码如下所示:

给服务器响应添加那么些标头之后,show-ajax-css.html
文书档案中的脚本就可见呼吁和接受来着服务器的多少了,如下图所示:

var http = require('http');
http.createServer(function (req,res){
    console.log("[200] "+req.method+" to "+req.url);
    res.writeHead(200,"OK",{
        "Content-Type":"text/html"
        });
    res.write('<html><head><title>Fruit Total</title></head><body>');
    res.write('<p>');
    res.write('You selectd '+req.url.substring(1));
    res.write('</p></body></html>');
    res.end();
}).listen(8080);

下边代码呈现了怎么着行使这一个事件: 

故此,消除办法是为服务器重回浏览器的响应音信添加二个标头,代码如下所示:

HTTP标准一般被用于在网络上呼吁和传导HTML文书档案,它定义了众多艺术。超越50%人都晓得GET和POST,因为它们的选拔最为常见。可是还设有任何部分方法(包罗PUT和DELETE),那个HTTP方法用来给向服务器请求的U本田CR-VL赋予意义,而且那种用法正在显示回升趋势。举个例子,假使想查看某条用户记录,可以生成那样一个呼吁:

4.3 读取响应标头

httpRequest.open("DELETE","http://myserver/records/freeman/adam");

此地给文书档案添加了多个Abort(中止按钮),它通过调用 XMLHttpRequest
对象上的abort方法来刹车举办中的请求。因为在服务器端引入了一段延迟,所以有充足的年华来实行它。

var http = require('http');
http.createServer(function (req,res){
    console.log("[200] "+req.method+" to "+req.url);
    res.writeHead(200,"OK",{
        "Content-Type":"text/html",
        "Access-Control-Allow-Origin":"http://localhost:63342"
        });
    res.write('<html><head><title>Fruit Total</title></head><body>');
    res.write('<p>');
    res.write('You selectd '+req.url.substring(1));
    res.write('</p></body></html>');
    res.end();
}).listen(8080);

 

这一个事件超过33.33%会在呼吁的某一一定时刻点上接触。 readystatechange 和
progress 那多少个事件是区别,它们得以频繁触发以提供进程更新。

 

此例的突显效果如下图所示:

3.2 处理请求错误

 

5.1 使用 Origin 请求标头

以此政策的题材在于它一刀切地取缔了跨源请求。幸亏,跨源能源共享(克罗斯-Origin
Resource Sharing,CO陆风X8S)规范提供了一种合法的章程来变化跨源请求。

当某些按钮被按下后,示例中的脚本会载入另二个HTML文书档案,并让它称作div成分的内容。别的的文书档案一共多少个,分别对应button成分上的认证标签:apples.html、lemons.html
和 bananas.html。

不以为奇不须要丰裕或修改Ajax请求里的标头。浏览器知道需求发送些什么,服务器也亮堂怎样开始展览响应。可是,有二种意况各异。第1种是
X-HTTP-Method-Override 标头。

        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("GET", e.target.innerHTML+".html");
        httpRequest.setRequestHeader("Cache-Control","no-cache");
        httpRequest.send();

Ajax 7

在这些事例中,有使用XMLHttpRequest对象上的setRequestHeader方法来证明想让那几个请求以HTTP
DELETE方法的款式开始展览拍卖。请小心自身在调用open方法之后才设置了那几个标头。若是准备在open方法以前使用setRequestHeader方法,XMLHttpRequest对象就会抛出3个不当。

那是一种会阻碍请求执行的荒唐,而 XMLHttpRequest
对象会发出那类事件时抛出3个不当。这就意味着要求用一条 try…catch
语句来包围设置请求的代码,就像是这么:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XMLHttpRequest对象</title>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<div id="target">
    Press a button
</div>

<script type="application/javascript">
    var buttons = document.getElementsByTagName("button");
    for(var i=0; i<buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    //脚本会调用此函数以响应 button 控件的 click 事件
    function  handleButtonPress(e){
        //创建一个新的 XMLHttpRequest 对象
        var httpRequest = new XMLHttpRequest();
        //给 onreadystatechange 事件设置一个事件处理器
        httpRequest.onreadystatechange = handleResponse;
        //使用 open 方法来指定 HTTP 方法和需要请求的 URL (即告诉 httpRequest 对象你想要做的事)
        httpRequest.open("GET", e.target.innerHTML+".html");
        //这里没有向服务器发送任何数据,所以 send 方法无参数可用
        httpRequest.send();
    }

    //处理响应
    //一旦脚本调用了 send 方法,浏览器就会在后台发送请求到服务器。因为请求是在后台处理的,所以Ajax 依靠事件来通知这个请求的进展情况。
    function handleResponse(e){
        //当 onreadystatechange 事件被触发后,浏览器会把一个 Event 对象传递给指定的处理函数,target 属性则会被设为与此事件关联的XMLHttpRequest
        if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //请求成功
            document.getElementById("target").innerHTML = e.target.responseText; //显示被请求文档的内容
        }
    }
</script>
</body>
</html>

选取 Ajax 时必须注意两类错误。它们中间的差别源于视角各异。

 

那多个附加的文书档案格外不难,在那之中apples.html
如下:

3.3 处理应用程序错误

Ajax 8

var http = require('http');
http.createServer(function (req,res){
    console.log("[200] "+req.method+" to "+req.url);

    res.statusCode = 200;
    res.setHeader("Content-Type","text/html");

    setTimeout(function(){        
    var origin = req.headers["origin"];
    if(origin.indexOf("localhost:63342") > -1){
        res.setHeader("Access-Control-Allow-Origin",origin)
    }    
    res.write('<html><head><title>Fruit Total</title></head><body>');
    res.write('<p>');
    res.write('You selectd '+req.url.substring(1));
    res.write('</p></body></html>');
    res.end();
    },2000);


}).listen(8080);

此例演示结果如下:

基于此图能够看看开发服务器正在周转的Web服务器软件是 英特尔liJ IDEA
15.0.4,最终修改 apples.html 文档的时辰是六月1二十三十二日。

Ajax 9

3.1 处理装置错误

Ajax 是当代Web
应用程序开发的一项首要工具。它让你能向服务器异步发送和接收数据,然后用
Javascript 解析。 Ajax 是 Asynchronous JavaScript and XML
(异步JavaScript 与XML)的缩写。

            if(httpRequest.status == 200){
                target.innerHTML = httpRequest.responseText;
            }else{
                document.getElementById("statusmsg").innerHTML
                        = "Status:" + httpRequest.status +" "+ httpRequest.statusText;
            }

当那类错误产生时,能从 XMLHttpRequest
对象得到何种程度的音信取决于浏览器,遗憾的是当先52%地方下,会收获的值为
0的 status和空域的 statusText 值。

PS:扶助CO奥迪Q3S要求浏览器必须在联系服务器和获得响应标头之后接纳跨源安全策略,那就代表正是响应因为缺少供给的标头或钦命了不一致的域而被撇下,请求也已被发送过了。那种形式和没有兑现CO兰德酷路泽S的浏览器格外例外,后者只会不难的阻碍请求,不会去联系服务器。

Ajax 10

第叁类错误是从 XMLHttpRequest
对象的角度看到的题目:有个别因素阻止了请求发送到服务器。例如 DNS
无法解析主机名,连接请求被驳回,或许UPAJEROL无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <meta name="author" content="叶超Luka" />
    <meta name="description" content="A simple example" />
    <title>读取响应标头</title>
    <link href="../img/ycdoit.ico" type="image/x-icon" rel="shortcut icon" />
    <style>
        #allheaders,#ctheader{border: medium solid black;padding: 2px;margin: 2px;}
    </style>
</head>
<body>
<div>
    <button>apples</button>
    <button>bananas</button>
    <button>lemons</button>
</div>
<div id="ctheader"></div>
<div id="allheaders"></div>
<div id="target">Press a button</div>

<script>
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = handleButtonPress;
    }

    var httpRequest;
    function handleButtonPress(e){
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("GET", e.target.innerHTML+".html");
        httpRequest.setRequestHeader("Cache-Control","no-cache");
        httpRequest.send();
    }

    function handleResponse(){
        if(httpRequest.readyState==2){
            document.getElementById("allheaders").innerHTML = httpRequest.getAllResponseHeaders();
            document.getElementById("ctheader").innerHTML = httpRequest.getResponseHeader("Content-Type");
        }else if(httpRequest.readyState == 4 && httpRequest.status == 200){
            document.getElementById("target").innerHTML = httpRequest.responseText;
        }
    }
</script>
</body>
</html>
httpRequest.open("GET","http://www.ycdoitt.com/nopage.html")

Ajax 11

那是事先示例的一种转移,为部分轩然大波注册了处理函数,并在1个 table
成分里为拍卖的种种事件都创制了一条记下。从下图中得以见见 Firefox
浏览器是什么触发这一个事件的。

以那种措施接纳HTTP方法的题材在于:许多主流的Web技术只协理GET和POST,而且不少防火墙只同意GET和POST请求通过。有一种惯用的做法能够避开那一个限制,就是利用
X-HTTP-Method-Override标头来钦命想要使用的HTTP方法,但花样上市在出殡和埋葬贰个POST请求。代码演示如下:

有二种方法得以处理这么些不当,如上边代码所示:

相关文章