Ajax高级功能之创建交互式、快速动态网页应用的网页开发技术向服务器发送数据

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

埃阿斯最常见的一大用途是向服务器发送数据。最典型的情况是从客户端发送表单数据，即用户在形式元素所含的各个投入元素里输入的值。下面代码展示了一张简单的表单：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题基本表单/title样式。表格{显示：表格；}.行{显示：表格-行；}.单元格{显示：表格单元格；padding: 5px }。标签{ text-align : right}/style/head dyform id=' four Form '方法=' post '操作=' http://127。0 .0 .1:8080/Form ' div class=' label ' div class=' row ' div class=' cell label ' apple 3360/div class=' cell '输入名称=' apple '值=' 5 '/div/div class=' row ' div class=' cell label ' banana 3:/div class=' cell '输入名称='这个例子中的表单包含三个投入元素和一个提交按钮。这些投入元素让用户可以指定三种不同的说过各自要订购多少，按钮则会将表单提交给服务器。

1.1 定义服务器

显而易见，这里需要为这些示例创建处理请求的服务器。这里再一次使用Node.js，原因主要是它很简单，而且用的是Javascript。新建水果calc.js脚本文件如下：

var http=require(' http ')；var查询字符串=require('查询字符串')；函数writeResponse(res，data){ var total=0；用于(数据中的水果){总数=数量(数据[水果]);}res.writeHead(200，' OK '，{'Content-Type':'text/html '，' Access-Control-Allow-Origin ' : ' http://localhost :63342 ' })；RES . write(' HTMl标题水果总数/标题/床头');RES . write(' p ' total ' item ordered/p/body/html ')；RES . end()；} http。创建服务器(功能(请求，资源){控制台。日志('[200]'请求。方法“to”请求。网址)；如果(请求。method==' OPTIONS '){ RES . write head(200，' OK '，{ ' Access-Control-Allow-head ' : ' Content-Type '，' Access-Control-Allow-Methods ' : ' *，' Access-Control-Allow-Origin ' : ' *)；RES . end()；} else if(req。URL=='/form '请求。方法==' POST '){ var dataObj=new Object()；可变内容类型=请求。标头[' content-type ']；var fullBody=if(内容类型){ if(内容类型。indexof(' application/x-www-form-URL encode ')-1){ req。on(' data '，function(chunk){ full body=chunk。tostring()；});req.on('end '，function(){ var dBody=查询字符串。解析(全文)；dataobj。apple=dBody[' apple ']；dataobj。banas=db body[' banas ']；dataobj。车厘子=dBody['车厘子']；writeResponse(res，DataObj)；});} else if(内容类型。indexof(' application/JSON ')-1){ req。on(' data '，function(chunk){ full body=chunk。tostring()；});req.on('end '，function(){ dataObj=JSON。解析(全文)；writeResponse(res，DataObj)；});}}}}).听(8080);脚本中高亮部分：writeResponse函数。这个函数会在提取请求的表单值之后调用，它负责生产对浏览器的响应。当前，这个函数会创建简单的超文本标记语言文档，效果如下：

这个响应很简单，实现效果是让服务器计算出了用户通过形式中各个投入元素所订购的水果总数。服务器得端脚本的其余部分负责解码客户端用埃阿斯发送的各种可能数据格式。

1.2 理解问题所在

上面的图片清楚的描述了想要用埃阿斯解决的问题。

当提交表单后，浏览器会在新的页面显示结果。这意味着两点：

* 用户必须等待服务器处理数据并生成响应；

* 所有文档上下文信息都丢失了，因为结果是作为新文档进行显示的。

这就是应用埃阿斯的理想情形了。可以异步生成请求，这样用户就能在表单被处理时继续与文档进行交互。

2.发送表单

向服务器发送数据最基本的方法是自己收集和格式化数据。下面的代码显示了一个添加到先前的HTML文档example.html的脚本。这样：

！doctype html lang=' en ' head meta charset=' utf-8 ' title选择并手动发送数据/title style . table { display : table；}.行{ display : table-row；}.单元格{ display : table-cell；padding: 5px}.标签{ text-align : right；}/style/head dyform id='水果形' method=' post ' action=' http://127 . 0 . 0 . 1:8080/Form ' div class=' label ' div class=' row ' div class=' cell label ' apples 3360/div div class=' cell ' input name=' apple ' value=' 5 '/div/div class=' row ' div class=' cell label ' banana 3:/div class=' cell ' input name='onclick=handleButtonPressvar httpRequestfunction HandleButtonPress(E){//对于表单中的按钮元素，其默认行为是以常规的非Ajax方式提交表单。我不想在这里发生，所以我调用了preventDefault方法e . preventDefault()；var form=document . getelementbyid(' four form ')；//收集并格式化每个输入的var formData=' '值；var inputrements=document . getelementsbytagname(' input ')；for(var I=0；输入长度；I){ formData=inputrements[I]。name '=' InTerements[I]。值“”；} Httprequest=new XMlhttprequest()；http request . onreadystatechange=handleResponse；//数据必须通过POST方法发送到服务器，读取HTMLFormElement的action属性，得到需要发送的URL httprequest.open ('post '，form . action)；//添加一个头，告诉服务器数据格式http request . setrequest header(' content-type '，' application/x-www-form-URL encoded ')；//将想要发送到服务器的字符串作为参数传递给发送方法http request . send(formData)；} function handleResponse(){ if(Httprequest . readystate==4 Httprequest . status==200){ document . getelementbyid(' results ')。innerHTML=Httprequest . responsetext；} }/脚本/正文/html渲染如下：

服务器提交响应表单后返回的HTML文档将显示在同一页面上，请求异步执行。

3.发送JSON数据

Ajax不仅用于发送表单数据，还可以发送几乎任何数据，包括JavaScript Object notification，JSON)数据，几乎已经成为一种流行的数据格式。Ajax植根于XML，但这种格式很麻烦。当一个正在运行的Web应用程序必须传输大量的XML文档时，繁琐就意味着带宽和系统容量方面的实际成本。

