JavaScript之使用AJAX（适合初学者）

傷城~ 2022-06-01 02:18 266阅读 0赞

网上关于AJAX的教程和分享层出不穷，现实生活中关于AJAX的书籍也是琳琅满目，然而太多的选择容易令人眼花缭乱，不好取舍。事实是，一般的教程或书籍都不会讲Web服务器的搭建，因此，对于初学者（比如笔者）来说，好不容易学习了AJAX的知识，却还是没有办法亲身实践操作一把，这是多大的遗憾啊！  
  所以这一次，笔者将会举一个简单的AJAX应用实例，来详细地讲述如何在本地电脑上使用AJAX来满足Web开发要求。  
  首先，我们需要在自己的电脑上安装好XAMPP，这是为了开启Apache服务器，这样就不需要我们自己再去搭建服务器。XAMPP的下载地址为：[https://www.apachefriends.org/zh\_cn/index.html][https_www.apachefriends.org_zh_cn_index.html] .  
  下载完后直接安装即可。笔者下载的Window版本，安装完后，打开XAMPP Control Panel，点击“Apache”前面的按钮来安装Apache服务，并点击“Apache”后面的start按钮以开启Apache服务，如下图所示：

![开启Apache服务][Apache]  
  
Apache的默认端口应为443，笔者因为该端口已被占用，故改为4431.  
  接着我们在XAMPP的安装目录下的htdocs的文件夹下分别新建一个HTML文件：programming\_language\_intro.html和PHP文件:intro.php，如下如所示：  
  
![新建文件][SouthEast]  
  
  其中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][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 websites
                            employ 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 implementation
                            of 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 Rossum
                        and 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 supported
                   by 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][http_localhost_programming_language_intro.html] ,得到的页面如下：

![programming\_language\_intro.html][programming_language_intro.html]  
  
  在下拉菜单中选择”JavaScript”，则页面如下：  
  
![JavaScript介绍][JavaScript]  
  
  在下拉菜单中选择”Python”，则页面如下：  
  
![JavaScript介绍][JavaScript 1]  
  
  笔者的学习心得：有时候光看网上或书上的教程，是远远不够的，因为可能并没有讲如何具体地操作实践，最好的学习方法还是自己亲自实践一把，然后写个Blog记录之~~  
  本次分享到此结束，欢迎大家交流~~

[https_www.apachefriends.org_zh_cn_index.html]: https://www.apachefriends.org/zh_cn/index.html
[Apache]: /images/20220601/f5a0e08be4e944708d3c0f02bd83927a.png
[SouthEast]: /images/20220601/1b4140340b80411d8536e267a702f366.png
[http_www.runoob.com_ajax_ajax-tutorial.html]: http://www.runoob.com/ajax/ajax-tutorial.html
[http_localhost_programming_language_intro.html]: http://localhost/programming_language_intro.html
[programming_language_intro.html]: /images/20220601/9cd09f29d8a649e2a34ba80d8cf6fd79.png
[JavaScript]: /images/20220601/215db09cc8854ee7830558a29b9ece07.png
[JavaScript 1]: /images/20220601/7ab6a20b4f814e3d824a12244585c8e2.png