jqueryajax不能返回XML的问题

如果返回的是个XML字符流而不是XML文件还是要将其转换为XML对象才可正常解析。

如下:

var xmlObject = new ActiveXObject(“Msxml.DOMDocument”);

xmlObject.async = false; 

xmlObject.loadXML(message);

$(xmlObject).find(“op”).each(function(){

  var ss = $(this).text();

  var aa = ss.split(“|”);

  var key = aa[0];

  var name = aa[1];

});

记得将datatype:xml修改成datatype:html

发现ajax的一个好站

发现ajax的一个好站,地址是:

http://ajaxian.com/

同时发现一篇好文,说的是在chrome,fiefox浏览器中,用拖拉的方式把文件

从桌面拖放到页面中就可以上传了

http://www.thecssninja.com/javascript/fileapi

jQuery支持的方法

字符串,数组和对象相关的工具方法

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>字符串,数组和对象相关的工具方法</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
  </head>
  
  <body>
		<script type="text/javascript">
			//访问浏览器属性
			for ( var key in $.browser) {
				document.writeln("当前浏览器的" + key + "属性为:" + $.browser[key] + "<br />");
			}
			//去除字符串前后的空白
			document.writeln("$.trim('	ddd'));的结果是" + $.trim("	ddd") + "<br />");
			//遍历数组
			$.each( [ "java", "ajax", "java ee" ], function(index, val) {
				document.writeln("['java' , 'ajax' ,'java ee']的第" + index + "个元素为:"
						+ val + "<br />");
			});
			//以指定函数过滤数组
			var grepResult = $.grep( [ "java", "ajax", "java ee" ],
					function(val, index) {
						//当数组元素的字符个数大于5时被保留
					return val.length > 5;
				});
			document.writeln("['java' , 'ajax' ,'java ee']里数组元素的字符个数大于5的还有:"
					+ grepResult + "<br />");
			//以旧数组创建新数组
			var mapResult = $.map( [ "java", "ajax", "java ee" ], function(val, index) {
				//当数组元素和索引值连缀在一起作为新的数组元素
					return val + index
				});
			document.writeln("以['java' , 'ajax' ,'java ee']创建的新数组为:" + mapResult);
			//创建div元素
			var div = $("<div>aa<div>");
			//以相同的两个div创建数组
			var divArr = [ div, div ];
			document.writeln("divArr.length的值为:" + divArr.length + "<br />");
			//执行$.unique去除重复元素
			document.writeln("$.unique(divArr).length的结果为:" + $.unique(divArr).length
					+ "<br />");
			var str = "aa";
			//以两个相同的字符串创建数组
			var strArr = [ str, str ];
			document.writeln("strArr.length的值为:" + strArr.length + "<br />");
			//执行$.unique不能去除重复元素
			document.writeln("$.unique(strArr).length的结果为:" + $.unique(strArr).length
					+ "<br />");
		</script>
	</body>
</html>

 数据存储的相关方法

<body>
		<script type="text/javascript">
			var target = $("<div>java</div>");
			//向jQuery对象里添加book数据
			target.data("book" , "Java");
			//访问jQuery对象里的book数据,将输出"Java"
			alert(target.data("book"));
			//删除jQuery对象里的book数据
			target.removeData("book");
			//再次访问jQuery对象里的book数据,将输出"undefined"
			alert(target.data("book"));
		</script>
</body>

 操作属性的相关方法

<body>
		<img />
		<img />
		<div>
			<img />
			<img />
			<img />
		</div>
		<script type="text/javascript">
			//获取body下的img元素,并为这些img元素设置src属性值
			$("body>img").attr("src", "logo.jpg").attr("alt", "Java");
			//获取div下的img元素,并为这些img元素设置src属性值
			$("div>img").attr("src", function(index) {
				return index + 1 + ".gif";
			});
		</script>
	</body>

 操作CSS属性的相关方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>操作CSS属性的相关方法</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
		<style type="text/css">
		.test {
			background-color: #ccccff;
			border: 2px dotted red;
			font-weight: bold;
		}
		</style>
	</head>

	<body>
		<div id="test1">
			整体添加CSS样式的元素
		</div>
		<br />
		<div id="test2">
			采用css(properties)方法添加CSS样式的元素
		</div>
		<br />
		<div id="test3" style="position: absolute;">
			可以自由移动的元素
		</div>
		<script type="text/javascript">
			//为id为test1的元素设置class="text"
			$("#test1").addClass("test");
			//为id为test2的元素设置内联CSS样式 , css(properties), properties是一个形如{key:value}的对象
			$("#test2").css( {
				border : "1px solid black",
				color : "#888888"
			});
			//获取id为test3的元素
			var target = $("#test3")
			//设置背景色
					.css("background-color", "#cccccc").css("padding", 10)
					//设置宽度
					.width(200)
					//设置高度
					.height(80)
					//设置位置
					.css("left", 100).css("top", 164);
			//获取target的位置
			var posi = target.position();
			alert("target的X座标为:" + posi.left + "\n" + "target的Y座标为:" + posi.top);
		</script>
	</body>
