JavaScript之使用AJAX（适合初学者）-低调大师

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

2018-01-16 661

网上关于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 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 ,得到的页面如下：

在下拉菜单中选择”JavaScript”，则页面如下：

在下拉菜单中选择”Python”，则页面如下：

笔者的学习心得：有时候光看网上或书上的教程，是远远不够的，因为可能并没有讲如何具体地操作实践，最好的学习方法还是自己亲自实践一把，然后写个Blog记录之~~
本次分享到此结束，欢迎大家交流~~

微信关注我们

原文链接：https://yq.aliyun.com/articles/615247

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

javascript跨域操作cookie的点滴记录

测试浏览器：IE 8,Firefox 由顶级域xxx.com写二级域www.xxx.com的cookie 均可以。由二级域www.xxx.com写顶级域xxx.com的cookie 均可以。由二级域www.xxx.com写入二级域yyy.xxx.com的cookie 均不可。本文转自Kai的世界,道法自然博客园博客，原文链接：http://www.cnblogs.com/kaima/archive/2011/03/24/1863325.html，如需转载请自行联系原作者。

2018-01-16

707

微信公众平台的搭建，首先需要确定整体的架构模式，我们一般选用B/S的整体架构模式，手机或者pc端可以通过关注微信公众号，进而访问和操作公众号中的内容，其中的主要搭建包括： A.使用xampp继承开发环境来搭建后台，需要用到的服务器和数据库。(apache+mysql) B.前端页面通过html+php动态网页来实现。如果再加点js+css效果就显示的更加完美了。 1.首先开发者需要申请一个微信的公众号，由于目前微信开放的微信接口测试号提供了与微信公众平台类似的功能，只是在某些接口的访问权限和次数上有一定的限制，所以对于初学者，可以先申请一个微信接口测试号。 http://weixin.qq.com/ 2.接下来做的是对微信服务器以及对数据库网页服务器的部署。服务器可以选择阿里云，百度云，腾讯云等服务器，然后再服务器端完成xampp的下载和整体部署。 linux下xampp集成包安装配置方法 http://www.cnblogs.com/ygyg/p/5395207.html xampp的下载地址 https://www.apachefriends.org/zh_cn/i...

2018-01-16

629

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。