apply AjAX in my form

**cstan** · 11-21-2006, 07:29 AM

Hi,

I had a form that consist 18 input the allow user to input. Can i apply with AJAX for process. how can i do that???

I try it but it show out an error.. (i dont understand the error msg but not the httpRequest error msg)...

i try with
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
// retrieve the name typed by the user on the form
deptId = document.getElementById('dept1').value;
emp = document.getElementById('empId1').value;
//consist 18 different value

// execute the quickstart.php page from the server
url = "modules/mailling/queryForAjax.php?type=1&deptId="+deptId+"&emp="+emp+"&key=2";

xmlHttp.open("POST", url, true);
// define the method to handle server responses

xmlHttp.onreadystatechange = handleServerResponse5;

// make the server request
xmlHttp.send(null);
}else{
// if the connection is busy, try again after one second
setTimeout('getEmp1()', 1000);
}

but can we pass all 18 value through the url???
what the limit character the can we put on URL?
the reason i tend to use AJAX in this form because, it still got a lot of process need to process and analysis after the user submit the form.

**mastergeek70** · 11-22-2006, 04:05 PM

AJAX is actually very easy. You can pass your fields via querystring if you like, and return the server-side data via XML. Since XML is hierarchical, you can have as much data as you like, and parse through the results with childNodes[0].nodeValue. Here is a simple AJAX example that you can expand upon.

One quick note: The Javascript code has a line that reads:
var myurl = 'http://localhost/ajax/clock.aspx';

You will need to change this URL to wherever the server side code (clock.aspx) exists

You are welecome to modify this code in any way you like.

time_demo.html : Client front end

Code:

<html>
<head>
<title>Very Simple AJAX Example That Returns Time</title>

<style>
   .displaybox  {
                width:150px;
                background-color:#ffffff;
                border:2px solid #000000;
                padding:10px;
                font:24px normal verdana, helvetica, arial, sans-serif;
                }
</style>

<script language="JavaScript" src="ajax.js">
</script>

</head>
<body style="background-color:#cccccc" onLoad="getServerTime()">
<center>
   <p style="font-family:arial;font-size:28;">Very Simple AJAX Example That Returns Time<p>
   <form>
   <input type="button" value="Get Server Time" onClick="getServerTime()">
   </form>
   <div id="showtime" class="displaybox" style="width: 358; height: 20"></div>
</center>
</body>
</html>

Ajax.js : Javascript

Code:

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    } 
  } 
}
return req;
}

var http = getXMLHTTPRequest();

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  
function getServerTime() {
  var myurl = 'http://localhost/ajax/clock.aspx';
  // MyRand generates a random number to avoid browser cache problem
  myRand = parseInt(Math.random()*999999999999999);
  var modurl = myurl+"?rand="+myRand;  
  http.open("GET", modurl, true);
  http.onreadystatechange = useHttpResponse;
  http.send(null);
}

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

function useHttpResponse() {
   if (http.readyState == 4) {
    if(http.status == 200) { 
       var timeValue = http.responseXML.getElementsByTagName("timenow")[0]; 
       document.getElementById('showtime').innerHTML = ReplaceBadChars(timeValue.childNodes[0].nodeValue);
    }
  } else {
  document.getElementById('showtime').innerHTML = '<img src="anim.gif">';
  }
}

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

function ReplaceBadChars(strTmp){

strTmp=strTmp.replace("&","&");
strTmp=strTmp.replace("<","&lt;");

return strTmp;

}

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

clock.aspx : Server side code (ASP.NET in this example)

Code:

<%@ Page Language="VB" Debug="false"%>

<script runat="server">

' =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Sub Page_Load

If Not IsPostBack Then
End If

dim dtmDate as DateTime
dtmDate=DateTime.Now()

Dim varMsg as string
varMsg=dtmDate.ToString("g")

Dim strXmlNames as string=""
strXmlNames="<?xml version=""1.0"" encoding=""ISO-8859-1"" ?><clock1><timenow>" & ReplaceBadChars(varMsg) & "</timenow></clock1>"
Response.Clear()
Response.ContentType ="text/xml"
Response.Write(strXmlNames)
Response.End()

End Sub

' =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Function Replace(txtSource as string, ToBeReplaced as string, ReplacedWith as string ) as string

dim objStringBuilder as StringBuilder
objStringBuilder = New StringBuilder(txtSource)
objStringBuilder.Replace(ToBeReplaced,ReplacedWith)
Replace=objStringBuilder.ToString()

