jQuery - Introduction to AJAX

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

For traditional web pages (not using AJAX), if the content needs to be updated, the entire web page must be reloaded.

There are many application cases using AJAX: Sina Weibo, Google Maps, Kaixin.com, etc.

About jQuery and AJAX

JQuery is a lightweight js library that is compatible with CSS3 and various browsers (IE 6.0+, FF1.5+, Safari 2.0 +, Opera 9.0+). jQuery enables users to more easily process HTML documents and events, implement animation effects, and easily provide AJAX interaction for websites.

With jQuery AJAX methods, you can request text, HTML, XML or JSON from a remote server using HTTP Get and HTTP Post - and you can load this external data directly into selected elements of the web page middle.

##Example:

Show one first Front-end code:

<!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(){
            //按钮单击时执行
            $("#testAjax").click(function(){
                //Ajax调用处理
                var html = $.ajax({
                    type: "POST",
                    url: "text.php",
                    data: "name=garfield&age=18",
                    async: false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            });
        });
    </script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>

When displaying a piece of background php code, we named it text.php:

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;
?>

In this way, we complete a simple JQuery Ajax call example.

Continuing Learning

new 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(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 var html = $.ajax({ type: "POST", url: "text.php", //调用text.php data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>

submit Reset Code

Automatic operation

jQuery - Introduction to AJAX

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]