</html>

 操作HTML元素内容的相关属性

<body>
		<div></div>
		<div></div>
		<input id="book" name="book" type="text" />
		<br />
		<input id="desc" name="desc" type="text" />
		<br />
		<select id="gender">
			<option value="male">
				男人
			</option>
			<option value="female">
				女人
			</option>
		</select>
		<br />
		<select id="publish" multiple="multiple">
			<option value="phei">
				电子工业出版社
			</option>
			<option value="tsinghua">
				清华大学出版社
			</option>
		</select>
		<br />
		<script type="text/javascript">
			//设置body下的div元素的内容
			$("body>div").html("Ajax");
			//设置所有input、select和textarea的值
			$("body>input").val("XML");
			//为所有的<select.../>元素设置value值
			$("select").val( [ "female", "tsinghua"]);
			//仅获取jQuery元素的text部分,下面将输出java:Java
			alert($("<div>java:<span>Java</span></div>").text());
		</script>
	</body>

 操作DOM节点的相关方法

<body>
		<div id="test1"></div>
		<div id="test2" style="border: 1px solid black;">
			id为test2的元素
		</div>
		<script type="text/javascript">
			//直接将一段HTML字符串添加到id为test1的元素的内部的尾端
			$("#test1").append("<b>XML</b>");
			//创建一个<span.../>元素
			var span = document.createElement("span");
			span.innerHTML = "Java"
			//将一个DOM元素添加到id为test1的元素的内部的顶端
			$("#test1").prepend(span);
			//将id为test1的元素添加到id为test2的元素内部的尾端
			$("#test1").appendTo("#test2");
		</script>
	</body>

 操作DOM节点的相关方法(在指定的节点添加节点)

<body>
		<div id="test1" style="border: 1px dotted black;">
			id为test1的元素
		</div>
		<br />
		<div id="test2" style="border: 1px solid black;">
			id为test2的元素
		</div>
		<hr />
		<script type="text/javascript">
			//直接将一段HTML字符串插入到id为test1的元素的的前面
			$("#test1").before("<b>Ajax</b>");
			//直接将一段HTML字符串插入到id为test1的元素的的后面
			$("#test1").after("<b>XML</b>");
			//将id为test2的元素插入hr元素之后
			$("#test2").insertAfter("hr");
		</script>
	</body>

 操作DOM节点的相关方法(包裹DOM节点)

<body>
		<span id="test1">id为test1的元素</span>
		<br />
		<span id="test2">id为test2的元素</span>
		<script type="text/javascript">
		//将每个span元素之外再包裹一个带点线边框的div元素
		$("span").wrap("<div style='border:1px dotted black'></div>");
		//将每个span元素内部成分再包裹一个灰色背景的span元素
		$("span").wrapInner("<span style='background-color:#dddddd'></span>");
		</script>
	</body>

 操作DOM节点的相关方法(替换,删除,复制)

<body>
		<div>
			<span id="test1">id为test1的元素</span>Java
		</div>
		<span id="test2">id为test2的元素</span>
		<script type="text/javascript">
			//将div元素内容全部清空
			$("div").empty()
			//重新添加字符串
					.append("重新添加");
			//删除所有id为test2的span元素
			$("span").remove("#test2");
			//取得页面中div元素,并复制该元素
			$("div").clone()
			//添加背景色
					.css("background-color", "#cdcdcd")
					//添加到body元素尾部
					.appendTo("body");
		</script>
	</body>

 

jquery插件开发及extend

    以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/ ca=drs-tp4608之后,自己的一些想法。

    这文章主要是从如何写一个插件上来说,中间主要用到的还是在jQuery.fn上做文章,通过定义一个闭包函数,将jQuery作为参数传递过去,再在这个fn增加自己的函数来实现。中间有几个问题,记录如下:

    1,为什么往fn上加函数就可以让jquery对象调用了呢?

