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

1.
准备朝服务器发送数据

Ajax 最广的均等格外用是通往服务器发送数据。最杰出的动静是自
客户端发送表单数据,即用户以form元素所蕴涵的顺序 input
元素里输入的值。下面代码展示了相同摆放简略的表单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本表单</title>
    <style>
        .table{display: table;}
        .row{display: table-row;}
        .cell{display: table-cell;padding: 5px;}
        .lable{text-align: right;}
    </style>
</head>
<body>
<form id="fruitform" method="post" action="http://127.0.0.1:8080/form">
    <div class="lable">
        <div class="row">
            <div class="cell lable">Apples:</div>
            <div class="cell"><input name="apples" value="5" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Bananas:</div>
            <div class="cell"><input name="bananas" value="2" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Cherries:</div>
            <div class="cell"><input name="cherries" value="20" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Total:</div>
            <div id="results" class="cell">0 items</div>
        </div>
    </div>
    <button id="submit" type="submit">Submit Form</button>
</form>
</body>
</html>

夫事例中之表单包含三个input元素和一个交由button
。这些input元素让用户可以指定三栽不同之说罢各自要预订多少,button则会将表单提交给服务器。

 

1.1 定义服务器

大庭广众,这里要为这些示例创建处理要的服务器。这里又同不行用Node.js,原因要是她可怜粗略,而且因此底凡Javascript。新建
fruitcalc.js脚本文件如下: 

var http = require('http');
var querystring = require('querystring');

function writeResponse(res,data){
    var total = 0;
    for(fruit in data){
        total += Number(data[fruit]);
    }
    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>'+total+' item ordered</p></body></html>');
    res.end();
}

http.createServer(function(req,res){
    console.log("[200] "+req.method+" to "+req.url);
    if(req.method == "OPTIONS"){
        res.writeHead(200,"OK",{
            "Access-Control-Allow-Header":"Content-Type",
            "Access-Control-Allow-Methods":"*",
            "Access-Control-Allow-Origin":"*"
        });
        res.end();
    }else if(req.url == '/form'&& req.method == 'POST'){
        var dataObj = new Object();
        var contentType = req.headers["content-type"];
        var fullBody = '';

        if(contentType){
            if(contentType.indexOf("application/x-www-form-urlencode") > -1){
                req.on('data',function(chunk){
                    fullBody += chunk.toString();
                });
                req.on('end',function(){
                    var dBody = querystring.parse(fullBody);
                    dataObj.apples = dBody["apples"];
                    dataObj.bananas = dBody["bananas"];
                    dataObj.cherries = dBody["cherries"];
                    writeResponse(res,dataObj);
                });
            }else if(contentType.indexOf("application/json") > -1){
                req.on('data',function(chunk){
                    fullBody += chunk.toString();
                });
                req.on('end',function(){
                    dataObj = JSON.parse(fullBody);
                    writeResponse(res,dataObj);
                });
            }
        }
    }
}).listen(8080);

本子中高亮部分:writeResponse函数。这个函数会当提取请求的阐发单值之后调用,它承担生产对浏览器的响应。当前,这个函数会创建简单的HTML文档,效果如下:

图片 1

本条响应很简单,实现力量是叫服务器计算起了用户通过form中各个input元素所订的水果总数。服务器得端脚本的其余部分负责解码客户端用Ajax发送的各种可能数量格式。

 

1.2 理解问题所在

上面的图清楚的叙述了相思如果因此Ajax解决之题材。

当提交表单后,浏览器会以初的页面显示结果。这意味两碰:

* 用户须待服务器处理数据并转响应;

* 所有文档上下文信息还掉了,因为结果是当做新文档进行亮的。

眼看就是是运用Ajax的优良状态了。可以异步转移请求,这样用户就能于表单被拍卖时继续与文档进行互动。

 

2. 发送表单

通向服务器发送数据的太基本措施是温馨征集并格式化它。下面代码展示了丰富到眼前的HTML文档
example.html 的同段脚本。用底就是这种艺术:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动收集和发送数据</title>
    <style>
        .table{display: table;}
        .row{display: table-row;}
        .cell{display: table-cell;padding: 5px;}
        .lable{text-align: right;}
    </style>
</head>
<body>
<form id="fruitform" method="post" action="http://127.0.0.1:8080/form">
    <div class="lable">
        <div class="row">
            <div class="cell lable">Apples:</div>
            <div class="cell"><input name="apples" value="5" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Bananas:</div>
            <div class="cell"><input name="bananas" value="2" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Cherries:</div>
            <div class="cell"><input name="cherries" value="20" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Total:</div>
            <div id="results" class="cell">0 items</div>
        </div>
    </div>
    <button id="submit" type="submit">Submit Form</button>
