服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > 专题栏目 > WEB2.0新技术 > 查看文档

ajax编程实践之与服务器通信

  首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串,在这种情况下xhp即可以用get也可以用post。

      首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串,在这种情况下xhp即可以用get也可以用post。

get

function dorequestusingget() {
 createxmlhttprequest();

 var querystring = " getandpostexample? " ;
 querystring = querystring + createquerystring()+ " &timestamp= " + new date().gettime();
 xmlhttp.onreadystatechange = handlestatechange;
 xmlhttp.open( " get " , querystring, true );
 xmlhttp.send( null );
}

post

function dorequestusingpost() {
 createxmlhttprequest();

 var url = " getandpostexample?timestamp= " + new date().gettime();
 var querystring = createquerystring();

 xmlhttp.open( " post " , url, true );
 xmlhttp.onreadystatechange = handlestatechange;
 xmlhttp.setrequestheader( " content-type " , " application/x-www-form-urlencoded " );
 xmlhttp.send(querystring);
}
 

  querystring就是名/值对的参数形式了(如name=lilin&age=23),在调用open方法中,当请求方法是用post的时候为了确保服务器知道请求体中有请求参数,需要调用setrequestheader,将content-type值设置为application/x-www-form-urlencoded.当然也可不放在请求体中(那就不要用post啦!)

  此时server处理:

import java.io. * ;
import java.net. * ;
import javax.servlet. * ;
import javax.servlet.http. * ;

public class getandpostexample extends httpservlet {

 protected void processrequest(httpservletrequest request, httpservletresponse response, string method)
throws servletexception, ioexception {

  // set content type of the response to text/xml
  response.setcontenttype( " text/xml " );

  // get the user's input
  string firstname = request.getparameter( " firstname " );
  string middlename = request.getparameter( " middlename " );
  string birthday = request.getparameter( " birthday " );

  // create the response text
  string responsetext = " hello " + firstname + " " + middlename
+ " . your birthday is " + birthday + " . "
+ " [method: " + method + " ] " ;

  // write the response back to the browser
  printwriter out = response.getwriter();
  out.println(responsetext);

  // close the writer
  out.close();
 }

 protected void doget(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
  // process the request in method processrequest
  processrequest(request, response, " get " );
 }

 protected void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
  // process the request in method processrequest
  processrequest(request, response, " post " );
 }
}
 

  对get and post方法都用processrequest来处理。

  要向服务器发送相关复杂的查询串,可以将模型变化为xml发送到server 。

  client端:

function createxml() {
 var xml = " <pets> " ;

 var options = document.getelementbyid( " pettypes " ).childnodes;
 var option = null ;
 for ( var i = 0 ; i < options.length; i ++ ) {
  option = options[i];
  if (option.selected) {
   xml = xml + " <type> " + option.value + " <\/type> " ;
  }
 }

 xml = xml + " <\/pets> " ;
 return xml;
}

function sendpettypes() {
 createxmlhttprequest();

 var xml = createxml();
 var url = " postingxmlexample?timestamp= " + new date().gettime();

 xmlhttp.open( " post " , url, true );
 xmlhttp.onreadystatechange = handlestatechange;
 xmlhttp.setrequestheader( " content-type " , " application/x-www-form-urlencoded " );
 xmlhttp.send(xml);
}
 

  createxml方法无非就是将内容以dom的样式存到var xml(变量)里。有时也可能出现client直接将本地的一个xml文件直接以dom(当然可以edit)的样式传送.(也放这个时个的content-type应该为text/xml了!)这时可能要用到activexobject("msxml2.domdocument.3.0")这样一个控件了。

  关于这个控件有个方法可以在各broswer中通用的js代码:

// --------------------------------------------------------------------
// function: createxmldom
//
// purpose: creates a new xml dom.
//
// parameters: none
//
// returns: xmldom object or null
// --------------------------------------------------------------------
function createxmldom()
{
 var oxml = new activexobject(getxmlparserprogid());
 try
 {
  oxml.setproperty( " allowxsltscript " , true );
 }
 catch (err) {}

 oxml.async = false ;
 oxml.validateonparse = false ;
 oxml.resolveexternals = false ;
 oxml.setproperty( " selectionlanguage " , " xpath " );
 try {oxml.setproperty( " newparser " , true );} catch (e) {}

 return oxml;
}

