Examples of Ajax tutorials [Arisisi original]
In fact, the initial application of Ajax is very simple, popular is the client (JavaScript) and server (ASP or PHP, etc.) scripting language data interaction.
After reading this Ajax example tutorial, I believe you can also easily make a beginner AJAX application.
You can also direct access to: Http://www.alixixi.com/web/web/ajax/jiaocheng.html Preview The source example of this Ajax tutorial.
OK, let's start with a step-by-step understanding of the Ajax+asp Foundation application, which we will explain in three steps, as follows.
1. foreground AJAX Code (JavaScript) creation.
2. backend server ASP AJAX code writing.
3. Demonstration and explanation of asp+ajax+ database.
First step: Front desk AJAX Code ( JavaScript ) is created.
We first create a index.html foreground file with the following content code:
<title>ajax Tutorial Instance-ajax Tutorial Instance-asp+ajax+access database application-Arisisi original AJAX Instance tutorial </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<body>
<script> var xmlHttp
function Showcustomer (str)
{
var url= "getcustomer.asp?sid=" + math.random () + "&q=" + str
Xmlhttp=getxmlhttpobject (statechanged)
Xmlhttp.open ("Get", url, True)
Xmlhttp.send (NULL)
}
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 doesn ' t 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
}
}
</script>
<form> Please select users:
<select name= "Customers" >
<option value= "1" > Arisisi .by.alixixi.com</option>
<option value= "2" > Wow plug net </option>
<option value= "3" > Radio </option>
</select>
</form><p>
<div id= "Txthint" ><b> website Information ...</b></div>
</p></body>
Ajax Code Explanation:
The key code for the JS section, the principle is to create a customer's Microsoft.XMLHTTP object, to complete the foreground data and service-side ASP interaction.
And then the attention is <select name= "Customers" >
This line of code, the principle is through Showcustomer (this.value) trigger Ajax foreground Script object, the user in the Drop-down list of the results selected by Microsoft.XMLHTTP sent to the server processing, and then returned to the foreground ID for Txthint <div id= "Txthint" ><b> user information ...</b></div> layer label is displayed.
Step Two: Background Service End ASP AJAX code is written.
After creating the index.html, we will then create a getcustomer.asp file, please confirm your ASP environment all OK:
The code for getcustomer.asp is as follows:
<%
Sql= "SELECT * from CUSTOMERS WHERE customerid="
Sql=sql & Request.QueryString ("Q")
Set Conn=server.createobject ("ADODB. Connection ")
Conn. Provider= "Microsoft.Jet.OLEDB.4.0"
Conn. Open (Server.MapPath ("Ajaxjiaocheng.mdb"))
Set rs = Server.CreateObject ("Adodb.recordset")
Rs. Open SQL, Conn
Response.Charset = "GB2312"
If not Rs. EOF Then
Response.Write "<li> No.:" &rs (0) & "</li>"
Response.Write "<li> Name:" &rs (1) & "</li>"
Response.Write "<li> Click:" &rs (2) & "</li>"
Response.Write "<li> Introduction:" &rs (3) & "</li>"
End If
Rs.close
Set rs = Nothing
Conn.close
Set conn = Nothing
%>
Ajax Code Explanation:
If you have an ASP based on a friend can understand, connect the database code and with the front desk sent over the Q parameter query the corresponding database results:
Sql= "SELECT * from CUSTOMERS WHERE customerid="
Sql=sql & Request.QueryString ("Q")
Set Conn=server.createobject ("ADODB. Connection ")
Conn. Provider= "Microsoft.Jet.OLEDB.4.0"
Conn. Open (Server.MapPath ("Ajaxjiaocheng.mdb"))
Set rs = Server.CreateObject ("Adodb.recordset")
Rs. Open SQL, Conn
The next thing to note is this line of code:
Response.Charset = "GB2312" is the key to solve the Ajax Chinese garbled
Many people in the use of Ajax process, often encounter Ajax Chinese display into garbled problem, in fact, in Asp+ajax application is very easy to solve this problem, Only need to add this line of code before the Response.Write statement output Chinese content, can easily solve the Ajax Chinese garbled problem.
Continue to explain the next section of code, that is, display the corresponding database query results, close the database connection:
If not Rs. EOF Then
Response.Write "<li> No.:" &rs (0) & "</li>"
Response.Write "<li> Name:" &rs (1) & "</li>"
Response.Write "<li> Click:" &rs (2) & "</li>"
Response.Write "<li> Introduction:" &rs (3) & "</li>"
End If
Rs.close
Set rs = Nothing
Conn.close
Set conn = Nothing
Step Three: asp+ajax+ example demonstration and explanation of database
All the way down, the code is very concise and clear, I believe that after watching, you can prepare to start testing yourself. Below we enclose the database table description and screenshot as follows:
Library Name:ajaxjiaocheng.mdb
Table name: Customers
Field 1:CustomerID automatic numbering
Field 2:Name Text Format
Field 3:NL number format
Field 4: Address text Format
See here, do not know if you can understand how Ajax works? It is recommended that you write the code and test it step-by-step with this tutorial.
This example is intuitive to say that you can understand this:
Select the Showcustomer (this.value) event that triggers the JS code by selecting the <select name= "Customers" > Drop-down list on the index.html page to select the option value <option Value= "1" > Arisisi </option>
The following code is passed to the ASP file:
var url= "getcustomer.asp?sid=" + math.random () + "&q=" + str
Xmlhttp=getxmlhttpobject (statechanged)
Xmlhttp.open ("Get", url, True)
Xmlhttp.send (NULL)
After the ASP file receives the Q parameter, the output database corresponding query result, then JS will check the ASP's output state, if the output completes will return the result to the index.html file ID txthint label.
Haha, this intuitive statement is only for the most elementary Ajax learners apply, want to be Ajax ace see will be ashamed.
OK, this Ajax instance tutorial is finished, this AJAX instance provides the source code download, the download address is: Http://www.alixixi.com/download/ajaxjiaocheng.rar. The demo address is: http://www.alixixi.com/web/web/ajax/jiaocheng.html. If you have other questions or want to learn more about Ajax tutorials and resources, welcome to the Ajax Tutorials section of the Arisisi Web development Community, Web site: http://www.alixixi.com/web/web/ajax/.
Author: Arisisi
URL: http://www.alixixi.com
Date: 2007-12-08
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
