After reading this Ajax example tutorial, I believe you can also easily make a beginner AJAX application.
You can also directly access: http://www.jb51.net/codes/57017.html Download the Ajax tutorial source code example.
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.
The first step: the creation of the foreground Ajax code (JavaScript).
We first create a index.html foreground file with the following content code:
Copy Code code as follows:
<title>ajax Tutorial Instance-ajax Tutorial Instance-asp+ajax+access database application-Original AJAX example tutorials for cloud Habitat Community </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" onchange= "Showcustomer (this.value)" >
<option value= "1" > Cloud-dwelling Community .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.
Then note that <select name= "Customers" onchange= "Showcustomer (this.value)" >
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.
The second step: backend Server ASP Ajax code writing.
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:
Copy Code code 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:
Copy Code code 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
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:
Copy Code code as follows:
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
The third step: demonstration and explanation of the example of asp+ajax+ database
All the way down, the code is very concise. Next we enclose the database table with the following description:
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:
Choose Onchange= from the <select name= "Customers" Showcustomer "This.value (Showcustomer)" > Drop-down list on the index.html page to trigger the JS code ( This.value) event, will select the option value <option value= "1" > Cloud Habitat </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.
In the internet world, I feel that I can not.
