解释AJAX使用的技术

在这篇文章中，我们将看到AJAX使用的不同技术。Ajax是Asynchronous Javascript and XML的首字母缩写。它被用来与服务器通信而不刷新网页，从而提高用户体验和更好的性能。它是一种技术，而不是一种编程语言，它被开发人员用来使网站表现得像桌面应用程序。它在客户端运行，用于创建异步网络应用。

什么是AJAX?

Ajax是一组用于开发响应式网络应用程序的技术。通过一起使用这些技术，我们使网页更具有响应性，因为与服务器交换少量的数据，并且在用户进行输入改变时，网页不会被重新加载或刷新改变。Ajax为用户提供了与网页互动的机会，而不会受到网络应用程序不断重载网页的干扰。网站互动发生得很快，只有部分页面被重新加载和刷新。

不同的AJAX技术：AJAX不是一种编程或脚本语言，但它使用其他编程语言来使网站具有响应性。它是一种相互关联的技术的组合，如JavaScript、dom、XML、HTML、CSS等。AJAX是由Google制作的，它在2005年以Google Suggest而流行。它是一种类似于动态超文本语言的算法。异步的意思是，用户不需要等到服务器的回复。Ajax用于在用户与Web前端交互时在后台创建服务器连接。这些连接可以异步创建。在Ajax中使用的技术有很多。我们将讨论他们中的每一个，并通过插图了解他们的实现。

html/xhtml & css。 XHTML代表EXtensible HyperText Markup Language。这些技术用于显示内容和用户界面的风格。它主要用于信息的展示。CSS是为了使网页更具互动性，它独立于HTML。CSS可以与任何基于XML的标记语言一起使用。

语法:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

文档对象模型(DOM)。它是一个用于访问和操作结构化文档的API。基本上，它是HTML（超文本标记语言）和XML（可扩展标记语言）文档的编程接口。它定义了文档的逻辑结构以及访问和操作文档的方式。DOM是一种以结构化的分层方式表示网页的方式，这样一来，程序员和用户就会变得更容易滑行浏览文档。通过DOM，我们可以使用Document对象提供的命令或方法，轻松访问和操作HTML的标签、ID、类、属性或元素。使用DOM，JavaScript可以访问HTML以及网页的CSS，也可以给HTML元素添加行为。

语法:

<!DOCTYPE>
<html>

<head>
    <title>
        <style></style>
    </title>
</head>

<body>
    <a href="#"></a>
    <h1></h1>
    <p></p>
    <script></script>
</body>

</html>

Javascript ： JavaScript是HTML和网络的脚本语言。它用于HTML、CSS和XML技术之间的连接。它主要用于客户端验证，在向服务器发送数据之前验证用户在HTML表单中的输入。JavaScript是AJAX操作中的关键或中间环节。

语法:

<script src="example.js"></script>

XMLHttpRequest: 它被用于客户端和服务器之间的异步通信。它是一个执行异步交互的JavaScript对象。XMLHttpRequest对象可用于从网络服务器请求数据。

语法:

variable = new XMLHttpRequest();

XML和JSON：JSON和XML有分层结构。JSON和XML都可以在服务器端使用，用于将数据带入和带出服务器。JSON（Javascript Object Notation）就像XML，但比XML短且快。

语法:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

ASP和JSP。 JSP（Java Server Pages）和ASP（Active Server Pages）是服务器端的脚本语言。JSP可以访问整个Java APIs库。它还可以访问企业数据库。

语法:

<% //write the script. %>

Ajax结合了这些技术，创造了一种新的方法来开发无需重载的Web应用程序。Ajax使用的技术可以在不重新加载页面的情况下启动客户端到服务器的通信。它提供了一种实现部分页面更新的方法。它意味着改进了与网络应用程序的交互，它给出了一个用户友好的环境，类似于桌面应用程序的环境。

我们将通过实例来理解上述概念。

例子1：（Ajax请求）：在这个例子中，我们使用PHP来POST数据，并使用echo函数来显示它。这是一个简单的AJAX例子，使用HTML和PHP来发布数据。

Index.php:

<html>
  
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <form action="" method="post">
        Name:
        <input type=text name="t1">
        <br><br>
        <input type=submit name="s">
        <?php
            if(isset(_POST['s']))
            {
                // Accessing value from the text field
                a=_POST['t1']; 
                  
                // Displaying result
                echo "The name of the person is:-".a; 
            }
        ?>
    </form>
</body>
  
</html>

输出:

解释AJAX使用的技术

例子2：（使用JSON响应）：在这个例子中，我们使用JSON响应，PHP，和HTML来显示检查列表，使用一个名为checked_arr的数组函数。Ajax给出的参数包括请求的类型（post或get）、数据、数据类型和状态。

Index.php:

<?php
  
// Handle AJAX request (start)
if( isset(_POST['ajax']) && isset(_POST['checked']) ){
  checked_arr =_POST['checked'];
 echo json_encode(checked_arr);
  exit;
}
  
// Handle AJAX request (end)
?>
<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <form method='post' action>
        <input type='checkbox' value='JavaScript'> JavaScript <br />
        <input type='checkbox' value='PHP'> PHP <br />
        <input type='checkbox' value='jQuery'> jQuery <br />
        <input type='checkbox' value='AJAX'> AJAX <br />
        <input type='button' value='click' id='but'>
        <div id='response'></div>
    </form>
      
    <!-- Script -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script>
        (document).ready(function(){
           ('#but').click(function(){
              var checkarr = [];
              ("input[type=checkbox]:checked").each(function(index,element){
                 checkarr.push((element).val());
              });
          
              if(checkarr.length>0){
                 .ajax({
                    type: 'post',
                    data: {ajax: 1,checked: checkarr},
                    dataType: 'json',
                    success: function(response){
                        $('#response').text('response : '
                        + JSON.stringify(response) );
                    }
                 });
              }
           
           });
        });
    </script>
</body>
  
</html>