</form>
<script>
    document.getElementById("submit").onclick = handleButtonPress;

    var httpRequest;
    function handleButtonPress(e){
        //对表单里的button元素而言,其默认行为是用常规的非Ajax方式提交表单。这里不想让他发生,所以调用了preventDefault方法
        e.preventDefault();
        var form = document.getElementById("fruitform");
        //收集并格式化各个input的值
        var formData ="";
        var inputElements = document.getElementsByTagName("input");
        for (var i = 0; i < inputElements.length; i++){
            formData += inputElements[i].name + "=" + inputElements[i].value +"&";
        }
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        //数据必须通过POST方法发送给服务器,并读取了HTMLFormElement的action属性获得了请求需要发送的URL
        httpRequest.open("POST",form.action);
        //添加标头来告诉服务器准备接受的数据格式
        httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //把想要发送给服务器的字符串作为参数传递给send方法
        httpRequest.send(formData);
    }

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

 

作用图如下:

图片 2

服务器响应表单提交后归的HTML文档会显示在平等页,而且该要是异步执行的。

  

3.
发送JSON数据

Ajax不止用来发送表单数据,几乎可以发送任何数据,包括JavaScript对象表示法(JavaScript
Object
Notation,JSON)数据,而她几乎已改为平等栽流行的多寡格式了。Ajax扎根于XML,但就同样格式很烦。当运行的Web应用程序必须传输大量XML文档时,繁琐就象征带宽和体系容量方面的实际成本。

JSON经常让誉为XML的“脱脂”替代品。JSON易于阅读和编,比XML更困难凑,而且都落了普遍支持。JSON发源于JavaScript,但她的开拓进取已超过了
JavaScript,被广大的程序包和体系掌握并运用。

以下是一个简练的JavaScript对象用JSON表达的事例:

{"bananas":"2","apples":"5","cherries":"20"}

夫目标来三个属性:bananas、apples和cherries。这些性的价值分别是2、5及20。

JSON的作用不如XML丰富,但针对群应用程序来说,那些效果是故无交之。JSON简单、轻量和具备表现力。下面例子演示了发送JSON数据及服务器出多简单,修改前例的JavaScript部分如下:

<script>
    document.getElementById("submit").onclick = handleButtonPress;

    var httpRequest;
    function handleButtonPress(e){
        e.preventDefault();
        var form = document.getElementById("fruitform");

        var formData = new Object();
        var inputElements = document.getElementsByTagName("input");
        for(var i=0;i<inputElements.length;i++){
            formData[inputElements[i].name] = inputElements[i].value;
        }

        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("POST",form.action);
        httpRequest.setRequestHeader("Content-Type","application/json");
        httpRequest.send(JSON.stringify(formData));
    }

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

当时段脚本,创建了一个新的Object,并定义了有特性来对诺表单内挨家挨户input元素的name属性值。可以利用外数据,但
input元素很方便,而且能及前面的例子保持一致。

为告诉服务器在发送JSON数据,把要的Content-Type标头设为
application/json,就像这么:

httpRequest.setRequestHeader("Content-Type","application/json");

故而JSON对象及JSON格式进行交互的转换。(大多数浏览器会一直支持这目标,但也可据此底的网址里之本子来被本来本子的浏览器添加相同的机能:https://github.com/douglascrockford/JSON-js/blob/master/json2.js )JSON对象提供了少数只章程:

图片 3

以点的例证中,使用了stringify方法,然后将结果传递让XMLHttpRequest
对象的send方法。此例中仅仅发数据的编码方式发生了扭转。提交表单的意义还是一如既往。

 

4.
以FormData对象发送表单数据

另一样种更简单的表单收集方式是下一个FormData对象,它是以XMLHttpRequest的第二层正式被定义之。

由于本的Node.js代码有点问题,此处用C#新建文件 fruitcalc.aspx作为处理要的服务器。其cs代码如下:

using System;

namespace Web4Luka.Web.ajax.html5
{
    public partial class fruitcalc : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int total = 0;
            if (Request.HttpMethod == "POST")
            {
                if (Request.ContentType.IndexOf("multipart/form-data") > -1)
                {
                    for (int i = 0; i < Request.Form.Count; i++)
                    {
                        total += Int32.Parse(Request.Form[i]);
                    }
                }
                writeResponse(Response, total);
            }
        }

        private void writeResponse(System.Web.HttpResponse Response, int total)
        {
            string strHtml;
            Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:63342");
            strHtml = total + " item ordered";
            Response.Write(strHtml);
        }
    }
}

4.1 创建 FormData 对象

创办FormData对象时得传递一个HTMLFormElement对象,这样表单里具有的元素的价都见面受活动收集起来。示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用FormData对象</title>
    <style>
        .row{display: table-row;}
        .cell{display: table-cell;padding: 5px;}
        .lable{text-align: right;}
    </style>