看了下代码,注意到这句(jQuery.fn = jQuery.prototype),这句其实很明白了,jQuery.fn实际上就是jQuery.prototype,通过原型来实现一个函数的添加。而在fn上追加的函数上使用this,这个this实际上就是jQuery对象。因为fn就是prototype,调用函数者就是jQuery实现上就是jQuery的一个实例化对象。

 

    看了下文章中关于插件开发的,具体代码倒是其次,主要是其中有几个要点很重要。复制如下:

    1,让内部方法私有化,这其实就是说在自己写的插件里面,因为这个函数可能就自己的插件调用,这其实也是为了避免代码污染。在jquery中有很多例子的。

    2,让默认值可覆盖,这就是说在程序中可能会有一些默认值。所以需要在传递参数中,传递一些可以覆盖默认参数的东西,比如参数中经常传递options这个参数,其实就是拿来覆盖默认参数的。

 

    还有几个插件开发规则,复制如下:

    1,文件命名为 “jquery.<your plug-in name>.js”,这个没什么说的。

    2,所有新方法都附加到 jQuery.fn 对象,所有新功能都附加到 jQuery 对象,这个其实就是往对象上加函数。插件写法就是jQuery.fn.plugin=function(options)的这种样子。

    3,“this” 用于引用 jQuery 对象。这个如果按照第条规则,this肯定引用到jQuery的。

    4,插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。这个不清楚了。

    5,除有特别注明外,所有方法都必须返回 jQuery 对象,其实就是返回this。这个主要是为了链式编程吧,jQuery中到处都是这种。

    6,总是在插件代码中使用 “jQuery” 而不是 “$”。这个不是强制的,比如中我写的闭包就可以这样写:(function($))(jQuery)的这种格式,然后在里面使用$,这里的$其实就是jQuery,这个是参数传递上的东西。

 

   最后就是里面经常用到的extend函数了。简单看了下,整个函数很简单,就是一个复制过程,但在jQuery中经常用到,比如ajax就是通过extend带到jquery中的。

    这里面有个问题,我们使用ajax都是通过$.ajax这种形式访问的,这就表明ajax其实不算是jquery对象的一个方法,最多算一个静态方法。这就实际上说明,extend是往一个对象上追加信息,而$.ajax是往$这个类对象上加,而不是jqury实例对象站加,所以就不能用类似$().ajax的形式来进行ajax访问了,后者返回的是一个undefined信息。在方法内部,实际上就是一个this引用的问题了。

    还是将jquery自己的代码贴出来,在上面加注释信息。

 

jQuery.extend = jQuery.fn.extend = function() {
	//target就是复制目的是哪个对象,这里首先就是第一个参数。
	//i表示source的起始坐标。0被target占用,所以源是目的的下一个
	//length,当前参数长度了;deep,是否深度copy,深度copy就是将里面的对象再次序列化,进行迭代调用
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	//处理第一个函数是boolean的情况,就是说第一个函数可以控制是否深度copy,那这样的话接下来的参数就是往后移位了.
	//jquery中很多地方都是这种处理情况,往往参数列表中有个参数缺失,那么不需要用null来占位,而是直接将后面的参数移到前面来,这样就有一个处理参数移位的问题.
	//在这个里面,第一个参数被占位,那么target就为1位了,源再+1往后走了.
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	//处理这个目的不是object对象,且又不是函数的,这样的话,实际target可能就是其他东西,比如字符串或者基本类型等,这时就将target进行改变.实际上就是忽略target的原来信息.可以理解成一个用source来代替target.
	if ( typeof target !== "object" && !jQuery.isFunction(target) )
		target = {};

	//如果length==i,其实就是没有source的情况,那么将将target变成source,原先的target就直接用调用者this代替了.这样的话,其实就是直接往调用者上加东西.
	//这个用$.ajax来理解,最适合了.源代码中jQuery.extend({ajax:function()});的形式,其实就是直接往$上加函数,因为调用者就是jQuery
	if ( length == i ) {
		target = this;
		--i;
	}
	//进行循环,将source(可能有很多个source,按顺序进行copy),也就是说可以这样写$.extend(target,source1,source2);
	//这样后面的信息可以覆盖前面的信息,而source1可以是函数内置的一个默认信息,source2可以对信息进行更改.
	for ( ; i < length; i++ )
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null )
			// Extend the base object
			for ( var name in options ) {
				//这里就对两边进行取信息了,src表示从target中取的信息(这个可能是null,当然也可能不是,不是的话,那么后面的copy就可能要覆盖这个值了)
				//copy就是从source中取的信息了.
				var src = target[ name ], copy = options[ name ];

				// Prevent never-ending loop
				//这里主要是为了防止在深度copy的情况下,出现无限迭代的情况.比如这种情况:extend(true,target,{"a":target}),这样的话,就会出现无限copy了
				if ( target === copy )
					continue;

				// //这里就是处理深度copy了,如果需要,就进行深度copy,将copy后的值加到target中
				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
					target[ name ] = jQuery.extend( deep, 
						// Never move original objects, clone them
						src || ( copy.length != null   [ ] : { } )
					, copy );

				// 不加undefined值
				else if ( copy !== undefined )
					target[ name ] = copy;

			}

	// 返回target
	return target;
};

     翻译都是按照自己的理解来翻译的,可能不对。

    

     在看了这个东西,感觉在其他程序中(我做java,java中很多这种)也有很多类似的设定,需要进行类似迭代处理,比较直观的就是java中java对象转json的处理了,都一样要对一个对象json化成一个string,中间仍要处理各种类型的信息,还要避免无限迭代等。

 

     以上都是整个jquery中大信息中的小小的一部分。了解一些,总比过后忘了好。

