AJAX编程实践服务器通信

首先看下看下相对简单些的--向服务器发送一个包含有名/值对的简单查询串,在这种情况下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随便你自己选好了!

时间: 2024-12-09 03:50:34

AJAX编程实践服务器通信的相关文章

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

ajax|编程|服务器 游客,您好!转网通站 | 转电信站 积木首页 | 500多种网页特效整理 | 实用查询函数手册 | 积木网BT下载联盟 | 经典笑话 | 广播电台 | 高清晰经典图片素材   程序开发  网页设计  搜索引擎  特效代码  操作系统  防范病毒  黑客技术  图形图象  电脑硬件  网络技术  服 务 器  数 据 库  网文精粹       您的位置:积木首页 >> 程序开发频道 >> Ajax技术 >> 正文:  标题:AJAX编程实践之与服

AJAX编程实践

---------------------------------------------------------------------------------------------------------------[版权申明:本文系作者原创,转载请注明出处]文章出处:http://blog.csdn.net/sdksdk0/article/details/51727377作者:朱培   ID:sdksdk0-----------------------------------------

Android编程之客户端通过socket与服务器通信的方法

  Android编程之客户端通过socket与服务器通信的方法        本文实例讲述了Android编程之客户端通过socket与服务器通信的方法.分享给大家供大家参考,具体如下: 下面是一个demo,Android客户端通过socket与服务器通信. 由于Android里面可以完全使用java.io.*包和java.net.*包,那么,实际上,逻辑部分与J2SE没有区别.只是UI代码不一样. Android客户端通过socket与服务器通信分为下面5步: (1)通过IP地址和端口实例化

Android编程之客户端通过socket与服务器通信的方法_Android

本文实例讲述了Android编程之客户端通过socket与服务器通信的方法.分享给大家供大家参考,具体如下: 下面是一个demo,Android客户端通过socket与服务器通信. 由于Android里面可以完全使用java.io.*包和java.net.*包,那么,实际上,逻辑部分与J2SE没有区别.只是UI代码不一样. Android客户端通过socket与服务器通信分为下面5步: (1)通过IP地址和端口实例化Socket,请求连接服务器: 复制代码 代码如下: socket = new

利用ajax与服务器通信,js中的程序没法正常执行

问题描述 document.getElementById("progressbar").style.display='block'; var url="Upload.do?flag="+flag; //alert("文件开始导入基础库"); send(url); 在这段js程序中,document.getElementById("progressbar").style.display='block'; 将进度条显示出来. se

Weblogic Portal中实现AJAX编程之架构

ajax|web|编程|架构 摘要 门户应用程序非常适用于从多个源提取信息以及为包含门户Web应用程序的portlet提供应用服务.对于用户,portlet应用程序是独立的实体,类似于桌面上的窗口应用程序.如果在一个窗口应用程序中执行一项操作会导致其他所有应用程序中的内容被刷新,那又会怎么样呢?这就是当前大多数门户的情况.在一个portlet中通过页面流进行转移会导致整个Web页面被刷新,包括该页面上的其他所有portlet. 为了避免出现这种有时不希望有的行为,Web开发人员采用了所谓Ajax

在BEA WebLogic Portal 8.1中进行Ajax编程 第2部分

编辑注:本文讲述了在WebLogic Portal 8.1中进行底层Ajax编程的细节.这与当前的WebLogic Portal 9.2 beta版无关. 摘要 Ajax是一种异步编程范型,借助于它,开发人员可以创建高度交互式的Web站点,从而在提高用户效率的同时减轻服务器的负载.Ajax结合了Web services.JavaScript和动态HTML编程技术,可以创造丰富的客户端体验,并提高本地应用程序的可用性.本系列文章的第一篇介绍了这些相关概念以及在BEA WebLogic Portal

在BEA WEBLOGIC PORTAL中进行AJAX编程 第1部分

摘要 门户应用程序非常适用于从多个源提取信息以及为包含门户Web应用程序的portlet提供应用服务.对于用户,portlet应用程序是独立的实体,类似于桌面上的窗口应用程序.如果在一个窗口应用程序中执行一项操作会导致其他所有应用程序中的内容被刷新,那又会怎么样呢?这就是当前大多数门户的情况.在一个portlet中通过页面流进行转移会导致整个Web页面被刷新,包括该页面上的其他所有portlet. 为了避免出现这种有时不希望有的行为,Web开发人员采用了所谓Ajax-风格的编程方法.Ajax即异

Akka入门编程实践

Akka是使用Scala语言开发一个编程库,基于事件驱动的架构实现异步处理,它能够简化编写分布式应用程序.Akka中最核心的概念是Actor模型,它为编写分布式/并行计算应用程序提供了高层次抽象,在实际编程实践中,开发人员可以从对复杂网络通信细节的处理.多线程应用场景下对锁的管理中解脱出来. Akka能够给应用程序带来的几个重要的特性是: 容错性 可伸缩性 异步性 事件驱动架构(EDA) 远程透明性 Actor是Akka中最核心的组件,以至于我们在编写基于Akka的应用程序时,大部分时间都会和A