// --------------------------------------------------------------------
// function: getxmlparserprogid
//
// purpose:
// gets the progid of the highest available version of the
// microsoft xml parser.
//
// parameters: none
//
// returns: string (i.e. "msxml2.domdocument.4.0")
//
// --------------------------------------------------------------------
function getxmlparserprogid()
{
 var max_major_parser_version = 10 ;
 var min_major_parser_version = 0 ;
 var max_minor_parser_version = 9 ;
 var min_minor_parser_version = 0 ;

 var sprogid = g_sxmlparserprogid;
 var bfound = false ;

 if ( ! sprogid)
 {
  // iterate through possible versions
  for ( var nmajor = max_major_parser_version; nmajor >= min_major_parser_version; nmajor -- )
  {
   for ( var nminor = max_minor_parser_version; nminor >= min_minor_parser_version; nminor -- )
   {
    // set up the classname for the version that we're trying to instantiate
    sprogid = " msxml2.domdocument. " + nmajor + " . " + nminor;

    try
    {
     if ( new activexobject(sprogid))
     {
      bfound = true ;
      break ;
     }
    }
    catch (e)
    {}
   }

   if (bfound)
   {
    // store in a global variable to speedup subsequent calls
    g_sxmlparserprogid = sprogid;
    break ;
   }
  }
 }

 return sprogid;
}
 
 

  然后直接用其load方法(本地)。

var xmldoc = new activexobject( " msxml2.domdocument.3.0 " );
xmldoc.load(local_xml_filename);

  当然也可以直接从server取来(用get方法即可),然后以responsetext的方法

xmlht.open( " get " ,server_xml_filename, true );
xmlht.onreadystatechange = statechange;
xmlht.send( null );

function handlestatechange() {
 if (xmlhttp.readystate == 4 ) {
  if (xmlhttp.status == 200 ) {
   xmldoc.loadxml(xmlht.responsetext);
  }
 }
}
 

  实际上xmldoc.loadxml(xmlht.responsetext)所得到的就是一个于内存中的dom了,而直接用responsexml的话就直接可以解析为一个dom了!(注意load(file)与loadxml(dom)是不同的)

  此时servert process :

import java.io. * ;
import javax.servlet. * ;
import javax.servlet.http. * ;
import javax.xml.parsers.documentbuilderfactory;
import javax.xml.parsers.parserconfigurationexception;
import org.w3c.dom.document;
import org.w3c.dom.nodelist;
import org.xml.sax.saxexception;

public class postingxmlexample extends httpservlet {

protected void dopost(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {

string xml = readxmlfromrequestbody(request);
document xmldoc = null ;
try {
xmldoc =
documentbuilderfactory.newinstance().newdocumentbuilder()
.parse( new bytearrayinputstream(xml.getbytes()));
}
catch (parserconfigurationexception e) {
system.out.println( " parserconfigurationexception: " + e);
}
catch (saxexception e) {
system.out.println( " saxexception: " + e);
}

/**/ /* note how the java implementation of the w3c dom has the same methods
* as the javascript implementation, such as getelementsbytagname and
* getnodevalue.
*/
nodelist selectedpettypes = xmldoc.getelementsbytagname( " type " );
string type = null ;
string responsetext = " selected pets: " ;
for ( int i = 0 ; i < selectedpettypes.getlength(); i ++ ) {
type = selectedpettypes.item(i).getfirstchild().getnodevalue();
responsetext = responsetext + " " + type;
}

response.setcontenttype( " text/xml " );
response.getwriter().print(responsetext);
}

private string readxmlfromrequestbody(httpservletrequest request) {
stringbuffer xml = new stringbuffer();
string line = null ;
try {
bufferedreader reader = request.getreader();
while ((line = reader.readline()) != null ) {
xml.append(line);
}
}
catch (exception e) {
system.out.println( " error reading xml: " + e.tostring());
}
return xml.tostring();
}
}
 

  dom,jdom,jaxp随便你自己选好了!

扫描关注微信公众号