ajax利用xml验证信息

<script type=”text/javascript”>


var XMLHttpReq = false;
         //创建一个XMLHttpRequest对象 
        function createXMLHttpReq(){
       
            if(window.XMLHttpRequest){
           
                XMLHttpReq = new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
           
            try{
           
                XMLHttpReq = new ActiveXObject(“Msxml2.XMLHTTP”);
            }catch(e){
               
                try{
               
                    XMLHttpReq = new ActiveXObject(“Microsoft.XMLHTTP”);
                }
                catch(e){  }
               
               
                  }
            }
        }
       
         //身份验证  
        function check(){
       
            var username = document.all(“name”).value;
            var password = document.all(“pwd”).value;
            var yanzhengimg = document.all(“yanzhengimg”).value;
           
            if(username==””){
               
                alert(“用户名不能为空!”);
                return false;
            }
            else if(username.length<6){
           
                alert(“长度不足六位!”);
                return false;
           
            }
           
            else if(password==””){
           
                alert(“密码不能为空!”);
                return false;
            }
           
            else if(password.length<6){
                alert(“长度不足六位!”);
                return false;
           
            }else if(yanzhengimg.length!=4){
           
                alert(“验证码长度不正确!”);
                return false;
            }
           
            else{
                send(“<%=basePath%>”+”/LoginServlet username=”+username+”&password=”+password+”&yanzhengimg=”+yanzhengimg);
               
                   
                    }
           
        }
       
        //发送请求函数 
        function send(url){
       
            createXMLHttpReq();
           
            XMLHttpReq.open(“GET”,url,”true”);
           
            XMLHttpReq.onreadystatechange=proce;
           
            XMLHttpReq.send(null);
           
           
           
        }
       
    //获取返回的值   
        function proce(){
            if(XMLHttpReq.readyState==4){
                if(XMLHttpReq.status==200){
               
                    var res = XMLHttpReq.responseXML.getElementsByTagName(“content”)[0].firstChild.data; 
                    if(res==”loginsuccess”){
                   
                        window.location.href=”<%=path%>/houtai/index.jsp”;
                       
                    }
                   
                    if(res==”passworderror”){
                       
                       
                        window.alert(“用户密码错误!”);
                       
                       
                       
                    }
               
                    if(res==”usernamenull”){
                   
                        window.alert(“用户名不存在!”);
                       
                    }
                    if(res==”yanzengerror”){
                   
                        window.alert(“验证码错误!”);
                       
                    }
                   
                }else   
               
                alert(“所请求的页面有异常!”);
               
            }
           
        }
       
       
       
    </script>


