Maison > interface Web > js tutoriel > Introduction aux méthodes get et post basées sur js native et ajax ainsi qu'à la méthode d'écriture native de jsonp

Introduction aux méthodes get et post basées sur js native et ajax ainsi qu'à la méthode d'écriture native de jsonp

不言
Libérer: 2018-07-02 17:04:50
original
1964 Les gens l'ont consulté

Ce qui suit vous présente un exemple des méthodes get et post basées sur js native et ajax, ainsi que la méthode d'écriture native de jsonp. Le contenu est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

login.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status>=200 && xhr.status<300) {
alert(xhr.responseText);
};
};
}
}
Copier après la connexion

méthode ajax

btn.onclick = function(){
ajax(
    "GET",
    "http://localhost/ajax2/my02.php",
    {xingming:xingming.value,pwd:pwd.value},
    function(data){
console.log(data);
},
function(errCode){
console.log(errCode);
}
)
Copier après la connexion

méthode post passant les paramètres

La différence entre celle-ci et la méthode get :

01 Type de sécurité. la poste est plus sûre.

02 vitesses. La vitesse d'obtention est plus rapide que

03 ordres de grandeur. L'ordre de grandeur du post est plus grand

Mise en œuvre spécifique :

var xhr = new XMLHttpRequest();
xhr.open("post","http://localhost/ajax2/login2.php",true);
var data = {
username:username1.value,
pwd:pwd1.value
}
// 设置请求头 告诉服务器发给他的数据是json格式
xhr.setRequestHeader("content-type","application/json");
xhr.send( JSON.stringify(data) );
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if ( xhr.status >= 200 && xhr.status < 300 ) {
alert(xhr.responseText);
};
};
}
Copier après la connexion

<🎜. >Méthode jsonp native

var sc = document.createElement("script");
sc.type = "text/javascript";
document.body.appendChild(sc);
sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";

function myCallBack(data){
console.log(data);
}
Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il vous sera utile à l'apprentissage de chacun, plus Veuillez faire attention au site Web PHP chinois pour le contenu connexe !

Recommandations associées :

Implémentation native d'Ajax À propos de l'utilisation des types MIME

Écrire la fonction de requête Ajax en JS natif Fonction

Manière correcte de transmettre les paramètres de la fonction de rappel ajax

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal