| 發表文章 | 發起投票 |
[AJAX基礎教學 - 6]Your first AJAX program
Welcome to the AJAX – 6 tutorial[/size=6][/center]
What We did in the previous tutorial?[/size=5]
We have completed the PHP file and gave the content of the XML file.
What we have now?[/size=5]
[#FF0000]A complete HTML file
A complete PHP file[/#FF0000]
Source code: http://www.sendspace.com/file/yh8xob[/size=3]
What we are going to do?[/size=5]
Let’s [#FF0000]create[/#FF0000] a last file that is the core of the AJAX – the [#FF0000]JavaScript file[/#FF0000]. In JavaScript file, we are going to [#FF0000]create an XMLHttpObject[/#FF0000] which is [#FF0000]the heart of AJAX[/#FF0000].
Step:
1. In notepad++, please new a file and save it as “[#FF0000]website.js[/#FF0000][/size=3]”, please make sure the name of this file is the same as the file where you linked in your HTML file.
I.e. <script type="text/javascript" src="[#FF0000]website.js[/#FF0000]"></script>[/size=3]
2. In JavaScript file, let’s create an easy-to-use variable because this object has a long name. Please type:
var xmlHttp = createXmlHttpRequestObject();
createXmlHttpRequestObject() is a function that we are going to build right now.
[#FF0000]xmlHttp[/#FF0000] is an awesome and important object that [#FF0000]allows you to communicate the server without having reload your webpage[/#FF0000].[/size=3]
3. To create a function called [#FF0000]createXmlHttpRequestObject()[/#FF0000]
Why do we need it?[/size=5]
We have to [#FF0000]create a proper XMLHttpRequest Object for different browsers[/#FF0000] and I.E is suck.
Please type:
==============================================================================================
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}
else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp){
alert("XMLHttpObject cannot be created, dude!");
}
else{
return xmlHttp;
}
}[/size=3]
======================
========================================================================
4. After typed the above codes, your code should be looked like this:
Code1: As you can see, function createXmlHttpRequestObject() is assigned to variable xmlHttp, it means this function will return something.
Code4: declare an object that will be used to be returned.
Code5: in order [#FF0000]to use AJAX[/#FF0000] for those who is [#FF0000]using Internet Explorer[/#FF0000], we make sure AJAX is work for them, so if(window.ActiveXOject) is true only when user is using IE.
Code6-7: try to set a variable “xmlHttp” equal to the object that the user has IE.
Code8-9: [#FF0000]even if[/#FF0000] the user is [#FF0000]using IE[/#FF0000], but [#FF0000]sometimes the object may not be created successfully[/#FF0000]. So catch an exception that makes the “xmlHttp” variable equal to false.
Code12-18: try to set a variable “xmlHttp” equal to the object that the user is not using IE, like: Firefox or Google Chrome.
Code14: remember [#FF0000]XMLHttpRequest() is a build-in function[/#FF0000], we don’t need to build it by ourselves.
Code20-25: [#FF0000]xmlHttp[/#FF0000] is the object used to [#FF0000]communicate with the PHP or XML behind the scene[/#FF0000] that user cannot know. So we have to [#FF0000]make sure if it is successfully built[/#FF0000].
If the XMLHttpObject cannot be created, it will alert you; otherwise, it returns the object to xmlHttp that is in code1.[/size=3]
Congratulation[/size=5]
You have just done the awesome thing that is the [#FF0000]createXmlHttpRequestObject() function[/#FF0000] because in [#FF0000]every AJAX program[/#FF0000] and the rest of my tutorials [#FF0000]are going to use this function[/#FF0000]. You can just copy and paste it every time as you write AJAX program.
In the next tutorial[/size=5]
We are going to [#FF0000]communicate with the server[/#FF0000].
[/size=4]
支持原創，本example係抄網上的，作修改explain
0
0本貼文共有 0 個回覆
此貼文已鎖，將不接受回覆
| 發表文章 | 發起投票 |