servlet中的代码如下try {
            user = dao.getData(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        out.print(“<pront>”);
        if (user.getUsername() == null) {

            out.print(“<content>” + nouser + “</content>”);

        } else if(user.getUsername() != null){
            if (!user.getPassword().equals(password)) {

                out.print(“<content>” + errpassword + “</content>”);
            }
       
            else if(!yanzheng.equals(yanzhengma)){
               
                out.print(“<content>” + erryanzheng + “</content>”);
            }
            else{
               
               
                String id = session.getId();
                System.out.println(“sessionID”+id);
                String sql3=”insert into session(sessionid) values(‘”+id+”‘)”;
                System.out.println(sql3);
                CommDao dao2 = DaoFactory.getCommdaoImp();
                dao2.add(sql3);
                out.print(“<content>” + loginsuccess + “</content>”);
            }
       
        }

        out.print(“</pront>”);
        out.flush();
        out.close();

DWR入門與應用(三)

來寫個AJAX版的聊天室吧!先看看直接使用AJAX要如何做到,首先需要一個簡單的聊天室Servlet…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package onlyfun.caterpillar;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private static LinkedList<Message> messages = new LinkedList<Message>();

public ChatRoomServlet() {
super();
}

private List<Message> addMessage(String text) {
if (text != null && text.trim().length() > 0) {
messages.addFirst(new Message(text));
while (messages.size() > 10) {
messages.removeLast();
}
}

return messages;
}

private List<Message> getMessages() {
return messages;
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Message> list = null;

if("send".equals(request.getParameter("task"))) {
list = addMessage(request.getParameter("msg"));
}
else if("query".equals(request.getParameter("task"))){
list = getMessages();
}

PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");

out.println("<response>");
for(int i = 0; i < list.size(); i++) {
String msg = list.get(i).getText();
out.println("<message>" + msg + "</message>");
}
out.println("</response>");
}
}

Message物件如下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;

public class Message {
private long id = System.currentTimeMillis();
private String text;

public Message(String newtext) {
text = newtext;
if (text.length() > 256) {
text = text.substring(0, 256);
}
text = text.replace('<', '[');
text = text.replace('&', '_');
}

public long getId() {
return id;
}

public String getText() {
return text;
}
}

Servlet接受訊息新增與查詢,判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息,客戶端可以查詢或插入新訊息時,取得目前List中的訊息,接著在web.xml中設定一下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< xml version="1.0" encoding="UTF-8" >
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>
</description>
<display-name>
ChatRoomServlet</display-name>
<servlet-name>ChatRoomServlet</servlet-name>
<servlet-class>
onlyfun.caterpillar.ChatRoomServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ChatRoomServlet</servlet-name>
<url-pattern>/ChatRoomServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>

在網頁中,使用者可以在輸入訊息後按下按鈕送出資訊,並在XML回應取得時,將訊息以一列一列的表格方式顯示出來,另外還設定了週期性的輪詢,即使不輸入新訊息,也可以週期性的取得新的聊天訊息…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Chat Room</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function sendMessage() {
var msg = document.getElementById("text").value;

if(msg == "") {
refreshMessage();
return;
}

var param = "task=send&msg=" + msg;
ajaxRequest(param);
document.getElementById("text").value = "";
}

function queryMessage() {
var param = "task=query";
ajaxRequest(param);
}

function ajaxRequest(param) {
var url = "ChatRoomServlet timestamp" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = refreshMessage;
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlHttp.send(param);
}

function refreshMessage() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var messages = xmlHttp.responseXML.getElementsByTagName("message");

var table_body = document.getElementById("dynamicUpdateArea");
var length = table_body.childNodes.length;
for (var i = 0; i < length; i++) {
table_body.removeChild(table_body.childNodes[0]);
}

var length = messages.length;
for(var i = length - 1; i >= 0 ; i--) {
var message = messages[i].firstChild.data;
var row = createRow(message);

table_body.appendChild(row);
}
setTimeout("queryMessage()", 2000);
}
}
}

function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}

</script>

</head>
<body>

<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>

<p>Messages:</p>
<table align="left">
<tbody id="dynamicUpdateArea"></tbody>
</table>

</body>
</html>

簡單抓個畫面…

直接用AJAX,後端用JSP/Servlet,您要對請求參數做些判斷,看看是新增訊息或查詢,並要自行輸出XML,有的沒的…

改成DWR的話,就很簡單了,寫個簡單的Java物件…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;

import java.util.LinkedList;
import java.util.List;

public class Chat {
private static LinkedList<Message> messages = new LinkedList<Message>();

public List addMessage(String text) {
if (text != null && text.trim().length() > 0) {
messages.addFirst(new Message(text));
while (messages.size() > 10) {
messages.removeLast();
}
}

return messages;
}

public List getMessages() {
return messages;
}
}

接著…在dwr.xml中開放一下…

1
2
3
4
5
6
7
8
9
10
11
12
13
< xml version="1.0" encoding="UTF-8" >
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>

<create creator="new" javascript="Chat">
<param name="class" value="onlyfun.caterpillar.Chat"/>
</create>

<convert converter="bean" match="onlyfun.caterpillar.Message"/>
</allow>
</dwr>

使用者取得訊息時,是直接傳回List物件,而List中裝的是Message物件,Message物件是自訂物件,conterver設定為 bean,表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性,例如Message中有 getText(),則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>

<script src="dwr/interface/Chat.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>

<script type="text/javascript">
function sendMessage() {
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text", "");
Chat.addMessage(text, gotMessages);
}

function gotMessages(messages) {
var chatlog = "";
for (var data in messages) {
chatlog = "<div>" + messages[data].text +
"</div>" + chatlog;
}
DWRUtil.setValue("chatlog", chatlog);
setTimeout("queryMessage()", 2000);
}

function queryMessage() {
Chat.getMessages(gotMessages);
}
</script>

</head>
<body>

<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>

<p>Messages:</p>
<div id="chatlog"></div>

</body>
</html>

當List物件傳回時,它成為gotMessages(messages)中的messages物件,而messages物件中包括 Message物件轉換後對應的JavaScript物件,由於我們已經設定了Converter,所以可以用messages[data].text來 取得傳回的訊息…

簡單抓個畫面…

最简单的AJAX实例


高手莫入–最简单的AJAX实例
 
