如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)”這篇文章吧。

創(chuàng)新互聯(lián)專(zhuān)注于玉州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供玉州營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，玉州網(wǎng)站制作、玉州網(wǎng)頁(yè)設(shè)計(jì)、玉州網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造玉州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供玉州網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

1. 準(zhǔn)備向服務(wù)器發(fā)送數(shù)據(jù)

Ajax 最常見(jiàn)的一大用途是向服務(wù)器發(fā)送數(shù)據(jù)。最典型的情況是從客戶端發(fā)送表單數(shù)據(jù)，即用戶在form元素所含的各個(gè) input 元素里輸入的值。下面代碼展示了一張簡(jiǎn)單的表單：

<!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>

這個(gè)例子中的表單包含三個(gè)input元素和一個(gè)提交button 。這些input元素讓用戶可以指定三種不同的說(shuō)過(guò)各自要訂購(gòu)多少，button則會(huì)將表單提交給服務(wù)器。

1.1 定義服務(wù)器

顯而易見(jiàn)，這里需要為這些示例創(chuàng)建處理請(qǐng)求的服務(wù)器。這里再一次使用Node.js，原因主要是它很簡(jiǎn)單，而且用的是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函數(shù)。這個(gè)函數(shù)會(huì)在提取請(qǐng)求的表單值之后調(diào)用，它負(fù)責(zé)生產(chǎn)對(duì)瀏覽器的響應(yīng)。當(dāng)前，這個(gè)函數(shù)會(huì)創(chuàng)建簡(jiǎn)單的HTML文檔，效果如下：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

這個(gè)響應(yīng)很簡(jiǎn)單，實(shí)現(xiàn)效果是讓服務(wù)器計(jì)算出了用戶通過(guò)form中各個(gè)input元素所訂購(gòu)的水果總數(shù)。服務(wù)器得端腳本的其余部分負(fù)責(zé)解碼客戶端用Ajax發(fā)送的各種可能數(shù)據(jù)格式。

1.2 理解問(wèn)題所在

上面的圖片清楚的描述了想要用Ajax解決的問(wèn)題。

當(dāng)提交表單后，瀏覽器會(huì)在新的頁(yè)面顯示結(jié)果。這意味著兩點(diǎn)：

* 用戶必須等待服務(wù)器處理數(shù)據(jù)并生成響應(yīng)；

* 所有文檔上下文信息都丟失了，因?yàn)榻Y(jié)果是作為新文檔進(jìn)行顯示的。

這就是應(yīng)用Ajax的理想情形了?？梢援惒缴烧?qǐng)求，這樣用戶就能在表單被處理時(shí)繼續(xù)與文檔進(jìn)行交互。

2. 發(fā)送表單

向服務(wù)器發(fā)送數(shù)據(jù)的最基本方式是自己收集并格式化它。下面代碼展示了添加到前面的HTML文檔 example.html 的一段腳本。用的就是這種方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手動(dòng)收集和發(fā)送數(shù)據(jù)</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){
//對(duì)表單里的button元素而言，其默認(rèn)行為是用常規(guī)的非Ajax方式提交表單。這里不想讓他發(fā)生，所以調(diào)用了preventDefault方法
e.preventDefault();
var form = document.getElementById("fruitform");
//收集并格式化各個(gè)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;
//數(shù)據(jù)必須通過(guò)POST方法發(fā)送給服務(wù)器，并讀取了HTMLFormElement的action屬性獲得了請(qǐng)求需要發(fā)送的URL
httpRequest.open("POST",form.action);
//添加標(biāo)頭來(lái)告訴服務(wù)器準(zhǔn)備接受的數(shù)據(jù)格式
httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//把想要發(fā)送給服務(wù)器的字符串作為參數(shù)傳遞給send方法
httpRequest.send(formData);
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>
</body>
</html>

效果圖如下：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

服務(wù)器響應(yīng)表單提交后返回的HTML文檔會(huì)顯示在同一頁(yè)，而且該請(qǐng)求是異步執(zhí)行的。

3. 發(fā)送JSON數(shù)據(jù)

Ajax不止用來(lái)發(fā)送表單數(shù)據(jù)，幾乎可以發(fā)送任何數(shù)據(jù)，包括JavaScript對(duì)象表示法(JavaScript Object Notation,JSON)數(shù)據(jù)，而它幾乎已經(jīng)成為一種流行的數(shù)據(jù)格式了。Ajax扎根于XML，但這一格式很繁瑣。當(dāng)運(yùn)行的Web應(yīng)用程序必須傳輸大量XML文檔時(shí)，繁瑣就意味著帶寬和系統(tǒng)容量方面的實(shí)際成本。

JSON經(jīng)常被稱為XML的“脫脂”替代品。JSON易于閱讀和編寫(xiě)，比XML更緊湊，而且已經(jīng)獲得了廣泛支持。JSON發(fā)源于JavaScript，但它的發(fā)展已經(jīng)超越了 JavaScript，被無(wú)數(shù)的程序包和系統(tǒng)理解并使用。

以下是一個(gè)簡(jiǎn)單的JavaScript對(duì)象用JSON表達(dá)的例子：

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

這個(gè)對(duì)象有三個(gè)屬性：bananas、apples和cherries。這些屬性的值分別是2、5和20。

JSON的功能不如XML豐富，但對(duì)許多應(yīng)用程序來(lái)說(shuō)，那些功能是用不到的。JSON簡(jiǎn)單、輕量和富有表現(xiàn)力。下面例子演示了發(fā)送JSON數(shù)據(jù)到服務(wù)器有多簡(jiǎn)單，修改前例的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>

這段腳本，創(chuàng)建了一個(gè)新的Object，并定義了一些屬性來(lái)對(duì)應(yīng)表單內(nèi)各個(gè)input元素的name屬性值?？梢允褂萌魏螖?shù)據(jù)，但 input元素很方便，而且能和之前的例子保持一致。

