商业源码服务器教程 2024-01-19 0:48:01

ajax向服务器发送数据需要哪些步骤

这次给大家带来ajax向服务器发送数据需要哪些步骤，ajax向服务器发送数据的注意事项有哪些，下面就是实战案例，一起来看一下。

1 准备向服务器发送数据

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

<!DOCTYPE html>

<head>

<style>

table{display: table;}

row{display: table-row;}

cell{display: table-cell;padding: 5px;}

lable{text-align: right;}

</style>

</head>

<body>

<p class="cell lable">Apples:</p>

</p>

<p class="cell lable">Bananas:</p>

</p>

<p class="cell lable">Cherries:</p>

</p>

<p class="cell lable">Total:</p>

<p id="results" class="cell">0 items</p>

</p>

<button id="submit" type="submit">Submit Form</button>

</form>

</body>

</html>这个例子中的表单包含三个input元素和一个提交button 。这些input元素让用户可以指定三种不同的说过各自要订购多少，button则会将表单提交给服务器。

11 定义服务器

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

var http = require('http');

var querystring = require('querystring');

function writeResponse(res,data){

var total = 0;

for(fruit in data){

total += Number(data[fruit]);

}

reswriteHead(200,"OK",{

"Content-Type":"text/html",

"Access-Control-Allow-Origin":"http://localhost:63342"

});

reswrite('<html><head><title>Fruit Total</title></head><body>');

reswrite('<p>'+total+' item ordered</p></body></html>');

resend();

}

