网上关于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服务](http://img.blog.csdn.net/20180117161025730?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

Apache的默认端口应为443,笔者因为该端口已被占用,故改为4431.
  接着我们在XAMPP的安装目录下的htdocs的文件夹下分别新建一个HTML文件:programming_language_intro.html和PHP文件:intro.php,如下如所示:

![新建文件](http://img.blog.csdn.net/20180117161614027?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

  其中programming_language_intro.html的代码如下:
```html

Programming Language Introduction

Language:

C
HTML
Java
JavaScript
PHP
Python
R
Scala

SHOW
REFRESH

Introduction:

```
在showIntro()中使用了AJAX,关于AJAX的具体教程可以参考:http://www.runoob.com/ajax/ajax-tutorial.html .
  intro.php的代码如下:(PHP语言)
```PHP
$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 ,得到的页面如下:
<center>
![programming_language_intro.html](http://img.blog.csdn.net/20180117163841535?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
</center>
&emsp;&emsp;在下拉菜单中选择"JavaScript",则页面如下:
<center>
![JavaScript介绍](http://img.blog.csdn.net/20180117163235236?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
</center>
&emsp;&emsp;在下拉菜单中选择"Python",则页面如下:
<center>
![JavaScript介绍](http://img.blog.csdn.net/20180117163336722?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
</center>
&emsp;&emsp;笔者的学习心得:有时候光看网上或书上的教程,是远远不够的,因为可能并没有讲如何具体地操作实践,最好的学习方法还是自己亲自实践一把,然后写个Blog记录之~~
&emsp;&emsp;本次分享到此结束,欢迎大家交流~~

JavaScript之使用AJAX(适合初学者)的更多相关文章

  1. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  2. 【温故而知新-Javascript】使用 Ajax

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...

  3. javascript进阶之AJAX

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  4. [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)

    >_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~

  5. 5、WPF实现简单计算器-非常适合初学者练习

    Sample Calculator 这是微软社区WPF的一个示例,在源程序的基础上我进行了一点点修改,非常适合初学者练习,详细代码解释. 源程序的下载地址 http://code.msdn.micro ...

  6. 强烈推荐visual c++ 2012入门经典适合初学者入门

    强烈推荐visual c++ 2012入门经典适合初学者入门 此书循序渐进,用其独特.易于理解的教程风格来介绍各个主题,无论是编程新手,还是经验丰富的编程人员,都很容易理解. 此书的目录基本覆盖了Wi ...

  7. Linux内核开发进阶书籍推荐(不适合初学者)

    Linux内核开发进阶书籍推荐(不适合初学者) 很早之前就想写一篇文章总结一下Linux Kernel开发的相关资料,项目的原因,再加上家里的一些事情,一直没能找到闲暇,今天终于有些时间,希望可以完成 ...

  8. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  9. 适合初学者的python实际例子

    最近在github上发现了一个有意思的项目,很适合初学者学习python代码. 学习一门语言刚开始的时候是很枯燥的,各种概念语法以及无聊的打印都会让人失去更进一步学习的动力. 很多同学在学习了一段时间 ...

  10. 7-OKHttp使用详解,步骤挺详细的,适合初学者使用!

    OKHttp使用详解,步骤挺详细的,适合初学者使用! 一,OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络. 这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Squ ...

随机推荐

  1. springmvc接收数组方式总结

    1.接受正常的数组 如param1=aaa&param1=bbb&param1=3 对于这种,在实体参数中,使用String param1[] 这种参数既可以获取数组的值 2.接受数组 ...

  2. java易错题

    (选择二项) 8 A: B: C: D: (选择一项) 9 A: B: C: D: 正确答案是 A 您回答的是 B 回答错误 正确答案是 B,D 您回答的是 A,C 回答错误 (选择一项) 18 A: ...

  3. GDB基础学习

    GDB基础学习 要调试C/C++程序,首先在编译时,我们必须要把调试信息加到可执行文件中.使用编译器(cc/gcc/g++)的-g参数可以做到这一点,比如: gcc -g test.c -o test ...

  4. VDD,VCC,VSS,VEE,VDDA,VSSA,

    VDD是主供电电源,也是IO口输出电平的输入电源.VDDA(A表示模拟)是模拟电源,当使用到模拟信号的时候,比如AD(模数)或者DA(数模)的时候,系统会使用VDDA的电压作为参考电压来.不要求精准使 ...

  5. 做JAVA开发的同学一定遇到过的爆表问题,看这里解决

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由净地发表于云+社区专栏 记一次Java线上服务器CPU过载问题的排查过程,详解排查过程中用到的Java性能监测工具:jvisualvm ...

  6. API网关设计(一)之Token多平台身份认证方案(转载)

    原文:https://segmentfault.com/a/1190000018535570?utm_source=tag-newest 概述 今天咱们面对移动互联网的发展,系统一般是多个客户端对应一 ...

  7. WIN 10下Mysql 5.7.21解压缩(免安装版)配置

    网上看了N多大神的东西东抄抄西抄抄,老是就不对,因为很多资料不是针对5.7这个版本的内容. 首先解压文件,比如我解压到D:\Program Files\mysql-5.7.21-winx64 第一步: ...

  8. JS应用实例5:全选、动态添加

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. [git] 本地仓库信息的查询

    本地仓库信息查询操作 1.1  git status 查看当前暂存区状态 git  status 显示当前分支信息: 提交的目的分支信息: git 管理的有修改的文件: 当前仓库未被 git 管理的文 ...

  10. LeetCode: 107_Binary Tree Level Order Traversal II | 二叉树自底向上的层次遍历 | Easy

    本题和上题一样同属于层次遍历,不同的是本题从底层往上遍历,如下: 代码如下: struct TreeNode { int val; TreeNode* left; TreeNode* right; T ...