Ajax-supported Google map MASHUP tutorial

The new era of Web development has reached its peak. This stage is called Web 2.0. This period ushered in a new batch of prototype Web applications, including blog, wiki and mashup. Mashup is the focus of this tutorial. You will learn how to use a set of common technologies to build a sample mashup. This group of technologies includes JavaScript, Ajax, REST, JSON, and Google map APIs. As a Web developer, it is important to understand how to use these tools in combination. In this tutorial, I will use these tools to easily build the ultimate Hello World mashup: a Google Map mashup.
Introduction

Mashup is created when some data sources and services are combined to create a new function or add new values in some way. This tutorial describes how to create a Google Map mashup-combining map data provided by Google maps with your own location data service.

This tutorial consists of three parts:

Web 2.0 Toolkit

Retrieve orientation from a REST Data Service

Use Google map to map addresses

Web 2.0 Toolkit

Web developers know that technology is constantly improving and their skills will become obsolete within a few years. I have no objection to this: Innovation makes Web development interesting. New ideas, new tools, and new technologies allow us to build better systems in less time. This section describes some technologies that you may or may not have used. If these are new technologies for you, you can take the content of this section as a quick start. After that, I encourage you to continue to study in depth. The content described below is incomplete and too simple in some aspects, so as to convey important concepts.

Although I want to discuss a variety of technologies, this tutorial also needs to start from scratch. I assume that you are familiar with the following concepts and Web technologies:

HTML

XML

Browser and Web server roles

HTTP Request/Response Model

Modern programming languages, such as Java, JavaScript, PHP, and C #

Client Programming

Web 2.0 applications feature a high degree of interactivity-they respond as traditional desktop applications do. Traditional Web applications cannot meet this expectation when the appearance is unchanged and the page is refreshed for a long period of interruption. Therefore, Web 2.0 applications use client programming technology to help applications get faster responses. The two most popular Client technologies are JavaScript and Adobe Flex. Both technologies have amazing features and have achieved great success in applications. However, to narrow down the scope of this tutorial, I only consider the JavaScript method when building mashup.

JavaScript technology is mature. It is a powerful client programming language and has become popular for several years. With the continuous improvement of standards, cross-browser support has significantly improved, making it a feasible method. For those who have never touched the language, they will find that its basic code structure is similar to other mainstream languages (such as Java.

JavaScript contains a powerful event mechanism that enables JavaScript to respond to user interactions in the browser. I will use the Event Response Function to build the mashup below. People who have learned HTML have seen JavaScript event response mechanisms in the form of events, such as the onclick attribute in the following code:

<Onclick = "javascript: myEventHandler (); return true"
Href = "myURL.html"> My Link </a>


Another important function of JavaScript Execution in a browser is to manipulate the HTML Document Object Model (DOM ). This function allows JavaScript code to programmatically change the page content after loading HTML pages. DOM manipulation is an important function used to improve the interaction of Web 2.0 applications. In Web applications, it is common to reset the text contained by an element in HTML, for example:



// Find the tag with id 'greet _ div'
Var div = document. getElementById ('greet _ div ');
Div. innerHTML = 'hello' + name;



Finally, the JavaScript function to be mentioned is to send out-of-band HTTP requests to backend servers. With this function, JavaScript can send requests that do not cause page overloading or change the browser address bar. This function is usually called Ajax, but it is actually XMLHttpRequest, which is a JavaScript class that calls HTTP requests. HTTP requests are usually asynchronous, which requires the programmer to define a callback function that is called when the response is received.

　　

Var request = new XMLHttpRequest ();
Function invokeAjax (){
Request. open ("GET", 'ajaxTarget.html ', true );
Request. onreadystatechange = ajaxCallback;
Request. send (null );
}

• 6 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• 6
• Next Page