</head>
<body>
<form id="fruitform" method="post" action="http://localhost:53396/ajax/html5/fruitcalc.aspx">
    <div class="lable">
        <div class="row">
            <div class="cell lable">Apples:</div>
            <div class="cell"><input name="apples" value="5" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Bananas:</div>
            <div class="cell"><input name="bananas" value="2" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Cherries:</div>
            <div class="cell"><input name="cherries" value="20" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Total:</div>
            <div id="results" class="cell">0 items</div>
        </div>
    </div>
    <button id="submit" type="submit">Submit Form</button>
</form>
<script>
    document.getElementById("submit").onclick = handleButtonPress;

    var httpRequest;
    function handleButtonPress(e){
        e.preventDefault();
        var form = document.getElementById("fruitform");
        var formData = new FormData(form);

        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("POST",form.action);
        httpRequest.send(formData);
    }

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

理所当然,关键之变是应用了FormData对象:

var formData = new FormData(form);

其他急需注意的地方是不再设置Content-Type标头的值了。如果利用FormData对象,数据连接会给编码为multipart/form-data
。本例提交表单后,显示力量如下:

图片 4

 

4.2 修改FormData对象

FormData对象定义了一个艺术,它同意给要发送至服务器的数码增长名称/值对。

图片 5

足用append方法上从表单中募集之数据,也得在非使HTMLFormElement的情状下创办FormData对象。这虽象征可以动用append方法来摘取向客户端发送哪些数据值。修改及一示例的JavaScript代码如下:

<script>
    document.getElementById("submit").onclick = handleButtonPress;

    var httpRequest;
    function handleButtonPress(e){
        e.preventDefault();
        var form = document.getElementById("fruitform");

        var formData = new FormData();
        var inputElements = document.getElementsByTagName("input");
        for(var i=0;i<inputElements.length;i++){
            if(inputElements[i].name != "cherries"){
                formData.append(inputElements[i].name,inputElements[i].value);
            }
        }

        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("POST",form.action);
        httpRequest.send(formData);
    }

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

 此段脚本里,创建FormData对象时并不曾供HTMLFormElement对象。随后用DOM找到文档里具有的input元素,并也那些name属性的价不是cherries的元素添加名称/值对。此例提交表单后,显示力量如下:

 图片 6

 

5.
殡葬文书

得用FormData 对象同type 属性为 file 的input
元素向服务器发送文件。当表单提交时,FormData对象会自动包用户挑选的文本内容以及另的表单值共上传。下面的例证展示了争为这种办法使用FormData对象。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用FormData对象发送文件到服务器</title>
    <style>
        .row{display: table-row;}
        .cell{display: table-cell;padding: 5px;}
        .lable{text-align: right;}
    </style>
</head>
<body>
<form id="fruitform" method="post" action="http://localhost:53396/ajax/html5/fruitcalc.aspx">
    <div class="lable">
        <div class="row">
            <div class="cell lable">Apples:</div>
            <div class="cell"><input name="apples" value="5" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Bananas:</div>
            <div class="cell"><input name="bananas" value="2" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Cherries:</div>
            <div class="cell"><input name="cherries" value="20" /></div>
        </div>
        <div class="row">
            <div class="cell lable">File:</div>
            <div class="cell"><input type="file" name="file" /></div>
        </div>
        <div class="row">
            <div class="cell lable">Total:</div>
            <div id="results" class="cell">0 items</div>
        </div>
    </div>
    <button id="submit" type="submit">Submit Form</button>
</form>
<script>
    document.getElementById("submit").onclick = handleButtonPress;

    var httpRequest;
    function handleButtonPress(e){
        e.preventDefault();
        var form = document.getElementById("fruitform");
        var formData = new FormData(form);
        httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = handleResponse;
        httpRequest.open("POST",form.action);
        httpRequest.send(formData);
    }

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

此例里,最强烈的变更出在
form元素上。添加了input元素后,FormData对象就是会达成传用户所选择的肆意文件。

修改 fruitcalc.aspx 的cs文件如下:

using System;
using System.Web;

namespace Web4Luka.Web.ajax.html5
{
    public partial class fruitcalc : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            int total = 0;
            if (Request.HttpMethod == "POST")
            {
                if (Request.ContentType.IndexOf("multipart/form-data") > -1)
                {
                    for (int i = 0; i < Request.Form.Count; i++)
                    {
                        total += Int32.Parse(Request.Form[i]);
                    }
                    if (Request.Files["file"] != null)
                    {
                        HttpPostedFile file = Request.Files["file"];
                        file.SaveAs(Server.MapPath("/upload/pictures/" + file.FileName));
                    }
                }
                writeResponse(Response, total);
            }
        }

        private void writeResponse(System.Web.HttpResponse Response, int total)
        {
            string strHtml;
            Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:63342");
            strHtml = total + " item ordered";
            Response.Write(strHtml);
        }
    }
}

瞩目在劳务器端创建对应上传文件保留之文书夹,,此例的示力量如下:

图片 7

 

 

来源:《HTML5独尊指南》(《The Definitive Guide to
HTML5》)

 

相关文章