| 發表文章 | 發起投票 |
[AJAX基礎教學 - 3]Your first AJAX program
因為呢個program會用到JavaScript, PHP同HTML，所以你地最好要有小小呢3個方面的知識。
[#FF0000]TOOLS:
1. 由於用到PHP，你地要裝一D軟件令到你部機做server，個人推薦用easyPHP，
http://www.easyphp.org/easyphp-devserver.php
然後將所以你建立的html,js,php之類放係C:\Program Files (x86)\EasyPHP-DevServer-13.1VC11\data\localweb\projects\”here”
到最後你可以係browser度打 localhost 又或者 127.0.0.1去test你個program
2. 用notepad++寫任何programs
http://notepad-plus-plus.org/download/v6.4.2.html[/#FF0000]
We are going to build a very simple but awesome web-based AJAX program. In this program, we are going to type in some texts in the textbox and see if it exists or not.
Here is the first AJAX program:
Source code: http://www.sendspace.com/file/yh8xob
When you first visit it:
After you type in some texts like “hkgolden”, it told you that “we have no hkgolden” because the server doesn’t have this record.
Re-type other texts like “hkgalden”, the server found it.
This program consists of three different files; there are index.html, website.php and website.js
index.html is used to create the user-interface of the webpage
website.js is used to create a AJAX program, it will be explained in detail later
website.php is used to do the matching and output the XML file
1. First, you just open your notepad++, whatever you are using, and type this code in your editor.
This is a very simple structure of every HTML page.
2. [#FF0000]In head[/#FF0000], of course, we [#FF0000]link it to a JavaScript file[/#FF0000], please just type in <script type="text/javascript" src="website.js"></script> inside the head tag.
[#FF0000]In HTML5, you don’t need to type “type="text/javascript"” because it will be automatically treated as Javascript.[/#FF0000][/size=2]
3. In our body, of course, we make our interface there. In the opening body tag, [#FF0000]we want the JavaScript file is called as soon as the webpage is fully loaded[/#FF0000], so [#FF0000]we have to specific an “onload” attribute[/#FF0000].
So the line 5 is: <body onload="process()">, the process() function, of course, we will create it in our JavaScript file called” website.js” later.
4. We continue to create the interface. Please just type in:
Please enter your website:
<input type="text" id="input" />
Please [#FF0000]make sure[/#FF0000] [#FF0000]you have to give an id[/#FF0000] to the [#FF0000]input box[/#FF0000] because we need to reference it whenever we are working with AJAX.
5. And under this, we are going to be [#FF0000]changing a portion of the website[/#FF0000]. So we are going to be changing a <div> element. The div will be changing dynamically based on what the user type in.
The final HTML will be looked:
[/size=4]
0
0本貼文共有 0 個回覆
此貼文已鎖，將不接受回覆
| 發表文章 | 發起投票 |