学习AJAX参考了网上大量的实例,学得很艰难,代码可读性太差。本例就是一个入门的Hello World,类似本例的程序网上也许有,但是绝非抄袭。
 
本例很模仿用户注册,输入过程中动态检查错误实时显示,效果图如下:


 
 

 
对着上面这个图,来写代码。
 
一、创建Java Web项目,并创建两个页面
 
a.html
<html> 
<body> 
<script language=“JavaScript”
        var req = null
        function test() { 
                //初始化 
                var code = document.all.code.value; 
                var name = document.all.name.value; 
                req = new ActiveXObject(“Microsoft.XMLHTTP”); 
                //设置属性,当后台处理完成后,回来调用myDeal方法。 
                req.onreadystatechange = myDeal; 
                //发出请求 
                req.open(“GET”“b.jsp code=” + code + “&name=” + name, “false”); 

                req.send(null); 
        } 
        function myDeal() { 
                if (req.readyState == 4) { 
                        //接收服务端返回的数据 
                        var ret = req.responseText; 
                        //处理数据 
                        document.all(“myDiv”).innerHTML = ret; 
                } 
        } 
</script> 

用户注册:<br> 
用户编号:<input type=“text” name=“code” onblur=“test();”>* <div id=“myDiv” name=“myDiv”></div><br> 
用户名称:<input type=“text” name=“name”><br> 
<input type=“button” value=“注册” onclick=“test();”

</body> 
</html>

 
创建处理表单数据的b.jsp
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %> 
<% 
        //接收参数 
        String code = request.getParameter(“code”); 
        String name = request.getParameter(“name”); 
        //控制台输出表单数据看看 
        System.out.println(“code=” + code + “,name=” + name); 
        //检查code的合法性 
        if (code == null || code.trim().length() == 0) { 
                out.println(“code can’t be null or empty”); 
        } else if (code != null && code.equals(“admin”)) { 
                out.println(“code can’t be admin”); 
        } else { 
                out.println(“OK”); 
        } 
%>
 
 
二、部署运行


 
 
 


 
 
呵呵,很简单吧~!

 

  • 大小: 26.7 KB
  • 大小: 26.4 KB
  • 大小: 26.8 KB

关于Extjs异步session超时问题处理

关于Extjs异步session超时问题处理

对于HTTP超时的判断,我们可以通过过滤器Filter来判断。
如果页面超时,我们可以使用诸如request.forward() 之类的方法跳转到登陆页面。

但是对于Ajax请求,request.forward()就无能为力了。
并不是因为request.forward()不起作用,而是因为AJAX的原理,所以整个页面是不会做刷新操作。
(PS: request.forward()后的页面文本能够通过XMLHttpRequest.responseText获取)

于是我们需要另一种方法来进行跳转。

其中简单的方法是设置httpStatus的状态,然后ExtJs监听

 

JAVA

if( 超时 ){
    if("XMLHttpRequest".equals(request.getHeader("x-requested-with"))){
        response.setStatus(401);
    }
}

 

JAVASCRIPT

 

Ext.Ajax.on('requestcomplete',function(conn,response,options) { 
    if(response.statusText==401){
        Ext.Msg.alert('提示', '会话超时,请重新登录!', function(){
            window.location = 'http://localhost:8080/login.jsp'; 
        });
    }
});

 

 

发一个简单的ajaxpush例子

上次回复了一个帖子(忘了是哪个了)发了一个ajax push的例子,但是好像发错了,不能运行,这次发个能运行的:

 

以下代码,放到服务下方可运行,如tomcat。

 

客户端 index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          
<html xmlns="http://www.w3.org/1999/xhtml">          
<head>          
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          
<title> ajax push </title>          
</head>          
<body>          
 ajax push test<hr>          
<textarea id="ta" rows="40" cols="90"></textarea><br>          
<button onclick="test()">test</button>       
<div id="inf"></div>  
</body>          
</html>          
<script language="JavaScript">          
<!--          
window.$i=function(id){return document.getElementById(id); }          
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}          
        
function test()          
{          
    $i("ta").value = "loading...\n\n";          
    request();          
}          
function request()          
{          
    var req = createXMLHttp();          
            
    req.open("get", "push.jsp", true);          
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');          
    req.send(null);          
    req.onreadystatechange = function ()          
    {          
       
    
        if(req.readyState == 3)          
        {          
            $i("ta").value += req.responseText.trim()+"\n";          
        }          
        if(req.readyState == 4 && req.status == 200)          
        {          
             $i("ta").value += "end";          
         }          
    }          
}          
  
