Examples of AJAX tutorials, asp+ajax+access database application tutorial (with source code)

Source: Internet
Author: User
Tags format object end html page sql table name access database access
access|asp+| Data | database |ajax Tutorial

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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.