httpcreateServer(function(req,res){

consolelog("[200] "+reqmethod+" to "+requrl);

if(reqmethod == "OPTIONS"){

reswriteHead(200,"OK",{

"Access-Control-Allow-Header":"Content-Type",

"Access-Control-Allow-Methods":"",

"Access-Control-Allow-Origin":""

});

resend();

}else if(requrl == '/form'&& reqmethod == 'POST'){

var dataObj = new Object();

var contentType = reqheaders["content-type"];

var fullBody = '';

if(contentType){

if(contentTypeindexOf("application/x-www-form-urlencode") > -1){

reqon('data',function(chunk){

fullBody += chunktoString();

});

reqon('end',function(){

var dBody = querystringparse(fullBody);

dataObjapples = dBody["apples"];

dataObjbananas = dBody["bananas"];

dataObjcherries = dBody["cherries"];

writeResponse(res,dataObj);

});

}else if(contentTypeindexOf("application/json") > -1){

reqon('data',function(chunk){

fullBody += chunktoString();

});

reqon('end',function(){

dataObj = JSONparse(fullBody);

writeResponse(res,dataObj);

});

}

})listen(8080);脚本中高亮部分：writeResponse函数。这个函数会在提取请求的表单值之后调用，它负责生产对浏览器的响应。当前，这个函数会创建简单的HTML文档，效果如下：

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

12 理解问题所在

上面的清楚的描述了想要用Ajax解决的问题。

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

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

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

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

2 发送表单

向服务器发送数据的最基本方式是自己收集并格式化它。下面代码展示了添加到前面的HTML文档 examplehtml 的一段脚本。用的就是这种方式：

<!DOCTYPE html>

<head>

<title>手动收集和发送数据</title>

<style>

table{display: table;}

row{display: table-row;}

cell{display: table-cell;padding: 5px;}

lable{text-align: right;}

</style>

</head>

<body>

<p class="cell lable">Apples:</p>

</p>

<p class="cell lable">Bananas:</p>

</p>

<p class="cell lable">Cherries:</p>

</p>

<p class="cell lable">Total:</p>

<p id="results" class="cell">0 items</p>

</p>

<button id="submit" type="submit">Submit Form</button>

</form>

documentgetElementById("submit")onclick = handleButtonPress;

var httpRequest;

function handleButtonPress(e){

//对表单里的button元素而言，其默认行为是用常规的非Ajax方式提交表单。这里不想让他发生，所以调用了preventDefault方法

epreventDefault();

var form = documentgetElementById("fruitform");

//收集并格式化各个input的值

var formData ="";

var inputElements = documentgetElementsByTagName("input");

for (var i = 0; i < inputElementslength; i++){

formData += inputElements[i]name + "=" + inputElements[i]value +"&";

}

httpRequest = new XMLHttpRequest();

httpRequestonreadystatechange = handleResponse;

//数据必须通过POST方法发送给服务器，并读取了HTMLFormElement的action属性获得了请求需要发送的URL

httpRequestopen("POST",formaction);

//添加标头来告诉服务器准备接受的数据格式

httpRequestsetRequestHeader('Content-Type','application/x-www-form-urlencoded');

//把想要发送给服务器的字符串作为参数传递给send方法

httpRequestsend(formData);

}

function handleResponse(){

if(httpRequestreadyState == 4 && httpRequeststatus == 200){

documentgetElementById("results")innerHTML = httpRequestresponseText;

}

</script>

</body>

</html>效果图如下：

服务器响应表单提交后返回的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部分如下：

documentgetElementById("submit")onclick = handleButtonPress;

var httpRequest;

function handleButtonPress(e){

epreventDefault();

var form = documentgetElementById("fruitform");

var formData = new Object();

var inputElements = documentgetElementsByTagName("input");

for(var i=0;i<inputElementslength;i++){

formData[inputElements[i]name] = inputElements[i]value;

}

httpRequest = new XMLHttpRequest();

httpRequestonreadystatechange = handleResponse;

httpRequestopen("POST",formaction);

httpRequestsetRequestHeader("Content-Type","application/json");

httpRequestsend(JSONstringify(formData));

}

function handleResponse(){

if(httpRequestreadyState == 4 && httpRequeststatus == 200){

documentgetElementById("results")innerHTML = httpRequestresponseText;

}

</script>这段脚本，创建了一个新的Object，并定义了一些属性来对应表单内各个input元素的name属性值。可以使用任何数据，但 input元素很方便，而且能和之前的例子保持一致。

为了告诉服务器正在发送JSON数据，把请求的Content-Type标头设为 application/json，就像这样：

httpRequestsetRequestHeader("Content-Type","application/json");

用JSON对象和JSON格式进行相互的转换。（大多数浏览器能直接支持这个对象，但也可以用下面的网址里的脚本来给旧版的浏览器添加同样的功能：https://githubcom/douglascrockford/JSON-js/blob/master/json2js ）JSON对象提供了两个方法：

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

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

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

由于原来的Nodejs代码有点问题，此处用C#新建文件 fruitcalcaspx作为处理请求的服务器。其cs代码如下：

using System;

namespace Web4LukaWebajaxhtml5

{

public partial class fruitcalc : SystemWebUIPage

{

protected void Page_Load(object sender, EventArgs e)

{

int total = 0;

if (RequestHttpMethod == "POST")

{

if (RequestContentTypeIndexOf("multipart/form-data") > -1)

{

for (int i = 0; i < RequestFormCount; i++)

{

total += Int32Parse(RequestForm[i]);

}

writeResponse(Response, total);

}

private void writeResponse(SystemWebHttpResponse Response, int total)

{

string strHtml;

ResponseAddHeader("Access-Control-Allow-Origin", "http:/

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。

XMLHttpRequest简介

XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest和Javascript

Javascript本身并未具备向服务器发送请求的能力，要么使用windowopen()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。

XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法社会自和服务器端交互的基本信息

4、设置发送的数据，开始和服务器端交互

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容

下面我们以用户名确认来实现XMLHttpRequest的五步使用法：

<!DOCTYPE html>

<html>

<head>

var xmlhttp;

function submit(){

//1创建XHLHttpRequest对象

if(windowXMLHttpRequest){

//alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera");

//IE7，IE8 ,FireFox。Mozillar、Safari，Opera

xmlhttp=new XMLHttpRequest();

if(xmlhttpoverrideMimeType){

xmlhttpoverrideMimeType("text/xml");

}

}else if(windowActiveXObject){

//IE6,IE65 IE5

alert("IE6,IE65 IE5");

var activexName= ['MSXML2XMLHTTP60','MSXML2XMLHTTP50', 'MSXML2XMLHTTP40','msxml2xmlhttp30','MSXML2XMLHTTP20',

'MSXML2XMLHTTP10'];

for(var i=0; i<activexNamelength;i++){

try{

xmlhttp=new ActiveXObject(activexName[i]);

break;

}catch(e){

}

if(xmlhttp==undefined||xmlhttp==null){

alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器");

return;

}

//alert(xmlhttp);

//2注册回调方法

xmlhttponreadystatechange=callback;

//错误的写法callback();

//记忆一个固定用法，获取文本框中用户输入的内容

var userName=documentgetElementById("UserName")value；

//POST方式交互

//3设置和服务器端交互的相应参数

xmlhttpopen("POST","AjaxServer",true);

//POST方式交互所需要增加的代码

xmlhttpsetRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4设置向服务器端发送的数据，启动和服务器端的交互

xmlhttpsend("name="+userName);

}

function callback(){

//5判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据

if(xmlhttpreadyState==4){

//表示和服务器端的交互已经完成

//服务器返回的http状态码

//200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

//alert(xmlhttpstatus);

if(xmlhttpstatus==200){

//表示服务器端的响应代码是200，正确的返回了数据

//纯文本数据的接受方法

var message=xmlhttpresponseText;

//XML数据对应的DOM对象的接受方法

//使用前提是，服务器端需要设置content-type为text/xml

//var domXml=xmlhttpresponseXML;

alert("bb");

//记忆想div标签填充文本内容的方法

var div=documentgetElementById("message");

divinnerHTML=message;

}

</script>

</head>

<body>

<br/>

</body>

</html>

　　您好，感谢您对火狐的支持

　　代码里的问题比较多，如：var url = "ajax_testusernameaspname=" + escape(u_name);

url的编码不应该用escape，而是windowencodeURIComponent

　　您可以在火狐官方网站下载火狐浏览器，在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。

数据服务器表单对象服务器端

DABAN RP主题是一个优秀的主题，极致后台体验，无插件，集成会员系统
网站模板库 » ajax向服务器发送数据需要哪些步骤

商业源码钻石

分享到：

ajax向服务器发送数据需要哪些步骤

商业源码钻石

0条评论

发表评论取消回复

商业源码 钻石

相关推荐

0条评论

发表评论 取消回复

提供最优质的资源集合

商业源码钻石

发表评论取消回复