End function

' =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Function ReplaceBadChars(strTmp as string) as string

  ReplaceBadChars=Replace(strTmp,"&","&")
  ReplaceBadChars=Replace(ReplaceBadChars,"<","&lt;")

End Function

' =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

</script>

**Twey** · 11-22-2006, 06:31 PM

ASP.NET in this example

With VBScript, no less. Ugh.

I had a form that consist 18 input the allow user to input. Can i apply with AJAX for process. how can i do that???

Certainly you can, but what specific reason do you have for doing so? AJAX has several disadvantages associated with it, and should not be used gratuitously.

**mwinter** · 11-22-2006, 09:45 PM

Originally Posted by cstan

I had a form that consist 18 input the allow user to input. Can i apply with AJAX for process.

As Twey wrote, you could, but whether you should is entirely another matter. If this is to work on the Web then you should provide a server-side fallback. The XMLHttpRequest object is not a universal feature.

what the limit character the can we put on URL?

There are no limits in principle, but the shorter, the better. To be absolutely safe, anything over 256 octets would be best sent as POST data.

the reason i tend to use AJAX in this form because, it still got a lot of process need to process and analysis after the user submit the form.

So? Send the user an immediate response, giving them some means to check the results at another time. The server can process the information at its leisure. The HTTP protocol even has a response code to indicate this intention.

Mike

**mastergeek70** · 11-23-2006, 03:38 AM

Originally Posted by Twey

With VBScript, no less. Ugh.Certainly you can, but what specific reason do you have for doing so? AJAX has several disadvantages associated with it, and should not be used gratuitously.

No, its not VBScript, it's Visual Basic .NET, which is a complete different language. I included .NET as a server side example, but any server-side language is acceptable (PHP for example).

**Twey** · 11-23-2006, 05:50 PM

No, its not VBScript, it's Visual Basic .NET

You're right, and I apologise,

which is a complete different language.

but I wouldn't go so far as to say that

Even professional .NET programmers I know gasp in horror at the thought of writing whole web applications in a VB-like language.

**mastergeek70** · 11-26-2006, 06:12 AM

Originally Posted by Twey

You're right, and I apologise,but I wouldn't go so far as to say that

Even professional .NET programmers I know gasp in horror at the thought of writing whole web applications in a VB-like language.

Both VB and C# are sister languages under the .NET umbrella and adhere to the same Common Language Runtime (CLR). I personally really like .NET 2.0 and believe it has come a LONG way. Writing complete web applications is very easy since everything is object oriented and the IDE is highly evolved. The new AJAX Library for .NET is also interesting (http://ajax.asp.net) as well as the AJAX Control Toolkit (although I still prefer Javascript for AJAX). There are clearly some things that .NET doesn't do well, but at least Microsoft is addressing the need to reduce unnecessary postbacks to the server.

It's not for everyone, but I don't think it's "bad"

**Twey** · 11-26-2006, 12:36 PM

I have an instinctual terror of anything related to Visual Basic

It wasn't your use of ASP.NET about which I was commenting, but rather the decision to use VB.NET.

**cstan** · 11-27-2006, 05:26 AM

mastergeek70->my server was using linux, so ur solution cant apply to me.

mwinter, Twey ->

Certainly you can, but what specific reason do you have for doing so? AJAX has several disadvantages associated with it, and should not be used gratuitously.

this was user requirement. All fields were required by user. Then the data pass to server still got a lot process and analysis need to. so it cause the server slow response. That y i try using AJAX so that it can prompt a pic/msg to tell user still in process...

I get the solution with compine all d data in one string and send it to server.

xmlHttp.send(null);

changed to

xmlHttp.send(data);

thanks to all helping me.

**tech_support** · 11-27-2006, 06:26 AM

That y i try using AJAX so that it can prompt a pic/msg to tell user still in process...

Surely you can do that a different way.

I get the solution with compine all d data in one string and send it to server.

Code:

xmlHttp.send(null);

changed to

Code:

xmlHttp.send(data);

It's suppose to be null, not data.

If you still want ajax, you could use this code and design a script to fit your needs:

Code:

function ajax(url){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			return ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET", url, true);
	ajaxRequest.send(null); 
}

Thread: apply AjAX in my form

Thread Tools

Search Thread

apply AjAX in my form

AJAX Example

AJAX Example

Bookmarks

Bookmarks

Posting Permissions