Analyse détaillée de l'utilisation d'AJAX (code collé)-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-18 09:30:15

original

1943 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

AJAX cross-domain

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

$.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>

Copier après la connexion

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.