Résumé des points de connaissance de l'AJAX de jQuery

Cette fois, l'éditeur a compilé les points de connaissances d'AJAX dans jQuery pour tout le monde. Ce qui suit est un résumé des points de connaissances.

1. Concept AJAX
Javascript et XML asynchrones (JavaScript et XML asynchrones)
AJAX n'est pas un langage, mais un moyen de créer des applications Web interactives. technologie de développement
AJAX est une combinaison de Javascript, XHTML et CSS, DOM, XML et XSTL, XMLHttpRequest et d'autres technologies
1 Utilisez XHTML+CSS pour normaliser la présentation ;
2. Utilisez XML et XSLT pour les données. Exchange et opérations associées ;
3. Utilisez l'objet XMLHttpRequest pour la communication de données asynchrone avec le serveur Web ;
4. Utilisez Javascript pour faire fonctionner le modèle d'objet de document (modèle d'objet de document réseau) pour l'affichage et l'interaction dynamiques ; >5. Utiliser JavaScript pour lier et traiter toutes les données
Qu'est-ce que XML ?
XML fait référence à Extensible Markup Language (EXtensible Markup Language)
XML est un langage de balisage très similaire au HTML
XML est conçu. pour transmettre des données, pas afficher des données
La balise XML n'est pas prédéfinie. Vous devez définir vous-même les étiquettes.
XML est conçu pour être auto-descriptif.
XML est une norme recommandée par le W3C
Qu'est-ce que XSLT ?
XSLT fait référence aux transformations XSL [1]
XSLT est la partie la plus importante de XSL
XSLT peut convertir un document XML en un autre document XML
XSLT utilise XPath en XML Navigation dans le document
🎜>
Processus de fonctionnement de l'utilisateur :
Navigateur utilisateur->Instanciation JavaScript de l'objet XmlHttpRequest->Moteur AJAX->Requête http->serveur Web->Système d'entreprise backend
Processus de retour du système ：
Système d'entreprise backend->Serveur backend->serveur web->Données HTML, XML, JSON->Moteur AJAX->HTML+CSS (navigateur Wel)->Navigateur utilisateur


3. Avantages et inconvénients d'AJAX :
Avantages du traitement asynchrone AJAX :
Réduisez la charge sur le serveur, AJAX n'obtient généralement que ce qui est nécessaire de les données du serveur
Aucune mise à jour de la page d'actualisation, réduisant le temps d'attente de l'utilisateur
Meilleure expérience client, certains travaux du serveur peuvent être transférés au client pour terminer, économisant les ressources réseau et améliorant l'expérience utilisateur
Aucune restriction de plate-forme
Favoriser la séparation de l'affichage et des données
Inconvénients du traitement asynchrone AJAX :Il y a beaucoup de JS dans la page, ce qui pose des difficultés aux moteurs de rechercheAJAX tue les fonctions Retour et Historique, ce qui est une destruction du mécanisme du navigateur Il y a un problème inter-domainesSeules les données codées en utf-8 peuvent être transmises et reçues




Étapes de mise en œuvre d'AJAX



window.open(URL,name,features,replace)

URL :
Une chaîne facultative qui déclare l'URL du document à afficher dans la nouvelle fenêtre. Si ce paramètre
est omis ou que sa valeur est une chaîne vide, aucun document ne sera affiché dans la nouvelle fenêtre
nom :Une chaîne facultative qui est une liste de caractères séparés par des virgules comprenant des chiffres, des lettres et le trait de soulignement qui déclare le nom de la nouvelle fenêtre. Ce nom peut être utilisé comme valeur de l'attribut cible des balises 3499910bf9dac5ae3c52d5ede7383485 et ff9c23ada1bcecdd1a0fb5d5a0f18437. Si ce paramètre spécifie une fenêtre existante, la méthode open() ne créera plus de nouvelle fenêtre,
mais renverra simplement une référence à la fenêtre spécifiée. Dans ce cas, les fonctionnalités seront ignorées.
features : Une chaîne facultative déclarant les fonctionnalités standard du navigateur à afficher dans la nouvelle fenêtre. Si ce paramètre est omis,
la nouvelle fenêtre aura toutes les fonctionnalités standards. Dans le tableau des caractéristiques de la fenêtre, nous décrivons en détail le format de cette chaîne
replace:
Une valeur booléenne facultative. Spécifie si une URL chargée dans une fenêtre crée une nouvelle entrée dans l'historique de navigation de la fenêtre,
ou remplace l'entrée actuelle dans l'historique de navigation. Les valeurs suivantes sont prises en charge : true - L'URL remplace l'entrée actuelle dans l'historique de navigation. false - L'URL crée une nouvelle entrée dans l'historique de navigation


send()send() est utilisée pour envoyer des données à un socket connecté. S'il n'y a pas d'erreur, la valeur de retour est la. données envoyées. Le nombre total,
sinon renvoie SOCKET_ERROR. [1] Send est aussi un mot anglais.


AttributresponseText :


