這次帶給大家ajax傳送資料需要哪些步驟,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"> <p class="lable"> <p class="row"> <p class="cell lable">Apples:</p> <p class="cell"><input name="apples" value="5" /></p> </p> <p class="row"> <p class="cell lable">Bananas:</p> <p class="cell"><input name="bananas" value="2" /></p> </p> <p class="row"> <p class="cell lable">Cherries:</p> <p class="cell"><input name="cherries" value="20" /></p> </p> <p class="row"> <p class="cell lable">Total:</p> <p id="results" class="cell">0 items</p> </p> </p> <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文檔,效果如下:
這個響應很簡單,實現效果是讓伺服器計算出了用戶透過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"> <p class="lable"> <p class="row"> <p class="cell lable">Apples:</p> <p class="cell"><input name="apples" value="5" /></p> </p> <p class="row"> <p class="cell lable">Bananas:</p> <p class="cell"><input name="bananas" value="2" /></p> </p> <p class="row"> <p class="cell lable">Cherries:</p> <p class="cell"><input name="cherries" value="20" /></p> </p> <p class="row"> <p class="cell lable">Total:</p> <p id="results" class="cell">0 items</p> </p> </p> <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>
效果圖如下:
#伺服器回應表單提交後傳回的HTML文件會顯示在同一頁,而且該請求是異步執行的。
3. 傳送JSON資料
Ajax不只用來傳送表單數據,幾乎可以傳送任何數據,包括JavaScript物件表示法(JavaScript Object Notation,JSON)數據,而它幾乎已經成為一種流行的數據格式了。 Ajax紮根於XML,但這格式很繁瑣。當運行的網頁應用程式必須傳輸大量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对象提供了两个方法:
在上面的例子中,使用了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"> <p class="lable"> <p class="row"> <p class="cell lable">Apples:</p> <p class="cell"><input name="apples" value="5" /></p> </p> <p class="row"> <p class="cell lable">Bananas:</p> <p class="cell"><input name="bananas" value="2" /></p> </p> <p class="row"> <p class="cell lable">Cherries:</p> <p class="cell"><input name="cherries" value="20" /></p> </p> <p class="row"> <p class="cell lable">Total:</p> <p id="results" class="cell">0 items</p> </p> </p> <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.2 修改FormData对象
FormData对象定义了一个方法,它允许给要发送到服务器的数据添加名称/值对。
可以用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的元素添加名称/值对。此例提交表单后,显示效果如下:
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"> <p class="lable"> <p class="row"> <p class="cell lable">Apples:</p> <p class="cell"><input name="apples" value="5" /></p> </p> <p class="row"> <p class="cell lable">Bananas:</p> <p class="cell"><input name="bananas" value="2" /></p> </p> <p class="row"> <p class="cell lable">Cherries:</p> <p class="cell"><input name="cherries" value="20" /></p> </p> <p class="row"> <p class="cell lable">File:</p> <p class="cell"><input type="file" name="file" /></p> </p> <p class="row"> <p class="cell lable">Total:</p> <p id="results" class="cell">0 items</p> </p> </p> <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); } } }
此例的显示效果如下:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是ajax傳送資料需要哪些步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!