用JQuery跟JQuery ui实现的一个简单login例子

用JQuery和JQuery ui实现的一个简单login例子
例子中用了TCPMonitor代理监控发出和接收到的soap消息。

<html><head><style type="text/css"><!--.block{border:2px solid #760000;background-color:#ffb5b5;width:300px; height:85px;margin:5px; float:left; padding:20px; text-align:center;font-size:14px;font-family:Arial, Helvetica, sans-serif;}#draggable { width: 150px; height: 150px; padding: 0.5em; }--></style><script src="demo/jquery-1.4.2.js"></script><script language="javascript" src="demo/ui/jquery.form.js"></script><script src="demo/ui/jquery.ui.core.js"></script><script src="demo/ui/jquery.ui.widget.js"></script><script src="demo/ui/jquery.ui.mouse.js"></script><script src="demo/ui/jquery.ui.draggable.js"></script><script src="demo/external/jquery.bgiframe-2.1.1.js"></script><script src="demo/ui/jquery.ui.position.js"></script><script src="demo/ui/jquery.ui.resizable.js"></script><script src="demo/ui/jquery.ui.dialog.js"></script><script src="demo/ui/jquery.effects.core.js"></script><script src="demo/ui/jquery.effects.blind.js"></script><script src="demo/ui/jquery.effects.explode.js"></script><link rel="stylesheet" href="demo/themes/base/jquery.ui.all.css"><link rel="stylesheet" href="demo/demos.css">    <script>$(function(){//alert($(".block").length);//直接调用拖拽方法$(".block").draggable();});$.fx.speeds._default = 1000;$(function() {$("#result").dialog({autoOpen: false,show: "blind",hide: "explode",position: "center",height: "350",width: "250"});});$(function(){$("input#clearButton").click(function(){$("#loginForm").clearForm();$('#result').html("");});$("input[type=button]:eq(2)").click(function(){$("#loginForm").resetForm();$('#result').html("");});});  function callservice() {var username = $("#username").val();var password = $("#password").val();if(username == ""){  alert('Please input the value, it is required!');  $("#username").focus();  return;}if(password == ""){  alert('Please input the value, it is required!');  $("#password").focus();  return;}// firefoxif(window.DOMParser){    try     {         netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");     }    catch (exception)    {         alert(exception);     }}var q = '<Envelope xmlns="http://schemas.xmlsoap.org/soap/envelope/">'    +'<Body>'    +'<login xmlns="http://www.perficient.com/namespaces/geh/api">'    +'<username>' + username + '</username>'    +'<password>' + password + '</password>'    +'</login>'    +'</Body>'    +'</Envelope>' ;   //alert(q);$.ajax({url: 'http://127.0.0.1:1234/geh-main/services/GEH-API',data: q,type: 'post',dataType: "html",beforeSend:function (xhr) {xhr.setRequestHeader("Content-Type", "text/xml; charset="UTF-8"");xhr.setRequestHeader("SOAPAction", """");}, success: function(res) {//alert(res);//$('#result').html(res.getElementsByTagNameNS("http://www.perficient.com/namespaces/geh/api", "loginResponse")[0].childNodes[0].childNodes[0].nodeValue);$('#result').html(res);$("#result").dialog("open");return false;},error: function(xhr,thrownError) {    //alert(xhr.responseText);$('#result').html(xhr.status+" "+thrownError+": "+xhr.responseText);$("#result").dialog("open");return false;}});}    </script></head><body><div class='block' align="center"><form id="loginForm" name="loginForm"><div>username<input type="text" id="username" name="username" value="input username"/></div><div>password<input type="text" id="password" name="password"/></div><div><input type="button" value="login" onClick="callservice();"/><input type="button" name="Clear" id="clearButton" value="Clear"><input type="button" name="Reset" id="resetButton" value="Reset"></div></form></div><div id="result" title="Basic dialog"></div></body><html>