La version texte des données renvoyées par le processus serveur
Le serveur de statut d'objet de document XML compatible DOM renvoyé par le processus serveur Le code d'état renvoyé, tel que : 404 = "Fichier introuvable".
Lorsque vous envoyez une requête xmlhttp au programme d'arrière-plan ajax, le programme d'arrière-plan traitera la requête après l'avoir reçue après le traitement. est terminé, une chaîne de données peut être renvoyée au premier plan,
c'est ResponseText
Généralement dans le programme d'arrière-plan C#, c'est Response.Write("string"). est une chaîne de sortie
car un caractère est généré. Mais parfois, vous obtenez un tableau, mais vous devez le sérialiser. Utilisez la technologie json en PHP pour convertir le tableau en une chaîne
et l'afficher dans le fichier. front-end, et l'attribut respText du front-end peut recevoir cette chaîne. Utilisez ensuite la technologie json dans JS pour convertir cette chaîne
.Convertissez-le à nouveau en un objet reconnu par JS pour le fonctionnement (le type de transmission de données json est fondamentalement reconnu par n'importe quelle langue et peut être utilisé pour la transmission et la conversion dans différentes langues)


Initialisez l'objet XMLHttpRequest

  if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest émet une requête HTTP

http_request.open("GET|POST","test.php?GET方式传值",true);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
         //用于向一个已经连接的socket发送数据
         //如果是POST传输方式要把值写在send()函数里
          http_request.send(向一个已连接的套接口发送数据);
      XMLHttpRequest取得响应数据并显示
       http_request.onreadystatechange=function(){
if(http_request.readyState==4  && http_request.status==200){
                    $("p").text(http_request.responseText)
         }
      }

Exemple :
//Méthode GET
Paramètre 1 : représente s'il faut envoyer la requête dans get ou méthode post Paramètre 2 : À quelle url envoyer la requête ? Paramètre 3 : true représente une requête asynchrone, false représente une requête synchrone

http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();

Envoyer la requête POST

var username=$("input[name='user_name']");

Paramètre 1 : représente la méthode Envoyer la requête par get ou post Paramètre 2 : À quelle url envoyer la requête Paramètre 3 : true représente une requête asynchrone, false représente une requête synchrone

http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

S'il s'agit d'une méthode de transmission POST, écrivez la valeur dans la fonction send()

http_request.send({username:username});

4. JSON
Javascript Object Notation , est un format d'échange de données léger
JSON chacun Toutes les langues le connaissent, alors utilisez-le pour convertir des données dans différentes langues
JSON prend en charge plusieurs langues​​
Format
{key :value,key:value,...} Format de l'objet
[{key:value,key:value,.....},{key:value,key:value,.....},. ..] Format de tableau
Traitement PHP :
$json=json_encode($array) //Encoder les variables en Json
$array=json_decode($json) //Décoder les données Json et les convertir en variables PHP
Traitement JavaScript :
eval(' ​​('+json+')') //Exécuter une certaine chaîne selon le code JS
Exemple :

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串

5. Application AJAX dans jQuery 1
.N'oubliez pas d'écrire

$.ajax({
            //你要传的php文件的路径
            url:"test1.php",    ('服务器url地址')
            //以get方式传输拼接字符串
            data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
            //以什么方式传输
            type:'get',('post|get')
            //传输返回的数据类型
            dataType:'json',  ('xml|html|text|json|script')
            //展示 数据的方式
            success:function(res){
                $('h1').text('用户名为：'+res.user_name);
            },
                //错误信息
                error:function(xhr){
                },
              timeout:2000,
              async:true,
              cache:false
})

6. Application AJAX dans jQuery 2

$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

Exemple :

            //'服务器url地址'，"json格式或字符串格式"
        $.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
               //如果后台发过来的值跟这里的值相等让他执行下面代码
                if(data.status=='ok'){
                    alert("登陆成功");
                    location.href="http://www.wl.com";
                }else{
                    alert("登陆失败");
                }
        //"xml|html|json|text|script"类型
        },'json')

7. Application AJAX dans jQuery 3
serialize() Le contenu de la table de séquence est des chaînes et les données sérialisées sont utilisées. pour les requêtes Ajax

$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

Exemple :

//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
        // 然后用serialize()来拿里面所有有值
        $.post("test1.php",$('form').serialize(),function(res){
            //如果后台发过来的值跟这里的值相等让他执行下面代码
            if(res.status=='ok'){
                alert("登陆成功");
                location.href="http://www.wl.com";
            }else{
                alert("登陆失败");
            }
            //"xml|html|json|text|script"类型
        },'json')

Recevoir et traiter la sortie en php

try{
    $pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
    $pdo->exec("set names utf8");
    $sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
    if($sen->rowCount()>0){
       // $arr=$sen->fetch(PDO::FETCH_ASSOC);
        //echo json_encode($arr);
        //echo 'yes';
       $arr['status']='ok';
    }else{
        echo 'no';
    }
    //切记用json数据类型传输
    echo json_encode($arr);
}catch (PDOException $e){
    echo $e->getMessage();
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!