為了告訴服務(wù)器正在發(fā)送JSON數(shù)據(jù)，把請(qǐng)求的Content-Type標(biāo)頭設(shè)為 application/json，就像這樣：

httpRequest.setRequestHeader("Content-Type","application/json");
用JSON對(duì)象和JSON格式進(jìn)行相互的轉(zhuǎn)換。（大多數(shù)瀏覽器能直接支持這個(gè)對(duì)象，但也可以用下面的網(wǎng)址里的腳本來(lái)給舊版的瀏覽器添加同樣的功能：https://github.com/douglascrockford/JSON-js/blob/master/json2.js ）JSON對(duì)象提供了兩個(gè)方法：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

在上面的例子中，使用了stringify方法，然后把結(jié)果傳遞給XMLHttpRequest 對(duì)象的send方法。此例中只有數(shù)據(jù)的編碼方式發(fā)生了變化。提交表單的效果還是一樣。

4. 使用FormData對(duì)象發(fā)送表單數(shù)據(jù)

另一種更簡(jiǎn)潔的表單收集方式是使用一個(gè)FormData對(duì)象，它是在XMLHttpRequest的第二級(jí)規(guī)范中定義的。

由于原來(lái)的Node.js代碼有點(diǎn)問(wèn)題，此處用C#新建文件 fruitcalc.aspx作為處理請(qǐng)求的服務(wù)器。其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 創(chuàng)建 FormData 對(duì)象

創(chuàng)建FormData對(duì)象時(shí)可以傳遞一個(gè)HTMLFormElement對(duì)象，這樣表單里所有的元素的值都會(huì)被自動(dòng)收集起來(lái)。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用FormData對(duì)象</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>

當(dāng)然，關(guān)鍵的變化是使用了FormData對(duì)象：

var formData = new FormData(form);

其他需要注意的地方是不再設(shè)置Content-Type標(biāo)頭的值了。如果使用FormData對(duì)象，數(shù)據(jù)總是會(huì)被編碼為multipart/form-data 。本例提交表單后，顯示效果如下：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

4.2 修改FormData對(duì)象

FormData對(duì)象定義了一個(gè)方法，它允許給要發(fā)送到服務(wù)器的數(shù)據(jù)添加名稱/值對(duì)。

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

可以用append方法增補(bǔ)從表單中收集的數(shù)據(jù)，也可以在不使用HTMLFormElement的情況下創(chuàng)建FormData對(duì)象。這就意味著可以使用append方法來(lái)選擇向客戶端發(fā)送哪些數(shù)據(jù)值。修改上一示例的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>

此段腳本里，創(chuàng)建FormData對(duì)象時(shí)并沒(méi)有提供HTMLFormElement對(duì)象。隨后用DOM找到文檔里所有的input元素，并為那些name屬性的值不是cherries的元素添加名稱/值對(duì)。此例提交表單后，顯示效果如下：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

5. 發(fā)送文件

可以使用FormData 對(duì)象和type 屬性為 file 的input 元素向服務(wù)器發(fā)送文件。當(dāng)表單提交時(shí)，F(xiàn)ormData對(duì)象會(huì)自動(dòng)確保用戶選擇的文件內(nèi)容與其他的表單值一同上傳。下面的例子展示了如何以這種方式使用FormData對(duì)象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用FormData對(duì)象發(fā)送文件到服務(wù)器</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>

此例里，最明顯的變化發(fā)生在 form元素上。添加了input元素后，F(xiàn)ormData對(duì)象就會(huì)上傳用戶所選的任意文件。

修改 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);
}
}
}

此例的顯示效果如下：

如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)

以上是“如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：如何使用ajax向服務(wù)器發(fā)送數(shù)據(jù)-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article34/dsodse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、定制開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容