After reading this ajax example tutorial, I believe that you can easily make a basic AJAX application.
You can also directly access: http://www.jb51.net/codes/57017.html to download the ajax tutorial source code example.
Well, next we will start to let you know the basic AJAX + ASP applications step by step. We will explain them in three steps.
1. Create the front-end AJAX code (javascript.
2. Compile asp ajax code on the backend server.
3. Demo and explanation of ASP + AJAX + database instances.
Step 1: Create the front-end AJAX code (javascript.
Create an index.html front-end file with the following code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> AJAX Tutorial example-ASP + AJAX + ACCESS database application-tutorial on the original ajax instance of the script house </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
</Head>
<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 be disabled ")
Return
}
}
If (navigator. userAgent. indexOf ("Mozilla")> = 0)
{
ObjXmlHttp = new XMLHttpRequest ()
ObjXmlHttp. onload = handler
ObjXmlHttp. onerror = handler
Return objXmlHttp
}
}
</Script>
<Form> select a user:
<Select name = "customers" onchange = "showCustomer (this. value)">
<Option value = "1"> .by.alixixi.com </option>
<Option value = "2"> WAF </option>
<Option value = "3"> radio </option>
</Select>
</Form> <p>
<Div id = "txtHint"> <B> website information... </B> </div>
</P> </body>
</Html>
Ajax code explanation:
The key code is the JS part. The principle is to create a customer's Microsoft. XMLHTTP object to complete the interaction between Foreground Data and ASP on the server.
Note that <select name = "customers" onchange = "showCustomer (this. value)">
The principle of this line of code is through showCustomer (this. value) triggers the AJAX foreground script object, and passes the result data selected by the user in the drop-down list through Microsoft. XMLHTTP is sent to the server for processing, and then returned to the <div ID = "txtHint"> <B> User information with the foreground id txtHint... </B> </div> layer labels are displayed.
Step 2: Compile asp ajax code on the backend server.
After creating the complete index.html, we will create another getcustomer. asp file. Please make sure everything is OK in your ASP environment :)
The getcustomer. asp code is as follows:
Copy codeThe Code is as follows:
<%
SQL = "SELECT * FROM MERs 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 user, you can understand the connection code and query the corresponding database result with the q Parameter sent from the front-end:
Copy codeThe Code is as follows:
SQL = "SELECT * FROM MERs 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
Next, pay attention to this line of code:
Response. CharSet = "GB2312" 'is critical to solve ajax Chinese garbled characters.
Many people often encounter the problem that Chinese AJAX display turns into garbled characters when using ajax. In fact, it is easy to solve this problem in ASP + AJAX applications, just in Response. this line of code is added before the Write statement outputs Chinese content, which can easily solve the problem of ajax Chinese garbled characters.
To continue with the code below, the corresponding database query results are displayed and the database connection is closed:
Copy codeThe Code is 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
Step 3: Demo and explanation of ASP + AJAX + database instances
Along the way, the code is very concise and clear. The following is a description of the database table:
Database Name: ajaxjiaocheng. mdb
Table Name: MERs
Field 1: merid
Field 2: Name text format
Field 3: NL numeric format
Field 4: Address text format
I don't know if you can understand the working principle of AJAX? We recommend that you follow this tutorial step by step to write code and test it.
This example can be intuitively understood as follows:
Use the <select name = "MERs" onchange = "showCustomer (this. value) "> select showCustomer (this. value) event, the selected option value <option value = "1"> foot home </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)
The Upload File ID is txtHint.
In the world of the Internet, I feel that I have no choice.
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
