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

来源: 时间:06-11-28 点击: 点击这里收藏本文

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

9 7 3 1 2 4 8 :

把此文章收藏到：　　　　　

相关教程

·ASP+AJAX打造无刷新新闻评论系

·AjaxPro让.NET的AjaxPro变得简

·AJAX技术 vs 传统的ASP无刷新技

·AJAX技术 vs 传统的ASP无刷新技

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册