网上关于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 languagesin 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 developingstatistical 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（适合初学者）相关推荐

  1. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  2. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...

  3. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...

  4. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...

  5. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...

  6. 【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~

    b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...

  7. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个复古手机键盘（带声音）的动画效果~~适合初学者~超简单~

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个复古手机键盘(带声音)的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  8. Web前端：适合初学者的最佳 JavaScript 项目

    ​ 学习 JavaScript 或任何其他编程语言的关键需要投入大量时间和精力来开发大量项目,这里有一些最佳 JavaScript 项目. 1. 计算器 这是初学者可以开发的最基本的大多数应用程序,编 ...

  9. 有什么好的Java自学教程视频，适合初学者

    动力节点Java培训最新上线Java实验班,等你来测试自己适不适合学习Java编程哦! 随着互联网的发展,视频教程充斥着网络,很多人为了能够在视频教程中捞取一桶金,纷纷投入视频售卖的大军之中,其中不乏 ...

  10. 适合初学者的安卓开源项目_开源初学者的6个起点

    适合初学者的安卓开源项目 Opensource.com几个月前问读者: 参与开源的最大障碍是什么? 来自56%的民意测验者的回答是他们不确定从哪里开始. 而且,有13%的人表示不愿意加入. 如果您有相 ...

最新文章

  1. PendingIntent详解
  2. 利用matlab命令画出以下信号的波形,MATLAB实验报告
  3. boost::diagnostic_information_what的用法程序
  4. memcached 使用 java_java中Memcached的使用（包括与Spring整合）
  5. 前端字符串内HTML标签无效的处理方式
  6. “405 – 不允许用于访问此页的 HTTP 谓词。”的解决方案
  7. SpringBoot2.0都更新了那些内容
  8. 转载：如何规范地编写一个MATLAB函数文件
  9. 用java编写程序_用JAVA编写程序
  10. UnityShader20：CommandBuffer初见（上）
  11. 如何提升自身的C++开发技术？
  12. 高浓度DHA 德国奎尔鱼油 （QÜELL FISH OIL™HIGH DHA）
  13. 一个月的java工作总结
  14. 文科专业考计算机专业研究生,跨专业文科生考计算机研究生的经验
  15. AUTOSAR MCAL详解：FLS
  16. 电商维权，维权方法汇总【超全】
  17. 无人机自动悬停的秘密
  18. JLINK的SWD接口调试器制作
  19. 【多线程】线程与进程、以及线程进程的调度
  20. thinkphp excel表格导出

热门文章

  1. Redis常用命令之操作SortedSet(有序集合)
  2. AndroidStudio报错：GradleSyncIssues-Could not install Gradle distribution from...
  3. GitLab-使用SSH的方式拉取和推送项目
  4. SpringBoot中整合使用Freemarker
  5. 终于把单点登录完整流程图画明白了！史上最完整的CAS单点登录完整图解！
  6. 产品待办列表的几个最佳实践
  7. 对话：在敏捷中，是否可以仍然用需求来替代用户故事？
  8. 2、mybatis主配置文件之properties
  9. c++ 异步下获取线程执行结果_【分享吧】C++11多线程库介绍
  10. android布局layout,Android布局（FrameLayout、GridLayout）