当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX编程实践之与服务器通信

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

AJAX技术 中的 AJAX编程实践之与服务器通信


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 79 ::
收藏到网摘: n/a

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