网页要与硬件打交道，通常的方式是使用CGI，那除了CGI之外，还有没有其他的方式呢？我们知道XHR是可以在不提交表单的情况下，实现与WEB服务端的交互的，那么服务端除了CGI来作出响应外，还有没有其他的方法呢？
答案是有的，我们先来看效果图。
1.XHR的POST请求效果图
2.XHR的GET请求效果图
因为WEB的交互在本质上就是HTTP请求，既然是HTTP请求，那么我们只要以HTTP的形式作出回应，那不就可以了吗？
再思考一个问题，XHR请求有两种方式，一种是GET，一种是POST。这和表单的提交方式是相似的。如果有注意观察，就会发现，提交表单时采用GET请求时，表单数据会跟在URL后面，以问号作为开始，并以KEY-VALUE对的形式以&符号分隔多个KEY-VALUE对。而采用POST方法时，则不是这样的。
那POST的数据又是如何提交出去的？服务端收到的数据又会是什么 样的呢？为此，我以C构建了一个简单的WEB服务来响应XHR的POST请求。下面是实现的步骤。
1.在服务端以SOCKET的形式监听服务端口。
/* server.c */
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <unistd.h>
#include <sys/socket.h>
#include <netinet/in.h>
#define MAXLINE 1024
#define FILE_NAME_LEN_MAX 256
#define DEFEULT_SERVER_PORT 8000
#define RESPONSE_HEADER_LENGTH_MAX 1024
#define BOUNDARY_LEN_MAX 256
#define KEY_LEN_MAX 256
#define VALUE_LEN_MAX 1024
#define BACK_LEN_MAX 10240
#define FORM_DATA_LEN_MAX 10240
struct FormData
{
char Key[KEY_LEN_MAX];
char Value[VALUE_LEN_MAX];
struct FormData *Next;
};
char * fetchMethod(const char * buf);
int hasFormDataInUrl(const char * buf,int bufLen);
char * fetchFileName(const char * buf,int bufLen);
char * readFileBytes(const char * fileName);
char * fetchBoundary(const char * buf,int bufLen);
void handleFormData(int connfd,const char * buf,const char * boundary,const int isFormDataInUrl/*0:not.1:is*/);
struct FormData * fetchFormData(const char * buf,const char *boundary);
struct FormData * fetchFormDataInUrl(const char * buf);
void responseFormData(int connfd,struct FormData * head,const char *method);
void response(int connfd,char *responseContent,int responseContentLength,char *responseCode,char *contentType);
int main(int argc, char *argv[])
{
struct sockaddr_in servaddr, cliaddr;
socklen_t cliaddr_len;
int listenfd, connfd;
char buf[MAXLINE];
char *data;
char *responseContent;
char str[INET_ADDRSTRLEN];
char *method;
char *fileName;
char *boundary;
int i,n;
int port= DEFEULT_SERVER_PORT;
if(argc>1)
{
port=atoi(argv[1]);//Input port
}
if(port<=0||port>0xFFFF)
{
printf("Port(%d) is out of range(1-%d)
",port,0xFFFF);
return;
}
listenfd = socket(AF_INET, SOCK_STREAM, 0);
bzero(&servaddr, sizeof(servaddr));
servaddr.sin_family = AF_INET;
servaddr.sin_addr.s_addr = htonl(INADDR_ANY);
servaddr.sin_port = htons(port);
bind(listenfd, (struct sockaddr *)&servaddr, sizeof(servaddr));
listen(listenfd, 20);
printf("Listen %d
Accepting connections ...
",port);
while (1)
{
cliaddr_len = sizeof(cliaddr);
connfd = accept(listenfd,
(struct sockaddr *)&cliaddr, &cliaddr_len);
n = read(connfd, buf, MAXLINE);
printf("---------------------
");
printf("received from %s at PORT %d
",
inet_ntop(AF_INET, &cliaddr.sin_addr, str, sizeof(str)),
ntohs(cliaddr.sin_port));
printf("read:%d
%s
",n,buf);
method=fetchMethod(buf);
printf("method:%s
",method);
if(strcmp(method,"GET")&&strcmp(method,"POST"))
{
response(connfd,"Only support GET/POST",21,"200 OK","text/html");
close(connfd);
continue;
}
if(hasFormDataInUrl(buf,n))//Check from data in url
{
handleFormData(connfd,buf,boundary,1);//Directly response if has form data in url.(GET Method)
close(connfd);
continue;
}
fileName=fetchFileName(buf,n);
printf("Request file name:%s
",fileName);
responseContent=readFileBytes(fileName);
if(responseContent)//Response if has content.
{
//printf("response content:%s
",responseContent);
response(connfd,responseContent,strlen(responseContent),"200 OK", "text/html");
close(connfd);
continue;
}
boundary=fetchBoundary(buf,n);//If no content,web may sumbit form data.Fetch boundary firstly if has form data.
if((!boundary)||(strlen(boundary)<=0))//No content and no boundary,file is not exist.
{
printf("Request file not exist!
");
response(connfd,"404 Not Found",13,"200 OK","text/html");
close(connfd);
continue;
}
handleFormData(connfd,buf,boundary,0);//POST method.Form data is between boundaries.
close(connfd);
}
}
2.分析请求的方法是否为GET或POST
char * fetchMethod(const char * buf)
{
int i;
char *method;
if(!buf)
{
return NULL;
}
method=(char *)malloc(5);
memset(method,' ',5);
for(i=0;i<5;i++)
{
if(buf[i]=='/'||buf[i]==0x20/*space*/)
{
break;
}
method[i]=buf[i];
}
return method;
}
char * fetchFileName(const char * buf,int bufLen)
{
char *fileName;
int i=0, j=-1;
if(!buf)
{
return NULL;
}
if(bufLen<=0)
{
return NULL;
}
fileName=(char *)malloc(FILE_NAME_LEN_MAX*sizeof(char));
memset(fileName,' ',FILE_NAME_LEN_MAX);
//printf("
---------------
");
for(i=0;i<bufLen;i++)
{
//printf("%c",buf[i]);
if(buf[i]=='/')
{
j=0;
continue;
}
if(j<0)
{
continue;
}
if(buf[i]==0x20)
{
break;
}
fileName[j]=buf[i];
j++;
}
//printf("
---------------
");
return fileName;
}
char * readFileBytes(const char * fileName)
{
int contentLen=0;
char *content;
if(!fileName)
{
return NULL;
}
FILE *f=fopen(fileName,"r");
if(!f)
{
return NULL;
}
fseek(f, 0,SEEK_END);
contentLen=ftell(f);
content=(char *)malloc(contentLen*sizeof(char));
memset(content,' ',contentLen);
fseek(f,0,SEEK_SET);
fread(content,1,contentLen,f);
fclose(f);
return content;
}
4.响应文件请求
注意：最关键的就是构建HTTP的头
void response(int connfd,char *responseContent,int responseContentLength,char *responseCode,char *contentType)
{
char responseHeader [RESPONSE_HEADER_LENGTH_MAX];
int headerLen=0;
int offset=0;
memset(responseHeader,' ',RESPONSE_HEADER_LENGTH_MAX);
//HTTP头构建开始
//HTTP
strcpy(responseHeader+offset,"HTTP/1.1 ");
offset+=strlen("HTTP/1.1 ");
strcpy(responseHeader+offset,responseCode);
offset+=strlen(responseCode);
strcpy(responseHeader+offset,"
");
offset+=strlen("
");
//Server
strcpy(responseHeader+offset, "Server: My Web Server
");
offset+=strlen("Server: My Web Server
");
//Content length
strcpy(responseHeader+offset,"Content-Length: ");
offset+=strlen("Content-Length: ");
printf("content length=%d
",responseContentLength);
//strcpy(responseHeader+offset,(const char*)&responseContentLength);
sprintf(responseHeader+offset,"%d",responseContentLength);
offset+=sizeof(int);
strcpy(responseHeader+offset,"
");
offset+=strlen("
");
//Connection
strcpy(responseHeader+offset,"Connection: Keep-Alive
");
offset+=strlen("Connection: Keep-Alive
");
//Content type
strcpy(responseHeader+offset,"Content-Type: ");
offset+=strlen("Content-Type: ");
strcpy(responseHeader+offset,contentType);
offset+=strlen(contentType);
strcpy(responseHeader+offset,"
");
offset+=strlen("
");
headerLen=offset;
//HTTP头构建结束
//printf("Response Header:%s
",responseHeader);
write(connfd,responseHeader,headerLen);//发送HTTP头
write(connfd,responseContent,responseContentLength);//发送响应数据
}5.分析XHR的FormData
(1)XHR的POST请求:POST请求的数据是以FormData的形式发送的，在服务端会收到相应的数据，下面是具体的分析代码。
1）分析FormData的分界线（boundary）
char * fetchBoundary(const char * buf,int bufLen)
{
char *boundaryBegin;
char *boundaryTemp;
char *boundary;
const char boundaryKey[]="boundary=";
int i;
if(!buf)
{
return NULL;
}
if(!strstr(buf,"multipart/form-data"))
{
return NULL;
}
boundaryBegin=strstr(buf,boundaryKey);
if(!boundaryBegin)
{
return NULL;
}
i=0;
//printf("###########################
");
boundaryTemp=(char *)malloc(BOUNDARY_LEN_MAX);
memset(boundaryTemp,' ',BOUNDARY_LEN_MAX);
boundaryBegin+=strlen(boundaryKey);//move pointer.
while(1)
{
boundaryTemp[i]=boundaryBegin[i];
if(boundaryBegin[i]==0x0A)
{
break;
}
i++;
}
boundary=(char *)malloc(i);
strcpy(boundary,boundaryTemp);
//printf("boundary:%s
",boundary);
//printf("###########################
");
return boundary;
}2)分析FormData的具体数据
注：这里FormData的数据是以链表的形式储存的，FormData的结构见前面的代码。
struct FormData * fetchFormData(const char * buf,const char *boundary)
{
char * begin;
char * end;
char * formData;
char line[VALUE_LEN_MAX];
char * bufTemp;
char * temp;
char * fromData;
char split[]={0x0D,0x0A};
char keyFlag[]="Content-Disposition: form-data; name=";
int i,j,n,boundaryLen,bufLen;
struct FormData *head,*current,*next;
if(!buf)
{
return;
}
if(!boundary)
{
return;
}
printf("****************Form Data**************************
");
boundaryLen=strlen(boundary);
begin=(char *)malloc(boundaryLen+2+1);//2 is prefix "--"
memset(begin,'-',boundaryLen+2);//begin boundary prefix "--"
memcpy(begin+2,boundary,boundaryLen);
end=(char *)malloc(boundaryLen+4+1);//4 is prefix "--" and suffix "--"
memset(end,'-',boundaryLen+4);
memcpy(end+2,boundary,boundaryLen);
bufLen=strlen(buf);
bufTemp=(char *)malloc(bufLen*sizeof(char));
memset(bufTemp,0x0,bufLen);
memcpy(bufTemp,buf,bufLen);
formData=strstr(bufTemp,begin);
i=0;
n=strlen(formData);
memset(line,0,VALUE_LEN_MAX);
head=(struct FormData *)malloc(sizeof(struct FormData));
head->Next=NULL;
current=head;
next=NULL;
for(i=0,j=0;i<n;i++)
{
if(formData[i]!=0x0A&&formData[i]!=0x0D)//Not new line.
{
line[j++]=formData[i];
continue;
}
j=0;
if(strlen(line)<=0)
{
memset(line,0,VALUE_LEN_MAX);
continue;
}
if(strstr(line,end))
{
break;
}
//printf("line:%s
",line);
if(*line==*begin)
{
next=(struct FormData*)malloc(sizeof(struct FormData));
next->Next=NULL;
current->Next=next;
memset(line,0,VALUE_LEN_MAX);
continue;
}
temp=strstr(line,keyFlag);
if(temp)
{
strncpy(current->Key,temp+strlen(keyFlag)+1,strlen(line)-strlen(keyFlag)-2);//kick out quote of key.
}
else
{
strcpy(current->Value,line);
current=next;
}
memset(line,0,VALUE_LEN_MAX);
}
current=head;
while(current!=NULL)
{
if(strlen(current->Key)>0)
{
printf("Name:%s Data:%s
",current->Key,current->Value);
}
current=current->Next;
}
printf("*********************************************
");
return head;
}
2.XHR的GET请求：GET的请求的数据是含在URL中的，所以FormData需要从URL中分析得到。
注：对于XHR的GET请求，如果也以FormData的形式发送(即：xhr.open("GET",url,true);xhr.send(formData);)，那么在服务端没有办法直接在服务端获取到数据。原因可能是GET请求的数据是以URL的形式来发出的，但在服务端却没法收到这一数据。不过，还是有一个变通的方法。既然GET请求是以URL形式发出请求的，那我何不直接构建成像GET请求形式的URL，再以XHR的形式发送呢？结果证明是可行的，效果图见前面。
int hasFormDataInUrl(const char * buf,int bufLen)
{
int i;
if(!buf)
{
return 0;
}
printf("===========Check form data in url===============
");
for(i=0;i<bufLen;i++)
{
if(buf[i]==0x0D||buf[i]==0x0A)//Only check first line.
{
break;
}
if(buf[i]=='?')
{
return 1;
}
}
printf("=================================================
");
return 0;
}
struct FormData * fetchFormDataInUrl(const char * buf)
{
struct FormData *head,*current,*next;
int i,keyIndex,valueIndex;
if(!buf)
{
return NULL;
}
head=(struct FormData *)malloc(sizeof(struct FormData));
head->Next=NULL;
current=head;
next=NULL;
printf("****************Form Data**************************
");
for(i=0,keyIndex=-1,valueIndex=-1;;i++)
{
if(buf[i]==0x0D||buf[i]==0x0A)//Data is in first line.
{
break;
}
if(buf[i]=='?'||buf[i]=='&')
{
keyIndex=0;
valueIndex=-1;
next=(struct FormData*)malloc(sizeof(struct FormData));
next->Next=NULL;
current->Next=next;
if(buf[i]=='&')
{
current=next;
}
continue;
}
if(buf[i]=='=')
{
keyIndex=-1;
valueIndex=0;
continue;
}
if(keyIndex>=0)
{
current->Key[keyIndex++]=buf[i];
}
if(valueIndex>=0)
{
current->Value[valueIndex++]=buf[i];
}
}
current=head;
while(current!=NULL)
{
if(strlen(current->Key)>0)
{
printf("Name:%s Data:%s
",current->Key,current->Value);
}
current=current->Next;
}
printf("*********************************************
");
return head;
}6.响应XHR的请求
注：在响应请求时，除了将收到的数据回馈回去之外，还回馈了服务端的时间。
void responseFormData(int connfd,struct FormData * head,const char *method)
{
time_t current;
struct tm *timeinfo;
char backData[BACK_LEN_MAX];
char sectionFlag[]="
";
int n;
if(!head)
{
return;
};
memset(backData,0, BACK_LEN_MAX);
sprintf(backData,"Method:%s%s",method,sectionFlag);
n=strlen("Method")+strlen(method)+strlen(sectionFlag);
while(head!=NULL)
{
if(strlen(head->Key)>0)
{
sprintf(backData+n,"%s:%s%s",head->Key,head->Value,sectionFlag);
n+=strlen(head->Key)+strlen(head->Value)+strlen(sectionFlag);
}
head=head->Next;
}
time(¤t);
timeinfo = (struct tm *)localtime(¤t);
sprintf(backData+n,"Server time:%s%s",asctime(timeinfo),sectionFlag);
response(connfd,backData,strlen(backData),"200 OK","text/html");
}
void handleFormData(int connfd,const char * buf,const char * boundary,const int isFormDataInUrl/*0:not.1:is*/)
{
struct FormData * head;
char *method;
if(isFormDataInUrl)
{
head=fetchFormDataInUrl(buf);
}
else
{
head=fetchFormData(buf,boundary);
}
method=fetchMethod(buf);
responseFormData(connfd,head,method);
}附上XHR的WEB实现
xhr.html
<html>
<head>
<title>Async request test</title>
<script type="text/javascript" src="xhr.js"></script>
<script type="text/javascript">
function Request() {
var url = document.getElementById("url").value;
var data1 = document.getElementById("data1").value;
var data2 = document.getElementById("data2").value;
var method=document.getElementById("method").value;
var formData =null;
if(method==="POST")
{
formData=new FormData();
formData.append("Data1", data1);
formData.append("Data2", data2);
}
else if(method==="GET")
{
url+="/?Data1="+data1+"&Data2="+data2;
}
else
{
alert(method+" not support");
return;
}
Send(url, function (e) {
alert(e);
},method,formData);
}
</script>
</head>
<body>
<div>
<a> URL:</a><input id="url" type="text" value="http://192.168.80.131:16800" style="200px;"/>
</div>
<div>
<a>Data1:</a><input id="data1" type="text" value="ABCDEFG" style="200px;"/>
</div>
<div>
<a>Data2:</a><input id="data2" type="text" value="1234567" style="200px;"/>
</div>
<div>
<a>Method:</a><input id="method" type="text" value="GET" style="200px;"/>
</div>
<div>
<input type="button" value="XHR" onclick="Request()" />
</div>
</body>
</html>
xhr.js
function Send(url, callback,method,formData) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) //200:Success.304:Tell browser to read cache.
{
if (callback === undefined || callback === null) {
return;
}
callback(xhr.responseText);
}
else {
alert(xhr.responseText);
}
}
}
xhr.open(method, url, true);
if (formData===undefined) {
formData = null;
}
if(method==="GET")
{
xhr.send(null);
}
else
{
xhr.send(formData);
}
}
以上是WEB服务及响应XHR请求的简单实现，实现过程中的代码有很多需要改善的地方，请各路大牛多多指点。
源码可以此处下载http://download.csdn.net/detail/xxdddail/6889831
转载请注明出处http://blog.csdn.net/xxdddail/article/details/18841325