Ajax Principles and Examples

Ajax keywords:
JavaScript scripts and Extensible Markup Language (XML)
Web browser technology
Open Web standards
Browsers and independent 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 used in browsers. Between the browser and the server, it uses asynchronous data for conversion, and allows the webpage to request a small amount of information from the server rather than the whole webpage.
This technology marks the tiny, SWIFT, and convenient network applications.
Ajax is a browser technology that runs independently without relying on server software.

Ajax is based on public standards
Ajax is based on the following public standards:
XML eXtensible Markup Language
HTML Hypertext Markup Language
CSS Cascading Style Sheets
The public standards used in alax are well defined and supported by some common browsers. Alax applications are independent browsers and platforms (interactive platforms and interactive browser technologies ).

Ajax is related to better network applications
Network applications have more benefits than stand-alone applications. They can meet the needs of more users and are easier to install and support and expand.
However, network applications are not always as friendly as stand-alone applications.
With Ajax, network 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 many years.
Most existing network applications can be rewritten using Ajax to replace the traditional hypertext markup language.

Ajax uses extensible languages and HTTP requests
Traditional network applications submit the input information to the server (using HTML forms ). After the server passes the code, it will send a completely new page to the user.
Because the server returns a new page each time a user submits input information, traditional network applications usually run slowly and are inconvenient to use.
With Ajax, web applications can send and retrieve data without re-downloading the entire web page. This is achieved by sending an HTTP request and using js to partially modify the webpage.
A better way to contact the server is to send data such as eXtensible Markup Language (other methods can also be used ).
In the next chapter of this introduction, you will learn more about how this is done.

Ajax instance

AJAX can be used to create more interactive network applications.

Ajax instance
In the following Ajax example, we will learn how a webpage connects to a Web server when users input data in Webpage format.

Enter the name in the following box * for actual operations, go to w3schools
First name:
Suggestions:

Instance resolution-hypertext mark language mode
The hypertext markup language code in the preceding example is as follows:
<Form>
First name:
<Input type = "text" id = "txt1"
Onkeyup = "showhint (this. Value)">

</Form> <p> suggestions: <span id = "txthint"> </span> </P>
As you can see, it is just a normal form with an input box called "txt1"
The next section contains a span called "txthint. This span is used to store the information retrieved from the server.
When the user inputs data, the function named "showhint ()" will be executed. The execution of this function is triggered by the onkeyup event. In other words, the showhint function is executed whenever you touch the keyboard button in txt1.

Instance resolution-showhint () function
The showhint () function is a simple JS function located 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 entered in the input area.
If any character is input in the input area (Str. length> 0), the function is executed:

Create an XMLHTTP object
Send an HTTP request to "gethint. asp" on the server
When HTTP triggers a change, the XMLHTTP object will execute 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
}
}
The statechanged () function is executed whenever the status of the XMLHTTP object changes.
When the status changes to 4 (or "finished"), the text in txthint span is displayed.

Ajax source code

Ajax example-Ajax source code
The source code below is from the previous page. You can copy and paste it and try it on your own.

Ajax HTML page
This is an HTML webpage. It includes a simple HTML form and link associated with JS
<HTML>
<Head>
<SCRIPT src = "clienthint. js"> </SCRIPT>
</Head> <body> <form>
First name:
<Input type = "text" id = "txt1"
Onkeyup = "showhint (this. Value)">
</Form> <p> suggestions: <span id = "txthint"> </span> </P> </body>
</Html> the JavaScript code is listed below.
The JS Code is as follows:

Ajax JS
This is the JS Code and is saved in the "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 be disabled ")
Return
}
}
If (navigator. useragent. indexof ("Mozilla")> = 0)
{
Objxmlhttp = new XMLHttpRequest ()
Objxmlhttp. onload = Handler
Objxmlhttp. onerror = Handler
Return objxmlhttp
}
}

Ajax Server Page
The server page is sent by JS. It is an ASP file named "gethint. asp". The page is written for IIS using vbs. It can be easily written into PHP or some other service languages. It only checks the name group and returns the matched 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 (10) = "Johanna"
A (11) = "kitty"
A (12) = "Linda"
A (13) = "Nina"
A (14) = "Ophelia"
A (15) = "Petunia"
A (16) = "Amanda"
A (17) = "Raquel"
A (18) = "Cindy"
A (19) = "Doris"
A (20) = "Eve"
A (21) = "Evita"
A (22) = "sunniva"
A (23) = "Tove"
A (24) = "unni"
A (25) = "Violet"
A (26) = "Liza"
A (27) = "Elizabeth"
A (28) = "Ellen"
A (29) = "wenche"
A (30) = "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