HTML5 front End Getting Started Tutorial: Ajax Asynchronous Request Technology

The full name of Ajax is asynchronous JavaScript and XML (asynchronous JavaScript and XML).

? Ajax is not a new programming language, but rather a new method of using existing standards. Ajax is the art of exchanging data with a server and updating parts of a Web page without reloading the entire page.

? Ajax is a technique that can update parts of a Web page without reloading the entire page.

? Ajax is a technique for creating fast, Dynamic Web pages. A small amount of data exchange with the server in the background. Ajax makes it possible for Web pages to be updated asynchronously. This means that you can update a part of a webpage without reloading the entire page. While traditional Web pages (without Ajax) need to be updated, the entire page face must be overloaded.

In the Web application development process, the industry to the front and back of the demarcation line seems to have no definite concept, but most people use the browser as the boundary between the front and back. The part of the browser that presents the user with a page is called the front end, and will run on the server, and all the code that provides the business logic and data preparation for the front end is referred to as the backend.

Although the separation of the front and back in a few years ago has begun to receive attention, but many people to it is only to hear its voice, did not see its shape, so it has some misunderstanding, mistakenly think that the front-end separation is just a Web application development mode, as long as the development of the Web application in the front and back end of the division of labor is

In fact, it is not true that the front-end separation is not just a development pattern, but rather an architectural pattern of Web applications. In the development period, the front-end engineer can realize the parallel development through the contract interface; At run time, the front-end separation mode requires a separate deployment of the Web application and interaction between the front and back ends using HTTP requests.

First, JSON parsing

JSON (JavaScript Object Notation) is a lightweight data interchange format. JSON takes a completely language-independent text format, which makes JSON an ideal data exchange language. Easy to read and write, but also easy to machine parse and generate. Simply put, JSON can convert a set of data represented in a JavaScript object into a string, which can then be easily passed between functions, or in an asynchronous application passing a string from a WEB client to a server-side program.

Second, Ajax interface calls

The back-and-forth separation means that JSON is used to communicate between the front and back ends, and two development teams interact with the API as a contract through a JSON string and then pass the string from the Web client to the server-side program in an asynchronous application. This part of the study is how to launch an AJAX request from the foreground to the background, and finally get the data response returned by the server, the front page updates.

Third, PHP background

PHP is a popular general-purpose scripting language that is particularly well-suited for web development. The PHP language has the following features:

1. Cross-platform, superior performance, and a lot of free platform combination very save money, such as lamp (linux/apache/mysql/php) or Famp (freebsd/apache/mysql/php) combination, or data application is large enough to consider changing PostgreSQL, or Oracle, supports n-type databases. (N >= 10)

2. Simple syntax, if you have to learn C and Perl is very easy to get started, and the ASP has a similar part. There are mature development tools, such as nuphped, or Zend Studio, and so on, you can use eclipse under the Linux platform, and so on.

3. Current mainstream technologies are supported, such as WebService, Ajax, XML, etc., enough to be used.

4. There are many mature frameworks, such as the framework that supports MVC: PHPMVC, supports an event-driven framework like asp: Prado, supports a fast-developing framework like Ruby on Rails: Cake and more, enough to meet your application needs.

5. PHP 5 already has a mature object-oriented system that adapts to basic object-oriented requirements and is suitable for large projects.

This part of the main learning how to build a PHP server, master PHP basic syntax, through PHP to generate a Dynamic Web page, master How to use PHP to complete a standardized interface, and finally return the JSON data to the foreground.

Iv. Database

A database is a warehouse that organizes, stores, and manages data according to its structure, and each database has one or more different APIs for creating, accessing, managing, searching, and replicating the saved data. We can also store the data in a file, but it is relatively slow to read and write data in the file.

MySQL is a relational database management system developed by the Swedish MySQL AB company, currently owned by Oracle Corporation. MySQL is an associated database management system that keeps data in separate tables rather than putting all of the data in a large warehouse, which increases speed and increases flexibility.

? MySQL is open source, so you don't have to pay an extra fee.

? MySQL supports a large database. You can handle large databases that have thousands records.

? MySQL uses the standard SQL data language form.

? MySQL can be allowed on multiple systems and is supported in multiple languages. These programming languages include C, C + +, Python, Java, Perl, PHP, Eiffel, Ruby, and Tcl.

? MySQL has good support for PHP, which is currently the most popular web development language.

? MySQL support large database, support 50 million records of Data Warehouse, 32-bit system table file maximum support 4gb,64 bit system to support the largest table file is 8TB.

This part of the main learning is the data additions and deletions to the operation, and finally through PHP access to data in the data, and then through the response of the processing, play to the front desk use.

V. Ajax cross-Domain

Because of the need to use AJAX to request requests under other domain names at work, there is a case of denial of access because Ajax can only access local resources and not cross-domain access because of security-based considerations.

Solution One

The "XHR2" full name "XMLHttpRequest Level2" is a HTML5-provided method that provides good support for cross-domain access and has some new features.

* Versions below IE10 are not supported

* Just add the following two lines of code to the server-side header:

Header ("access-control-allow-origin:*");

Header ("Access-control-allow-methods:post,get");

Solution Two

JSONP (JSON with Padding) is an unofficial protocol that allows the server-side integration of script tags back to the client to achieve cross-domain access in the form of JavaScript callback (this is simply a JSONP implementation form).

Due to the limitations of the same-origin policy, XMLHttpRequest only allows resources to request the current source (domain name, protocol, port), in order to implement cross-domain requests, cross-domain requests can be implemented through the script tag, and then output JSON data on the server and execute callback functions to resolve cross-domain data requests.

Source: Qian Feng HTML5

HTML5 front End Getting Started Tutorial: Ajax Asynchronous Request Technology