JSON通常被称为XML的“脱脂”替代品。JSON易于读写，比XML更紧凑，得到了广泛的支持。JSON起源于JavaScript，但它的发展已经超越了JavaScript，被无数的包和系统理解和使用。

下面是一个用JSON表示的简单JavaScript对象的示例：

{ '香蕉' :' 2 '，'苹果' :' 5 '，'樱桃' :' 20'}这个对象有三个属性：香蕉，苹果和樱桃。这些属性值分别为2、5和20。

JSON没有XML那么丰富，但是对于很多应用程序来说，这些功能是不需要的。JSON简单、轻量、富有表现力。下面的示例演示了将JSON数据发送到服务器有多简单。修改上一个示例的JavaScript部分，如下所示：

编写文档脚本。getelementbyid(' submit ').onclick=handlebuttonpresvar Httprequest函数handleButtonPress(e){ e . prevent default()；var form=文档。getelementbyid('四种形式')；var formData=new Object()；var inputrements=文档。getelementsbytagname(' input ')；for(var I=0；iinputelements . lentii){ formData[input rements[I]} .名称]=输入测试[i].价值；} Httprequest=new XMlhttprequest()；http请求。onreadystatechange=handleResponse；httpRequest.open('POST '，表单。行动)；http请求。setrequest头(‘Content-Type’，‘application/JSON’)；http请求。发送(JSON。stringify(formData))；}函数handleResponse(){ if(Httprequest。readystate==4 Httprequest。status==200){ document。getelementbyid(' results ').innerHTML=Httprequest。responsetext} }/脚本这段脚本，创建了一个新的对象，并定义了一些属性来对应表单内各个投入元素的名字属性值。可以使用任何数据，但投入元素很方便，而且能和之前的例子保持一致。

为了告诉服务器正在发送JSON数据，把请求的内容类型标头设为应用程序/json，就像这样：

