AJAX

最新推荐文章于 2025-04-23 12:57:09 发布

原创最新推荐文章于 2025-04-23 12:57:09 发布 · 4.1k 阅读

9 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

1 篇文章

订阅专栏

HTTPS

"/jsontest/randomdata/" // there was a missing trailing /

// i.e.  https://larsendt.com/jsontest/randomdata?ymax=500&count=32&t=0.9604179110508643
// was going to https://larsendt.com/jsontest/randomdata/?ymax=500&count=32&t=0.9604179110508643

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('result').innerHTML = xhr.responseText;
                }
            }

            //获得输入的用户名，并传递个服务器端
            var ming = document.getElementById('username').value;

            //对ming变量的特殊符号信息进行编码
            ming = encodeURIComponent(ming);

            xhr.open('get','./04.php?nm='+ming+'&age=23', 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>
        <div id="result"></div>
    </body>
</html>

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('result').innerHTML = xhr.responseText;
                }
            }
            xhr.open('post','./05.php?height=165', true);
            //默认为true异步请求, false为同步请求

            //post请求需要把数据组织为xml格式
            //以下方法必须要在"open"方法后进行设置
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //获得输入的用户名，并传递个服务器端
            var ming = document.getElementById('username').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>
        <div id="result"></div>
    </body>
</html>

FormDate收集表单数据

<!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>密&nbsp;&nbsp;码：<input type="password" name="pwd"></p>
        <p>邮&nbsp;&nbsp;箱：<input type="text" name="email"></p>
        <p>头&nbsp;&nbsp;像：<input type="file" name="userpic"></p>
        <p><input type="button" value="提交" id="btn"></p>
    </form>
    <script type="text/javascript">
        //form表单节点对象
        var oForm = document.getElementsByTagName('form')[0];
        //按钮
        var oBtn = $('btn');
        oBtn.onclick = function(){
            //先收集输入框的内容
            var user = document.getElementsByName('user')[0].value;
            var pwd = document.getElementsByName('pwd')[0].value;
            var email = document.getElementsByName('email')[0].value;

            //通过ajax提交到服务器
            var xhr;
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            xhr.open('POST','upload.php',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>

AJAX跨域

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

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=demo

JQUERY AJAX

语法:
$.get(url,data,function(),dataType)
url:请求的文件。
data:传递数据。
function(responseText,statusText,xhr):返回函数.
responseText:返回的文本。
statusText:返回的状态值。
status 包含请求的状态
（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
xhr:XMLHttpRequest()请求对象。
datatype:
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应，并以纯文本返回
“json” - 以 JSON 运行响应，并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

$.get(),$ .post() //post与get参数无异

<!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()
{
        $('#bt1').click(function(){
        var username = $('input[name=username]').val();//获取用户名的值
        var pwd = $('input[name=password]').val();//获取密码的值
            $.get(
                'get.php',//url
                {username:username,pwd:pwd},//$_GET['username']:请求的数据
                function(res,sta,xhr){//回调函数
                    //res:返回值
                    //sta:返回的状态
                    //xhr:请求的对象XMLHttprequest
                    // alert('返回值是：'+res);
                    if(sta == 'success'){
                        $('span').html(res);
                    }
                }
                )
        });

});
</script>
<style type="text/css">

</style>
</head>
<body>

用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1"  value="发送请求" />

</body>
</html>

$.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()
{
        $('input[name=username]').keyup(function(){
        var username = $('input[name=username]').val();//获取用户名的值
        var pwd = $('input[name=password]').val();//获取密码的值
            $.ajax({
                url:'post.php',
                data:{username:username,pwd:pwd},
                dataType:'html',
                type:'post',
                success:function(mydata){
                    $('span').html(mydata);
                }
            })
        });

});
</script>
<style type="text/css">

</style>
</head>
<body>

用户名：<input type="text" name='username' /><span></span><br>
密码：<input type="password" name='password' /><br>
<input type="button" id="bt1"  value="发送请求" />

</body>
</html>