PDA

View Full Version : 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. :cool:

time_demo.html : Client front end


<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


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

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)


<%@ 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 exampleWith 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
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
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 .NETYou'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
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.


xmlHttp.send(null);

changed to


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:



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);
}

Twey
11-27-2006, 07:29 AM
It's suppose to be null, not data.Not when sending via POST :)

mwinter
11-27-2006, 03:45 PM
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.

I can understand that the client requires a near-immediate response, but dictating AJAX would be odd. Still, it would be your job to explain why it's a bad idea.



All fields were required by user.

That's something that would need to be established server-side, anyway. A check can be made client-side, too, but validation must always be included server-side.



Then the data pass to server still got a lot process and analysis need to. so it cause the server slow response.

Which is why the server should queue the data and send an immediate response. The response would contain instructions for viewing the result. If the processing may take a very long time, you could even e-mail a notification (at the end-user's request).

Take Browsershots (http://browsershots.org/), for example. The user first enters the URL of a document to be captured, and submitting that forwards the user to a new form. Here, the user can choose which browsers are used to produce the screenshots. Submission at this point takes the user to the same URL, albeit updates with information about the capture process. The user can now choose to bookmark the URL and return at a later time, or refresh the document periodically until the captures are completed, or have timed-out.



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

If you are to use AJAX at all, it still needs to be based around an approach that doesn't require it. The server-side aspect is inescapable - still assuming that this is for the Web.






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;
}
}
}


Only the ActiveX portion requires exception handling, that should ideally be hidden using JScript conditional comments to prevent older browsers from raising unnecessary errors. Moreover, that alert message is abominable. See my getRequestObject function (http://www.dynamicdrive.com/forums/showpost.php?p=54667&postcount=5) for an example.

Mike