//创建XMLHttpRequest          
function createXMLHttp()          
{          
     if (window.ActiveXObject)          
    {          
         var arr = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];          
         for(var i=0 ; i < arr.length; i++)          
        {          
            try          
           {          
              return new ActiveXObject(arr[i]);          
           }catch(e){}          
        }          
    }          
    else if (window.XMLHttpRequest)          
    {          
        return new XMLHttpRequest();          
    }          
    alert("您的浏览器不支持ajax");          
    return null;          
}          
//-->          
</script> 

 

 服务端:push.jsp

<%@ page contentType="text/html;charset=utf-8"%>   
<%   
java.io.PrintWriter p=new   java.io.PrintWriter(response.getOutputStream());   
String msg = "a";   
for(int i=0;i<10;i++)   
{   
	 msg+=i;   
	 p.println("HTTP/1.1 200OK");   
	 p.println("Content-Type:text/html; charset:utf-8");   
	 p.println("Content-Length:"+msg.length());//msg为服务器要发到客户端的信息   
	 p.println();   
	 p.println(msg);   
	 System.out.println(msg);   
	 p.flush();   
	 response.getOutputStream().flush();   
	 try  
	 {   
	  Thread.sleep(1000);   
	 }   
	 catch(Exception e)   
	 { }   
}   
%>  

  

使用JavaScript和Ajax发出异步请求

多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器。

  本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用 XMLHttpRequest,显然不能 使用 XMLHttpRequest。这到底是怎么回事呢 

  Web 2.0 一瞥

  在深入研究代码之前首先看看最近的观点 —— 一定要十分清楚 Web 2.0 这个概念。听到 Web 2.0 这个词的时候,应该首先问一问 “Web 1.0 是什么 ” 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如,到 Amazon.com 网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求,然后响应再返回到浏览器。该请求不仅仅是图书和书目列表,而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。

  Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点。比如在 Google Maps 上,您可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。

  需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。

  但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。

  XMLHttpRequest 简介

  要真正实现这种绚丽的奇迹,必须非常熟悉一个 JavaScript 对象,即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个 方法和属性。

  open():建立到服务器的新请求。
  send():向服务器发送请求。
  abort():退出当前请求。
  readyState:提供当前 HTML 的就绪状态。
  responseText:服务器返回的请求响应文本。
  如果不了解这些(或者其中的任何 一个),您也不用担心,后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是,明确用 XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上,如果看到 XMLHttpRequest 的所有方法和属性,就会发现它们都 与非常简单的请求/响应模型有关。显然,我们不会遇到特别新的 GUI 对象或者创建用户交互的某种超极神秘的方法,我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力,但是用好该对象可以彻底改变您的应用程序。

  简单的 new

  首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单,只要对该对象名使用 new 关键字即可,如 清单 1 所示。

  清单 1. 创建新的 XMLHttpRequest 对象

<script language=”javascript” type=”text/javascript”>
var request = new XMLHttpRequest();
</script>

  不难吧 记住,JavaScript 不要求指定变量类型,因此不需要像 清单 2 那样做(在 Java 语言中可能需要这样)。

  清单 2. 创建 XMLHttpRequest 的 Java 伪代码

XMLHttpRequest request = new XMLHttpRequest();

  因此在 JavaScript 中用 var 创建一个变量,给它一个名字(如 “request”),然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。

  错误处理

  在实际上各种事情都可能出错,而上面的代码没有提供任何错误处理。较好的办法是创建该对象,并在出现问题时优雅地退出。比如,任何较早的浏览器(不论您是否相信,仍然有人在使用老版本的 Netscape Navigator)都不支持 XMLHttpRequest,您需要让这些用户知道有些地方出了问题。清单 3 说明如何创建该对象,以便在出现问题的时候发出 JavaScript 警告。

  清单 3. 创建具有错误处理能力的 XMLHttpRequest

<script language=”javascript” type=”text/javascript”>
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}

if (!request)
alert(“Error initializing XMLHttpRequest!”);
</script>

  一定要理解这些步骤:

  1. 创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件,它表示还没有创建 XMLHttpRequest 对象。
  2. 增加 try/catch 块:
  尝试创建 XMLHttpRequest 对象。
如果失败(catch (failed))则保证 request 的值仍然为 false。
  3. 检查 request 是否仍为 false(如果一切正常就不会是 false)。
  4. 如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

  代码非常简单,对大多数 JavaScript 和 Web 开发人员来说,真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码,还可以告诉您哪儿出了问题。

  应付 Microsoft

  看起来似乎一切良好,至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话,就会看到 图 1 所示的糟糕情形。

  图 1. Internet Explorer 报告错误

  显然有什么地方不对劲,而 Internet Explorer 很难说是一种过时的浏览器,因为全世界有 70% 在使用 Internet Explorer。换句话说,如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎!因此我们需要采用不同的方法处理 Microsoft 浏览器。

  经验证发现 Microsoft 支持 Ajax,但是其 XMLHttpRequest 版本有不同的称呼。事实上,它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型(同时还要支持非 Microsoft 浏览器)。请看看 清单 4,它在前述代码的基础上增加了对 Microsoft 的支持。

  清单 4. 增加对 Microsoft 浏览器的支持

