Pedidos Ajax de Arquivo Php

Neste artigo, você aprenderá solicitações Ajax de arquivo PHP e como lidar com elas em um aplicativo da Web moderno, interativo e eficiente. abordaremos os aspectos técnicos de AJAX e PHP, incluindo sua sintaxe , como eles interagem entre si e quais são os benefícios de usá-los como um par.

Exemplos do mundo real serão mostrados para demonstrar como você pode criar interfaces de usuário dinâmicas e responsivas por meio de AJAX e PHP.

Usando AJAX, você pode se comunicar com os servidores de forma assíncrona, sem a necessidade de atualizar a página. Isso permite criar interfaces de usuário dinâmicas e responsivas que se comunicam com servidores de forma assíncrona. Enquanto isso, o PHP é uma das linguagens de script do lado do servidor mais amplamente usadas que permite criar aplicativos da Web robustos, escaláveis ​​e flexíveis.



Exemplo de AJAX e PHP

No exemplo abaixo, um usuário pode digitar caracteres em um campo de entrada em uma página da Web, e a página da Web pode se comunicar com um servidor da Web enquanto o usuário digita esses caracteres:

Exemplo de Explicação

Conforme mostrado no exemplo acima, uma função chamada showNameHint()  é executada em segundo plano quando um usuário digita um caractere no campo de entrada.

Um evento chamado onkeyup é o que aciona a execução da função.

Aqui está o código HTML da página:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<style>
span {
color: green;
}
</style>
<script>
function showNameHint(str) {
if (str.length == 0) {
document.getElementById("nameHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if ((this.readyState == 4) & (this.status == 200)) {
document.getElementById("nameHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getHintName.php?n=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form action="">
<label for="name">Name:</label>
<input type="text" id="name" name="fname" onkeyup="showNameHint(this.value)" />
</form>
<p>Suggestions:
<span id="nameHint"></span></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

A primeira coisa que você deve fazer é certificar-se de que seu campo de entrada esteja vazio ( str.length == 0 ).

Quando isso for verdade, você deve limpar o conteúdo nameHint do espaço reservado e sair dessa função, se existir.

Se o campo de entrada não estiver vazio, no entanto, você terá que seguir os seguintes passos:

  • Crie uma nova instância de XMLHttpRequest
  • Você precisará criar uma função que será executada quando a resposta do servidor estiver pronta
  • A requisição deve ser enviada ao servidor através de um arquivo PHP chamado getHintName.php
  • Você deve ter notado que o parâmetro n foi adicionado à URL gethint.php?n=”+str
  • Além disso, uma variável chamada str contém o conteúdo do campo de entrada que foi inserido

Arquivo PHP getHintName.php

Existe um arquivo PHP que verifica uma matriz de nomes e retorna ao navegador o(s) nome(s) que correspondem a esses nomes.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
$nameList = array(
'Abbott',
'Adams',
'Adkins',
'Barnes',
'Barnett',
'Barrett',
'Dennis',
'Diaz',
'Eaton',
'Ellison',
'Ferguson',
'Fernandez',
'Garza',
'Henry',
'Joseph',
'Keller',
'Lloyd',
'Logan',
'Mathews',
'Mathis',
'Washington',
'Young',
'Zamora',
'Zimmerman'
);
// get the n parameter from URL
$n = $_REQUEST["n"];
$hint = "";
// lookup all hints from array if $n is different from ""
if ($n !== "") {
$n = strtolower($n);
$length = strlen($n);
foreach ($nameList as $name) {
if (stristr($n, substr($name, 0, $length))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ",
$name";
}
}
}
}
// This output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

No exemplo acima, temos um array de nomes chamado $nameList. Estamos obtendo o valor de um parâmetro chamado “n” da URL usando a variável superglobal $_REQUEST .

Se o valor de “n” não estiver vazio, nós o convertemos em letras minúsculas usando strtolower() , obtemos seu comprimento usando strlen() e, em seguida, percorremos o array $nameList usando um loop foreach.

Dentro do loop, verificamos se os primeiros caracteres de comprimento do nome atual correspondem ao valor de “n” usando stristr() . Se houver uma correspondência, adicionamos o nome atual à string $hint.

Se nenhuma correspondência for encontrada, a string $hint permanecerá vazia. Por fim, verificamos se a string $hint está vazia e exibimos “sem sugestão” ou a lista de nomes correspondentes.

Portanto, se um usuário inserir um valor para “n” na URL, o código procurará por nomes que correspondam ao valor de entrada e retornará uma lista de sugestões. Se não houver correspondências, retorna “sem sugestão”.

Aqui está um segundo exemplo, para uma compreensão mais detalhada de como usar AJAX e PHP juntos para criar uma pesquisa de curso de linguagem de programação:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<style>
span {
color: green;
}
</style>
<script>
function showCourseHint(str) {
if (str.length == 0) {
document.getElementById("courseHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
document.getElementById("courseHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getCourseName.php?c=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Search your favorite programming language course:</b></p>
<form>
<input type="text" onkeyup="showCourseHint(this.value)">
</form>
<p>Entered Course name:
<span id="courseHint"></span></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Abaixo está um arquivo PHP chamado “ getCourseName.php “:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
$progCourses = array(
"Python",
"JavaScript (JS)",
"Java",
"HTML",
"CSS",
"SQL",
"C#",
"C",
"C++",
"TypeScript",
"PHP",
"R",
"Bash/Shell",
"Go",
"Swift",
"React JS",
"React native",
"Vue JS",
"Angular JS",
"Kotlin",
"Scala",
"Dart",
"Assembly",
"FORTRAN",
"Rust",
"Ruby",
"COBOL",
"Julia",
"Perl",
"BASIC",
"Groovy",
"MATLAB",
"Objective C"
);
$c = $_REQUEST["c"];
$hint = "";
if ($c !== "") {
$c = strtolower($c);
$len = strlen($c);
foreach ($progCourses as $courseName) {
if (stristr($c, substr($courseName, 0, $len))) {
if ($hint === "") {
$hint = $courseName;
} else {
$hint .= ",
$courseName";
}
}
}
}
echo $hint === "" ? "Please enter a valid programming language" : $hint;
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

As solicitações Php File Ajax fornecem uma maneira conveniente de interagir com o servidor sem a necessidade de atualizações de página. Com a ajuda do Ajax, você pode criar aplicativos da Web dinâmicos que respondem rapidamente às ações do usuário. Seguindo as etapas descritas neste artigo, você pode incorporar facilmente as solicitações Php File Ajax em seu próprio aplicativo da web. Com a capacidade de lidar com uploads e downloads de arquivos sem problemas, o Php File Ajax pode ser uma ferramenta poderosa em seu arsenal de desenvolvimento web. Portanto, comece a experimentar as solicitações Php File Ajax em seu próximo projeto da Web e veja como isso pode aprimorar a experiência do usuário.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone