Introduction to AJAX

Before studying ajax, let us first discuss a question - what is Web 2.0. When you hear the term Web 2.0, you should first ask "What is Web 1.0?" Although it is rare to hear people mention Web 1.0, it actually refers to the traditional Web with a completely different request and response model. For example, go to the hdu.edu.cn website and click a button. A request is sent to the server, and the response is returned to the browser. The request is not just a list of new content and items, but another complete HTML page. Therefore, you may see flickering or jittering when the web browser redraws the page with new HTML. In fact, the requests and responses are clearly visible with every new page you see.

Web 2.0 (largely) eliminates this visible back-and-forth interaction. On Google Maps, for example, you can drag the map to zoom in and out with minimal redrawing. Of course there are still requests and responses, but they are hidden behind the scenes. As a user, the experience is more comfortable and feels much like a desktop application. This new feeling and paradigm is what you get when someone mentions Web 2.0.

What needs to be concerned about is how to make these new interactions possible. Obviously, you still need to make requests and receive responses, but it's the HTML redrawing for each request/response interaction that creates the feeling of slow, clunky web interactions. So it's clear that we need a way to make the request sent and the response received contain only the required data instead of the entire HTML page. The only time you need to get the entire new HTML page is when you want the user to see the new page.

But most interactions add details to existing pages, modify the main text, or overwrite original data. In these cases, Ajax and Web 2.0 methods allow data to be sent and received without updating the entire HTML page. For those who spend a lot of time online, this ability can make your applications feel faster and more responsive, keeping them coming back to your site from time to time.

What is Ajax?

1, Full name: Asynchronous, JavaScript, And, XML (asynchronous JavaScript and XML)

2. Definition: Ajax is not a technology, it is actually several technologies. Each technology has its own uniqueness. Together they become A powerful new technology

3.includes:

XHTML and CSS
Use DocumentObjectModel to dynamic display and interaction
Use XML and XSLT to do data interaction and operation
Use XMLHTTPRequest to receive asynchronous data to receive them with JavaScript to tie them Set together

4, Explanation: is a Web application development method that uses client scripts to exchange data with the Web server. In this way, the Web page can be dynamically updated without interrupting the interaction process and re-editing it. Using Ajax, you can create a direct, highly available, richer, and more dynamic Web user interface that is close to native desktop applications.

#The main advantages of Ajax are as follows:

1. No plug-in support required (general browsers and JavaScript enabled by default);

2. Excellent user experience (updatable data can be obtained without refreshing the page);

3. Improve the performance of Web programs (relax on-demand data transmission without submitting it as a whole);

4. Reduce the burden on the server and bandwidth (transfer some operations of the server to Client) ;

##The shortcomings of Ajax are as follows:

1. Different versions of browsers have insufficient support for the XMLHttpRequest object (such as before IE5);

2. The forward and backward functions are destroyed (because Ajax is always on the current page and cannot The probability of meeting the front and back pages);

3. Insufficient support from search engines (because search engine crawlers cannot yet understand the content of changed data caused by JS);

4. Lack of development and debugging tools (relatively Compared with the tool sets of other languages, JS or Ajax debugging and development are pitiful).

The most critical part of using Ajax is to implement asynchronous requests, accept responses and execute callbacks. So what is the difference between asynchronous and synchronous?

Our ordinary Web program development is basically synchronous, which means that one program can be executed before the next one can be executed. It is similar to a call on the phone. One phone call must be answered before the next one can be answered; asynchronously, multiple programs can be executed at the same time. It feels like there are multiple lines for each task, similar to text messages. You won’t stop accepting another text message just because you read one text message. Ajax can also be executed in synchronous mode, but the synchronous mode is a blocking mode, which will cause multiple lines to be executed one by one, which will cause the Web page to appear in a state of suspended animation. Therefore, generally, most Ajax uses asynchronous mode.

Google Suggest

In 2005, Google made AJAX popular with its Google Suggest.

Google Suggest uses AJAX to create a highly dynamic web interface: when you enter keywords in Google's search box, JavaScript will send these characters to the server, and then the server will return a list of search suggestions .

Example display:

First create an html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="txt.php">
        <p>
            姓名：<input type="text" name="name" id="name"/>
        </p>
        <p>
            地址：<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

Create a txt.php file :

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
?>