Ajax, Ajax instances and Ajax source code (ASP)

Ajax| Source Code

Introduction to Ajax

AJAX Keywords:
JavaScript scripts and Extensible Markup Language (XML)
Web browser Technology
Open Web Standards
Browsers and standalone platforms
Better and faster network applications
XML and HTTP requests

AJAX = Asynchronous JavaScript and Extensible Markup Language
Ajax is a technology that uses JavaScript and Extensible Markup Language (XML) to transfer or accept data between Web browsers and servers.

Ajax is a browser technology
Ajax is a technology that is used in browsers. Between the browser and the server, it transforms using asynchronous data and allows the Web page to request a small amount of information from the server rather than the entire Web page.
This technology marks the micro, swiftness, and ease of web applications.
Ajax is a browser technology that does not need to rely on server software to be shipped independently.

Ajax is based on public standards.
Ajax is based on some of the following public standards:
XML Extensible Markup Language
HTML Hypertext Markup Language
CSS Cascading Style Sheet
Public standards applied to ALAX are well defined and are supported by some of the main common browsers. The Alax application is a standalone browser and platform (interactive platform, Interactive browser technology).

Ajax is about better web apps
Network applications have more benefits than stand-alone applications that meet the needs of more users and are easier to install and facilitate to support and extend.
However, Web applications are not always as good as stand-alone applications.
Using AJAX, Web applications will become more practical (smaller, faster, and easier to use).

Let's start using AJAX today!
No need to learn new knowledge.
Ajax is based on public standards. These standards have been used by most developers for years.
Most existing Web applications can be rewritten with Ajax to replace the traditional Hypertext Markup Language approach.

Ajax uses extensible language and HTTP requests
A traditional Web application submits the input information to the server (using an HTML form). After the server passes the code, a completely new and complete page will be delivered to the user.
Because the server will return a new page each time the user submits the input, traditional Web applications are often slow and inconvenient to use.
With Ajax, Web applications can send and regain data without having to download the entire page again. This is done by sending an HTTP request and using JS to partially modify the Web page.
A better way to connect to a server is to send data such as Extensible Markup Language (other methods can also be used).
You will learn more about how all this is done in the next chapter of this introduction.

Ajax instances

Ajax can be used to create more interactive Web applications.

AJAX instances
In the following Ajax example, we will learn how a Web page is connected to a Web server when a user enters data in a Web page format.

In the box below enter the name * actual operation please go to W3Schools
The Name:
Suggestions:

Instance parsing-Hypertext Markup Language mode
The above examples contain the Hypertext Markup Language code as follows:
<form>
The Name:
<input type= "text" id= "Txt1"
Onkeyup= "Showhint (this.value)" >

</form><p>suggestions: <span id= "Txthint" ></span></p>
As you can see, it's just a plain form with an input box called "Txt1".
The next paragraph includes a span called "Txthint". This span is used to store information that is being restarted from the server.
When the user enters data, a function named "Showhint ()" is executed. The execution of this function is triggered by the "onkeyup" event. To put it another way: whenever a user touches a keyboard button within the Txt1 area, the Showhint function is executed.

Instance resolution-Showhint () function
The Showhint () function is a simple JS function at the top of the HTML.
The function contains the following code:
function Showhint (str)
{
if (Str.length > 0)
{
var url= "gethint.asp?sid=" +math.random () + "&q=" +str
Xmlhttp=getxmlhttpobject (statechanged)
Xmlhttp.open ("Get", url, True)
Xmlhttp.send (NULL)
}
Else
{
document.getElementById ("Txthint"). Innerhtml= ""
}
}
This function is executed whenever a character is typed into the input area
If a character is entered into a text input area (str.length>0) function, it is executed:

Create a XMLHTTP Object
Send an HTTP request to "gethint.asp" on the server
When HTTP triggers a change, the XMLHTTP object executes the statechanged () function

Instance resolution-statechanged () function
The statechanged () function contains the following code:
function statechanged ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")
{
document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext
}
}
Whenever the state of a XMLHTTP object changes the StateChanged () function is executed
When the state changes to 4 (or "done"), the text of the feedback is displayed in the Txthint span.

Ajax Source Code

Ajax examples-Ajax source
The following source code is the previous page. You can copy and paste it and try it yourself.

AJAX HTML page
This is an HTML page. It includes a simple HTML form and associated JS link
<script src= "Clienthint.js" ></script>
The Name:
<input type= "text" id= "Txt1"
Onkeyup= "Showhint (this.value)" >
</form><p>suggestions: <span id= "Txthint" ></span></p> </body>
JS code is below

AJAX JS
This is the JS code, is saved in "clienthint.js" file
var xmlHttp
function Showhint (str)
{
if (Str.length > 0)
{
var url= "gethint.asp?sid=" + math.random () + "&q=" + str
Xmlhttp=getxmlhttpobject (statechanged)
Xmlhttp.open ("Get", url, True)
Xmlhttp.send (NULL)
}
Else
{
document.getElementById ("Txthint"). Innerhtml= ""
}
}
function statechanged ()
{
if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")
{
document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext
}
}
function Getxmlhttpobject (handler)
{
var objxmlhttp=null
if (Navigator.userAgent.indexOf ("Opera") >=0)
{
Alert ("This example doesnt work in Opera")
Return
}
if (Navigator.userAgent.indexOf ("MSIE") >=0)
{
var strname= "Msxml2.xmlhttp"
if (Navigator.appVersion.indexOf ("MSIE 5.5") >=0)
{
Strname= "Microsoft.XMLHTTP"
}
Try
{
Objxmlhttp=new ActiveXObject (StrName)
Objxmlhttp.onreadystatechange=handler
Return objXmlHttp
}
catch (E)
{
Alert ("Error. Scripting for ActiveX might is disabled ")
Return
}
}
if (Navigator.userAgent.indexOf ("Mozilla") >=0)
{
Objxmlhttp=new XMLHttpRequest ()
Objxmlhttp.onload=handler
Objxmlhttp.onerror=handler
Return objXmlHttp
}
}

AJAX Service-Side page
Server-side pages are sent by JS, is a "gethint.asp" ASP file, the page is written with a VBS for IIS. It can be easily written in PHP or some other service language, it simply checks the name group and returns the matching name to the client:
Dim A (30)
A (1) = "Anna"
A (2) = "Brittany"
A (3) = "Cinderella"
A (4) = "Diana"
A (5) = "Eva"
A (6) = "Fiona"
A (7) = "Gunda"
A (8) = "Hege"
A (9) = "Inga"
A (Ten) = "Johanna"
A (one) = "Kitty"
(a) = "Linda"
A (a) = "Nina"
A (a) = "Ophelia"
(a) = "Petunia"
A (a) = "Amanda"
A (a) = "Raquel"
A (a) = "Cindy"
A (a) = "Doris"
A (a) = "Eve"
A (=) = "Evita"
A () = "Sunniva"
A (a) = "Tove"
A (a) = "Unni"
(a) = "Violet"
A (num) = "Liza"
A (a) = "Elizabeth"
A (a) = "Ellen"
A (i) = "Wenche"
A (= "Vicky")
Q=request.querystring ("q") if Len (q) >0 Then
Hint= ""
For I=1 to 30
X1=ucase (Mid (Q,1,len (q))
X2=ucase (Mid (A (i), 1,len (q))
If X1=x2 Then
If hint= "" Then
Hint=a (i)
Else
Hint=hint & "," & A (i)
End If
End If
Next
End If
If hint= "" Then
Response.Write ("no suggestion")
Else
Response.Write (Hint)
End If