<script language=”javascript” type=”text/javascript”>
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = false;
}
}
}

if (!request)
alert(“Error initializing XMLHttpRequest!”);
</script>

  很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:

  1. 创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。

  2. 增加 try/catch 块:

  尝试创建 XMLHttpRequest 对象。
  如果失败(catch (trymicrosoft)):
  1). 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP)。
  2). 如果失败(catch (othermicrosoft))尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。
   如果失败(catch (failed))则保证 request 的值仍然为 false。
  3. 检查 request 是否仍然为 false(如果一切顺利就不会是 false)。

  4. 如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

  这样修改代码之后再使用 Internet Explorer 试验,就应该看到已经创建的表单(没有错误消息)。我实验的结果如 图 2 所示。

  图 2. Internet Explorer 正常工作

  静态与动态

  再看一看清单 1、3 和 4,注意,所有这些代码都直接嵌套在 script 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。(虽然根据规范不能完全精确地知道这些代码何时运行对浏览器有什么影响,但是可以保证这些代码在用户能够与页面交互之前运行。)这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。

  就是说,也可以像 清单 5 那样将这些代码放在一个方法中。

  清单 5. 将 XMLHttpRequest 创建代码移动到方法中

<script language=”javascript” type=”text/javascript”>

var request;

function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = false;
}
}
}

if (!request)
alert(“Error initializing XMLHttpRequest!”);
}
</script>

  如果按照这种方式编写代码,那么在处理 Ajax 之前需要调用该方法。因此还需要 清单 6 这样的代码。

  清单 6. 使用 XMLHttpRequest 的创建方法

<script language=”javascript” type=”text/javascript”>

var request;

function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = false;
}
}
}

if (!request)
alert(“Error initializing XMLHttpRequest!”);
}

function getCustomerInfo() {
createRequest();
// Do something with the request variable
}
</script>

  此代码惟一的问题是推迟了错误通知,这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象,但(对于本例来说)失败了。然后向用户显示一条警告,明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据!这是非常令人讨厌的,而讨厌显然不会吸引用户再次访问您的网站。

  如果使用静态 JavaScript,用户在点击页面的时候很快就会看到错误信息。这样也很烦人,是不是 可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过,当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此,我建议编写静态的代码,让用户尽可能早地发现问题。

  用 XMLHttpRequest 发送请求

  得到请求对象之后就可以进入请求/响应循环了。记住,XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScript、CSS 或页面中其他代码的工作:改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后,就可以向服务器发送请求了。

  欢迎使用沙箱

  Ajax 采用一种沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest 对象)只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax,现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行,则必须 www.breakneck.com 中运行的脚本发送请求。

  设置服务器 URL

  首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求,但仍然是建立连接所必需的,显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如,清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。

  清单 7. 建立请求 URL

<script language=”javascript” type=”text/javascript”>
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (othermicrosoft) {
try {
request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (failed) {
request = false;
}
}
}

if (!request)
alert(“Error initializing XMLHttpRequest!”);

function getCustomerInfo() {
var phone = document.getElementById(“phone”).value;
var url = “/cgi-local/lookupCustomer.php phone=” + escape(phone);
}
</script>

  这里没有难懂的地方。首先,代码创建了一个新变量 phone,并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML,其中可以看到 phone 字段及其 id 属性。

  清单 8. Break Neck Pizza 表单

<body>
<p><img src=”breakneck-logo_4c.gif” alt=”Break Neck Pizza” /></p>
<form action=”POST”>
<p>Enter your phone number:
<input type=”text” size=”14″ name=”phone” id=”phone”
onChange=”getCustomerInfo();” />
</p>
<p>Your order will be delivered to:</p>
<div id=”address”></div>
<p>Type your order in here:</p>
<p><textarea name=”order” rows=”6″ cols=”50″ id=”order”></textarea></p>
<p><input type=”submit” value=”Order Pizza” id=”submit” /></p>
</form>
</body>

  还要注意,当用户输入电话号码或者改变电话号码时,将触发 清单 8 所示的 getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。最后,电话号码作为 GET 参数附加到该脚本中:”phone=” + escape(phone)。

  如果以前没用见过 escape() 方法,它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符。

  可以根据需要添加任意多个参数。比如,如果需要增加另一个参数,只需要将其附加到 URL 中并用 “与”(&)字符分开 [第一个参数用问号( )和脚本名分开]。

 

转:http://hi.baidu.com/niuniugoon/blog/item/6c66fa4b7a164bf682025c55.html