http请求。setrequest头(‘Content-Type’，‘application/JSON’)；用JSON对象和JSON格式进行相互的转换。(大多数浏览器能直接支持这个对象，但也可以用下面的网址里的脚本来给旧版的浏览器添加同样的功能：https://github。com/douglascrockford/JSON-js/blob/master/js 2。js)JSON对象提供了两个方法：

在上面的例子中，使用了细长的方法，然后把结果传递给XMLHttpRequest对象的派遣方法。此例中只有数据的编码方式发生了变化。提交表单的效果还是一样。

4.使用表单数据对象发送表单数据

另一种更简洁的表单收集方式是使用一个表单数据对象，它是在XMLHttpRequest的第二级规范中定义的。

由于原来的Node.js代码有点问题，此处用C#新建文件水果calc.aspx作为处理请求的服务器。其铯代码如下：

使用系统；命名空间Web4Luka .网络。Ajax。html 5 {公共分部类水果计算器：系统.网络。ui。页面{受保护的无效页面_加载(对象发送方，EventArgs e){ int total=0；如果（请求HttpMethod=='POST'){if(请求内容类型。索引Of('多部分/表单数据)-1){ for(int I=0；我请求。形式。计数；i ){total=Int32 .解析（请求。表格[I])；}}writeResponse(响应，总计);} }私有void writeResponse(系统网络。HttpResponse，int total){ string strHtml；回应添加标题('访问控制-允许-来源，' http://localhost :63342 ')；strHtml=总"订购项目";回应. write(STRHtml)；}}}4.1 创建表单数据对象

创建表单数据对象时可以传递一个HTMLFormElement对象，这样表单里所有的元素的值都会被自动收集起来。示例如下：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题使用表单数据对象/title样式。row { display : table-row；}.单元格{显示：表格单元格；padding: 5px }。标签{ text-align : right}/style/head ody form id='水果形方法=' post '操作=' http://localhost :53396/Ajax/html 5/水果形calc。aspx ' div class=' label ' div class=' row ' div class=' cell label ' apple 3360/div div class=' cell '输入名称=' apple ' value=' 5 '/div/div class=' row ' div class=' cell label ' banana :/div class=' cell ' onclick=handleButtonPressvar http request函数handleButtonPress(e){ e . prevent default()；var form=文档。getelementbyid('四种形式')；var formData=新表单数据(表单);http请求=new XMlhttprequest()；http请求。onreadystatechange=handleResponse；httpRequest.open('POST '，表单。行动)；http请求。发送(表单数据)；}函数handleResponse(){ if(Httprequest。readystate==4 Httprequest。status==200){ document。getelementbyid(' results ').innerHTML=Httprequest。responsetext} }/脚本/正文/html当然，关键的变化是使用了表单数据对象：

var formData=新表单数据(表单);其他需要注意的地方是不再设置内容类型标头的值了。如果使用表单数据对象，数据总是会被编码为多部分/表格数据。本例提交表单后，显示效果如下：

4.2 修改表单数据对象

表单数据对象定义了一个方法，它允许给要发送到服务器的数据添加名称/值对。

可以用附加方法增补从表单中收集的数据，也可以在不使用HTMLFormElement的情况下创建表单数据对象。这就意味着可以使用附加方法来选择向客户端发送哪些数据值。修改上一示例的Java脚本语言代码如下：

编写文档脚本。getelementbyid(' submit ').onclick=handlebuttonpresvar Httprequest函数handleButtonPress(e){ e . prevent default()；var form=文档。getelementbyid('四种形式')；var formData=new formData()；var inputrements=文档。getelementsbytagname(' input ')；for(var I=0；iinputelements . lengthi){ if(inputElements[I]).名字！=' cherries '){ formdata。追加(输入内容[1].姓名，输入项[i].值);} } Httprequest=new XMlhttprequest()；http请求。onreadystatechange=handleResponse；httpRequest.open('POST '，表单。行动)；http请求。发送(表单数据)；}函数handleResponse(){ if(Httprequest。readystate==4 Httprequest。status==200){ document。getelementbyid(' results ').innerHTML=Httprequest。responsetext} }/脚本此段脚本里，创建表单数据对象时并没有提供HTMLFormElement对象。随后用数字正射影像图找到文档里所有的投入元素，并为那些名字属性的值不是樱桃的元素添加名称/值对。此例提交表单后，显示效果如下：

5.发送文件

可以使用表单数据对象和类型属性为文件的投入元素向服务器发送文件。当表单提交时，表单数据对象会自动确保用户选择的文件内容与其他的表单值一同上传。下面的例子展示了如何以这种方式使用表单数据对象。

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题使用表单数据对象发送文件到服务器/title样式。row { display : table-row；}.单元格{显示：表格单元格；padding: 5px }。标签{ text-align : right}/style/head dyform id=' four Form ' method=' post ' action=' http://localhost :53396/Ajax/html 5/水果calc。aspx ' div class=' label ' div class=' row ' div class=' cell label ' apple 3360/div div class=' cell '输入名称=' apple ' value=' 5 '/div/div class=' row ' div class=' cell label ' banana :/div class=' cell ' onclick=handleButtonPressvar http request函数handleButtonPress(e){ e . prevent default()；var form=文档。getelementbyid('四种形式')；var formData=新表单数据(表单);http请求=new XMlhttprequest()；http请求。onreadystatechange=handleResponse；httpRequest.open('POST '，表单。行动)；http请求。发送(表单数据)；}函数handleResponse(){ if(Httprequest。readystate==4 Httprequest。status==200){ document。getelementbyid(' results ').innerHTML=Httprequest。responsetext} }/脚本/正文/html此例里，最明显的变化发生在形式元素上。添加了投入元素后，表单数据对象就会上传用户所选的任意文件。

修改水果calc.aspx的铯文件如下：

使用系统；使用系统网络.命名空间Web4Luka .网络。Ajax。html 5 {公共分部类水果计算器：系统.网络。ui。页面{受保护的无效页面_加载(对象发送方，EventArgs e){ int total=0；如果（请求HttpMethod=='POST'){if(请求内容类型。索引Of('多部分/表单数据)-1){ for(int I=0；我请求。形式。计数；i ){total=Int32 .解析（请求。表格[I])；}如果（请求。文件['文件']!=空){ httpsetfile文件=请求.文件[' file ']；文件。另存为（服务器. MapPath('/上传/图片/'文件FileName))；}}writeResponse(响应，总计);} }私有void writeResponse(系统网络。HttpResponse，int total){ string strHtml；回应添加标题('访问控制-允许-来源，' http://localhost :63342 ')；strHtml=总"订购项目";回应. write(STRHtml)；}}}此例的显示效果如下：

以上所述是小编给大家介绍的埃阿斯高级功能之创建交互式、快速动态网页应用的网页开发技术向服务器发送数据，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！