Detailed analysis of how to use AJAX (code pasted)-JS Tutorial-php.cn

The following is the method of using AJAX that I have compiled for you. Interested students can take a look.

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

Copy after login

GET request

<!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

Copy after login

POST request

<!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

Copy after login

FormDate collects form data

<!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

Copy after login

AJAX cross-domain

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

Copy after login

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

Copy after login

JQUERY AJAX

Syntax :
$.get(url,data,function(),dataType)
url: Requested file.
data: Pass data.
function(responseText, statusText,xhr): Return function.
responseText: Returned text.
statusText: The returned status value.
status contains the status of the request
("success", "notmodified", "error", "timeout", "parsererror")
xhr: XMLHttpRequest() request object.
datatype:
"xml" - an XML document
"html" - HTML as plain text
"text" - a plain text string
"script" - runs the response in JavaScript and Returns
"json" as plain text - runs the response as JSON and returns it as a JavaScript object
"jsonp" - loads a JSON chunk using JSONP, which will add a "?callback=?" to the URL to specify the callback

.get(),.get(),.post() //post is the same as get parameters

<!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

Copy after login

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

Copy after login

The above is what I compiled I hope everyone’s tips on how to use AJAX will be helpful to you in the future.

Detailed explanation of the steps for jQuery ajax to call WCF service

jQuery AJAX timeout timeout emergency handling method

JQuery AJAX implementation file download

The above is the detailed content of Detailed analysis of how to use AJAX (code pasted). For more information, please follow other related articles on the PHP Chinese website!