recherche

Maison  >  Article  >  interface Web  >  Analyse détaillée de l'utilisation d'AJAX (code collé)

Analyse détaillée de l'utilisation d'AJAX (code collé)

亚连
亚连original
2018-05-18 09:30:151950parcourir

Ce qui suit est la méthode d'utilisation d'AJAX que j'ai compilée pour vous. Les étudiants intéressés peuvent y jeter un œil.

HTTPS

"/jsontest/randomdata/" // there was a missing trailing 
/// i.e.   
// was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.96041791105086431234

Demande GET

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <script type="text/javascript">
        function checkname(){
            //ajax校验用户名
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    document.getElementById(&#39;result&#39;).innerHTML = xhr.responseText;
                }
            }            //获得输入的用户名，并传递个服务器端
            var ming = document.getElementById(&#39;username&#39;).value;            //对ming变量的特殊符号信息进行编码
            ming = encodeURIComponent(ming);
            xhr.open(&#39;get&#39;,&#39;./04.php?nm=&#39;+ming+&#39;&age=23&#39;, true);            //xhr.open第三个参数默认异步请求为true, 改成同步请求为false;
            xhr.send(null);
        }        </script>
    </head>
    <body>
        <h2>ajax之get形式请求</h2>
        <p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
        <p>密码：<input type="password" id="userpwd"  /></p>
        <p id="result"></p>
    </body></html>12345678910111213141516171819202122232425262728293031323334353637

Demande POST

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <script type="text/javascript">
        function checkname(){
            //ajax校验用户名
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    document.getElementById(&#39;result&#39;).innerHTML = xhr.responseText;
                }
            }
            xhr.open(&#39;post&#39;,&#39;./05.php?height=165&#39;, true);            //默认为true异步请求, false为同步请求
            //post请求需要把数据组织为xml格式
            //以下方法必须要在"open"方法后进行设置
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");            //获得输入的用户名，并传递个服务器端
            var ming = document.getElementById(&#39;username&#39;).value;            //对ming变量的特殊符号信息进行编码
            ming = encodeURIComponent(ming);            //把传递的参数变为"请求字符串"传递给send方法
            var info = "nm="+ming+"&age=20";
            xhr.send(info);
        }        </script>
    </head>
    <body>
        <h2>ajax之post形式请求</h2>
        <p>用户名：<input type="text" id="username" onblur="checkname()" /></p>
        <p>密码：<input type="password" id="userpwd"  /></p>
        <p id="result"></p>
    </body></html>123456789101112131415161718192021222324252627282930313233343536373839404142

FormDate collecte les données du formulaire

<!DOCTYPE html><html><head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="common.js"></script></head><body>
    <form>
        <p>用户名：<input type="text" name="user"></p>
        <p>密  码：<input type="password" name="pwd"></p>
        <p>邮  箱：<input type="text" name="email"></p>
        <p>头  像：<input type="file" name="userpic"></p>
        <p><input type="button" value="提交" id="btn"></p>
    </form>
    <script type="text/javascript">
        //form表单节点对象
        var oForm = document.getElementsByTagName(&#39;form&#39;)[0];        //按钮
        var oBtn = $(&#39;btn&#39;);
        oBtn.onclick = function(){
            //先收集输入框的内容
            var user = document.getElementsByName(&#39;user&#39;)[0].value;            var pwd = document.getElementsByName(&#39;pwd&#39;)[0].value;            var email = document.getElementsByName(&#39;email&#39;)[0].value;            //通过ajax提交到服务器
            var xhr;            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            xhr.open(&#39;POST&#39;,&#39;upload.php&#39;,true);            //实例化表单对象，获得表单里面的输入框的内容（主流浏览器支持）
            //参数就是表单节点对象
            var data = new FormData(oForm);
            xhr.send(data);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }    </script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

AJAX cross-domain

//放在被访问资源上
<?php  header(&#39;Access-Control-Allow-Origin:http://A.abc.com&#39;); ?> 12

jasonP

//在客户端定义函数,在服务端定义调用函数和传入参数,请求时传入调用参数内容,服务端就用客户端传入的函数名为调用函数名(可变函数);
//<script src=xxx.kuaiyu.com/xxx.php></script>
https://xxx.cc.com/xx.php?param=xxx&function_name=function_name//百度标准接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=法国大选&cb=demo12345

JQUERY AJAX

Syntaxe :
$.get(url,data,function(),dataType)
url : fichier demandé.
données : transférer des données.
function(responseText, statusText,xhr) : fonction de retour
responseText : texte renvoyé.
statusText : la valeur de statut renvoyée.
status contient le statut de la requête
("success", "notmodified", "error", "timeout", "parsererror")
xhr : objet de requête XMLHttpRequest().
type de données :
"xml" - un document XML
"html" - HTML sous forme de texte brut
"text" - une chaîne de texte brut
"script" - exécute la réponse en JavaScript, et renvoie
"json" sous forme de texte brut - exécute la réponse en JSON et la renvoie sous forme d'objet JavaScript
"jsonp" - charge un morceau JSON en utilisant JSONP, qui ajoutera un "?callback=?" URL pour spécifier le rappel

.get(),.get(),.post() //post est identique aux paramètres d'obtention

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
        $(&#39;#bt1&#39;).click(function(){
        var username = $(&#39;input[name=username]&#39;).val();//获取用户名的值
        var pwd = $(&#39;input[name=password]&#39;).val();//获取密码的值
            $.get(                &#39;get.php&#39;,//url
                {username:username,pwd:pwd},//$_GET[&#39;username&#39;]:请求的数据
                function(res,sta,xhr){//回调函数
                    //res:返回值
                    //sta:返回的状态
                    //xhr:请求的对象XMLHttprequest
                    // alert(&#39;返回值是：&#39;+res);
                    if(sta == &#39;success&#39;){
                        $(&#39;span&#39;).html(res);
                    }
                }
                )
        });
});</script>
<style type="text/css"></style>
</head>
<body>用户名：<input type="text" name=&#39;username&#39; /><span></span><br>
密码：<input type="password" name=&#39;password&#39; /><br>
<input type="button" id="bt1"  value="发送请求" />
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738394041

$.ajax()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery Collapse</title><SCRIPT LANGUAGE="JavaScript" src="jquery-3.1.1.js"></SCRIPT><script type="text/javascript">$(function(){
        $(&#39;input[name=username]&#39;).keyup(function(){
        var username = $(&#39;input[name=username]&#39;).val();//获取用户名的值
        var pwd = $(&#39;input[name=password]&#39;).val();//获取密码的值
            $.ajax({
                url:&#39;post.php&#39;,
                data:{username:username,pwd:pwd},
                dataType:&#39;html&#39;,
                type:&#39;post&#39;,
                success:function(mydata){
                    $(&#39;span&#39;).html(mydata);
                }
            })
        });
});</script>
<style type="text/css"></style>
</head>
<body>
用户名：<input type="text" name=&#39;username&#39; /><span></span><br>
密码：<input type="password" name=&#39;password&#39; /><br>
<input type="button" id="bt1"  value="发送请求" />
</body>
</html>

ci-dessus C'est la méthode d'utilisation d'AJAX que j'ai compilée pour vous. J'espère qu'elle vous sera utile à l'avenir.

Articles connexes :

Explication détaillée des étapes permettant à jQuery+ajax d'appeler le service WCF

Méthode de gestion des urgences du délai d'expiration jQuery AJAX

Téléchargement du fichier d'implémentation JQuery+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!

Déclaration：
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
Article précédent：Interprétation détaillée du code, concaténation de chaînes en JavascriptArticle suivant：Interprétation détaillée du code, concaténation de chaînes en Javascript

Articles Liés

Voir plus