Ajax 고급 기능: ajax가 서버에 데이터를 보냅니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Ajax 고급 기능: ajax가 서버에 데이터를 보냅니다.

韦小宝

Jan 08, 2018 am 10:50 AM

ajax섬기는 사람

이 글에서는 서버로 데이터를 보내는 것과 관련된 Ajax 고급 기능 ajax을 주로 소개합니다. ajax에 관심 있는 친구들은

1을 참고하세요. Ajax의 가장 일반적인 용도 중 하나는 서버에 데이터를 보내는 것입니다. 가장 일반적인 상황은 클라이언트에서 폼 데이터, 즉 폼 요소에 포함된 각 입력 요소에 사용자가 입력한 값을 보내는 것입니다. 다음 코드는 간단한 양식을 보여줍니다.

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

이 예제의 양식에는 세 개의 입력 요소와 제출 버튼이 포함되어 있습니다. 이러한 입력 요소를 사용하면 사용자는 세 가지 다른 주문 금액을 각각 지정할 수 있으며 버튼을 누르면 양식이 서버에 제출됩니다.

1.1 서버 정의

분명히 이러한 예제에 대한 요청을 처리하는 서버를 생성해야 합니다. Node.js는 주로 간단하고 Javascript
를 사용하기 때문에 여기서 다시 사용됩니다. 다음과 같이 새 Fruitcalc.js 스크립트 파일을 만듭니다.

var http = require(&#39;http&#39;);
var querystring = require(&#39;querystring&#39;);
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(&#39;<html><head><title>Fruit Total</title></head><body>&#39;);
res.write(&#39;<p>&#39;+total+&#39; item ordered</p></body></html>&#39;);
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 == &#39;/form&#39;&& req.method == &#39;POST&#39;){
var dataObj = new Object();
var contentType = req.headers["content-type"];
var fullBody = &#39;&#39;;
if(contentType){
if(contentType.indexOf("application/x-www-form-urlencode") > -1){
req.on(&#39;data&#39;,function(chunk){
fullBody += chunk.toString();
});
req.on(&#39;end&#39;,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(&#39;data&#39;,function(chunk){
fullBody += chunk.toString();
});
req.on(&#39;end&#39;,function(){
dataObj = JSON.parse(fullBody);
writeResponse(res,dataObj);
});
}
}
}
}).listen(8080);

스크립트에서 강조 표시된 부분: writeResponse 함수. 이 함수는 요청된 양식 값을 추출한 후 호출되며 브라우저에 대한 응답을 생성하는 역할을 합니다. 현재 이 함수는 다음과 같은 효과를 갖는 간단한

HTML 문서
를 생성합니다.

이 응답은 매우 간단하며, 그 효과는 서버가 각 과일을 통해 사용자가 주문한 총 과일 수를 계산하도록 하는 것입니다. 양식의 입력 요소입니다. 서버 측 스크립트의 나머지 부분은 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(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
//把想要发送给服务器的字符串作为参数传递给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는 양식 데이터를 보내는 데 사용될 뿐만 아니라 JSON(JavaScript Object Notation) 데이터를 포함한 거의 모든 데이터를 보낼 수 있으며 거의 인기 있는 데이터가 되었습니다. 체재. Ajax는 XML에 뿌리를 두고 있지만 이 형식은 번거롭습니다. 많은 수의 XML 문서를 전송해야 하는 웹 애플리케이션을 실행할 때 복잡성은 대역폭 및 시스템 용량 측면에서 실제 비용을 의미합니다.

JSON은 종종 XML의 "스킴" 대안으로 불립니다. JSON은 읽고 쓰기 쉽고 XML보다 더 컴팩트하며 이미 널리 지원됩니다. JSON은 JavaScript에서 시작되었지만 그 발전은 JavaScript를 능가했으며 수많은 패키지와 시스템에서 이해되고 사용됩니다.
다음은 JSON으로 표현된 간단한 JavaScript 개체의 예입니다.

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

이 개체에는 바나나, 사과, 체리라는 세 가지 속성이 있습니다. 이 속성의 값은 각각 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>

이 스크립트는 새 객체를 생성하고 이에 해당하는 일부 속성을 정의합니다. 양식 각 입력 요소의 이름 속성 값입니다. 모든 데이터를 사용할 수 있지만 입력 요소는 편리하고 이전 예와 일치합니다.

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

此例的显示效果如下：