1. 程式人生 > >JavaScript之使用AJAX(適合初學者)

JavaScript之使用AJAX(適合初學者)

window pear including orf static pla into rst sse

??網上關於AJAX的教程和教程層出不窮,實現生活中關於AJAX的書籍也是琳瑯滿目,然而太多的選擇容易令人眼花繚亂,不好取舍。事實是,一般的教程或書籍都不會講Web服務器的搭建,因此,對於初學者(比如筆者)來說,好不容易學習了AJAX的知識,卻還是沒有辦法親身實踐操作一把,這是多大的遺憾啊!
??所以這一次,筆者將會舉一個簡單的AJAX應用實例,來詳細地講述如何在本地電腦上使用AJAX來滿足Web開發要求。
??首先,我們需要在自己的電腦上安裝好XAMPP,這是為了開啟Apache服務器,這樣就不需要我們自己再去搭建服務器。XAMPP的下載地址為:https://www.apachefriends.org/zh_cn/index.html .
??下載完後直接安裝即可。筆者下載的Window版本,安裝完後,打開XAMPP Control Panel,點擊“Apache”前面的按鈕來安裝Apache服務,並點擊“Apache”後面的start按鈕以開啟Apache服務,如下圖所示:


技術分享圖片

Apache的默認端口應為443,筆者因為該端口已被占用,故改為4431.
??接著我們在XAMPP的安裝目錄下的htdocs的文件夾下分別新建一個HTML文件:programming_language_intro.html和PHP文件:intro.php,如下如所示:

技術分享圖片

??其中programming_language_intro.html的代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showIntro(){
    //所有現代瀏覽器均支持XMLHttpRequest對象(IE5和IE6使用ActiveXObject)
//XMLHttpRequest用於在後臺與服務器交換數據 var xmlhttp = new XMLHttpRequest(); var str = document.getElementById("language").value; //onreadystatechange:存儲函數(或函數名),每當readyState屬性改變時,就會調用該函數 //readyState:4表示請求已完成,且響應已就緒 //status:200表示"OK" xmlhttp.onreadystatechange = function(){ if
(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("p1").innerHTML = "Introduction of "+str+":"; //獲取來自服務器的響應:responseText表示獲得字符串形式的響應數據 document.getElementById("intro").innerHTML = xmlhttp.responseText; } } //將請求發送到服務器 //open()的三個參數分別為:GET請求或POST請求,url:服務器上的文件,異步:是或否 xmlhttp.open("GET","intro.php?query="+str,true); xmlhttp.send(); } //刷新頁面 function refresh_page(){ location.reload(); } </script> </head> <body> <h3>Programming Language Introduction</h3> <form action=""> Language: <select id=‘language‘> <option>C</option> <option>HTML</option> <option>Java</option> <option>JavaScript</option> <option>PHP</option> <option>Python</option> <option>R</option> <option>Scala</option> </select> </form> <br> <button onclick="showIntro()">SHOW</button> <button onclick="refresh_page()">REFRESH</button> <p id=‘p1‘>Introduction: </p> <p><span id="intro"></span></p> </body> </html>

在showIntro()中使用了AJAX,關於AJAX的具體教程可以參考:http://www.runoob.com/ajax/ajax-tutorial.html .
??intro.php的代碼如下:(PHP語言)

<?php
//$intro:Associative Array, keys are programming languages
$intro = array();

$intro["C"] = "C is a general-purpose, imperative computer programming language, supporting structured programming,  lexical variable scope and recursion, while a static type system prevents many unintended operations. By design, C provides constructs that map efficiently to typical machine instructions, and therefore  it has found lasting use in applications that had formerly been coded in assembly language, including operating systems, as well as various application software for computers ranging from supercomputers to embedded systems.";
                    
$intro["HTML"] = "Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.";

$intro["Java"] = "Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[15] and specifically designed to have as few implementation dependencies as possible. It is intended to let application developers ‘write once, run anywhere‘ (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM)regardless of computer architecture. As of 2016, Java is one of the most popular programming languages in use, particularly for client-server web applications, with a reported 9 million developers. Java was originally developed by James Gosling at Sun Microsystems (which has since been acquired by Oracle Corporation) and released in 1995 as a core component of Sun Microsystems‘ Java platform. The language derives much of its syntax from C and C++, but it has fewer low-level facilities than either of them.";

$intro["JavaScript"] = "JavaScript often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websitesemploy it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementationof JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.";
                    
$intro["PHP"] = "PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. Originally created by Rasmus Lerdorf in 1994, the PHP reference implementation is now produced by The PHP Group. PHP originally stood for Personal Home Page, but it now stands for the recursive backronym PHP: Hypertext Preprocessor";
                 
$intro["Python"] = "Python is an interpreted high-level programming language for general-purpose programming. Created by Guido van Rossumand first released in 1991, Python has a design philosophy that emphasizes code readability, and a syntax that allows programmers to express concepts in fewer lines of code, notably using significant whitespace. It provides constructs that enable clear programming on both small and large scales.";
                    
$intro["R"] = "R is a free (libre) programming language and software environment for statistical computing and graphics that is supportedby the R Foundation for Statistical Computing. The R language is widely used among statisticians and data miners for developing statistical software and data analysis. Polls, surveys of data miners, and studies of scholarly literature databases show that R‘s popularity has increased substantially in recent years. R ranks 8th in the TIOBE index.";
               
$intro["Scala"] = "Scala is a general-purpose programming language providing support for functional programming and a strong static type system.Designed to be concise, many of Scala‘s design decisions aimed to address criticisms of Java.";
                   
//get the query parameter from URL
$query = $_GET["query"];
echo $intro[$query];
?>

??在瀏覽器中輸入http://localhost/programming_language_intro.html ,得到的頁面如下:


技術分享圖片

??在下拉菜單中選擇"JavaScript",則頁面如下:

技術分享圖片

??在下拉菜單中選擇"Python",則頁面如下:

技術分享圖片

??筆者的學習心得:有時候光看網上或書上的教程,是遠遠不夠的,因為可能並沒有將如何具體地操作實踐,最好的學習方法還是自己親自實踐一把,然後寫個Blog記錄之~~
??本次分享到此結束,歡迎大家交流~~

JavaScript之使用AJAX(適合初學者)