JavaScript uses Ajax (for beginners)

Last Update:2018-01-17 Source: Internet

Author: User

Tags php language variable scope tiobe index

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

?? Ajax tutorials and tutorials on the web are endless, the realization of the life of Ajax books are also dazzling, but too many choices easily dazzling, bad choice. The fact is, the general tutorial or book will not talk about the Web server building, so for beginners (such as the author), it is hard to learn the knowledge of Ajax, but there is no way to practice the operation of a hand, this is how much regret ah!
?? So this time, I'm going to give you a simple example of an AJAX application that explains in detail how to use Ajax on your local computer to meet web development requirements.
?? First of all, we need to install the XAMPP on our own computer, this is to open the Apache server, so that we do not need to build a server. The XAMPP is: https://www.apachefriends.org/zh_cn/index.html.
?? After downloading, you can install directly. I downloaded the window version, after installation, open XAMPP Control Panel, click "Apache" front button to install Apache service, and click "Apache" Behind the Start button to open the Apache service, as shown in:

Apache default port should be 443, the author because the port is occupied, it is changed to 4431.
?? We then create a new HTML file under the Htdocs folder in the XAMPP installation directory: programming_language_intro.html and PHP Files: intro.php, as shown in the following:

?? The code for programming_language_intro.html is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showIntro(){
//All modern browsers support XMLHttpRequest objects (IE5 and IE6 use activexobject)
//XMLHttpRequest is used to exchange data with the server in the background
var xmlhttp = new XMLHttpRequest();
var str = document.getElementById("language").value;
//Onreadystatechange: stores a function (or function name) that is called whenever the readyState property changes
//ReadyState: 4 indicates that the request is completed and the response is ready
//Status: 200 means "OK"
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
document.getElementById("p1").innerHTML = "Introduction of "+str+":";
//Get response from server: responseText means to get response data in string form
document.getElementById("intro").innerHTML = xmlhttp.responseText;
}
}
//Send request to server
//The three parameters of open () are: get request or post request, URL: file on the server, asynchronous: Yes or no
xmlhttp.open("GET","intro.php?query="+str,true);
xmlhttp.send();
}
//Refresh page
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>

Ajax is used in Showintro (), and specific tutorials on Ajax can be consulted: http://www.runoob.com/ajax/ajax-tutorial.html.
?? The code for intro.php is as follows: (PHP language)

 
 
<?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];
?>

?? Enter http://localhost/programming_language_intro.html in the browser and get the following page:

?? Select "JavaScript" from the drop-down menu and the page looks like this:

?? Select "Python" from the drop-down menu and the page looks like this:

?? The author's learning Experience: sometimes light reading online or book tutorials, is far from enough, because there may not be how to operate the practice of concrete, the best way to learn is to practice one yourself, and then write a blog record of ~ ~
?? This share to the end, welcome to Exchange ~ ~

JavaScript uses Ajax (for beginners)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More