ajax用法示例

最新推荐文章于 2024-09-11 20:28:45 发布

pxy_Shineyo

最新推荐文章于 2024-09-11 20:28:45 发布

阅读量410

点赞数

分类专栏： JavaScript 文章标签： ajax 表单验证 php get post

本文链接：https://blog.csdn.net/PXYStyle/article/details/50761545

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.点击按钮弹出所请求的文件内容

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})  //阻塞 -> 同步

//非阻塞 - 异步
/*setTimeout(function() {
    alert(1);
}, 2000);

alert(2);*/

window.onload = function() {

    var oBtn = document.getElementById('btn');


    oBtn.onclick = function() {

        //打开浏览器
        /*
            1.创建一个ajax对象
                ie6以下new ActiveXObject('Microsoft.XMLHTTP')
        */
        var xhr = null;
                    //解决ie6兼容问题if方式
        /*if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }*/
                   //解决ie6兼容问题try catch finally 方式
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        //在地址栏输入地址
        /*
            open方法
            参数
                1.打开方式
                2.地址
                3.是否异步
                    异步:非阻塞 前面的代码不会影响后面代码的执行
                    同步:阻塞 前面的代码会影响后面代码的执行
        */
        xhr.open('get','1.txt',true);
        //提交 发送请求
        //alert(1);
        xhr.send();

        //alert(1)

        //alert( xhr.responseText );

        //等待服务器返回内容
        xhr.onreadystatechange = function() {

            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }

        }

    }
}
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

2.点击提交返回表单填入数据内容
demo.html:

<!DOCTYPE HTML><html><head><meta charset=utf-8"><title>无标题文档</title></head><body>
    /*表单：数据的提交
        action : 数据提交的地址，默认是当前页面
        method : 数据提交的方式，默认是get方式
            1.get
                把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
                url长度限制的原因，我们不要通过get方式传递过多的数据
            2.post
                理论上无限制
        enctype : 提交的数据格式，默认application/x-www-form-urlencoded*/
<formaction="demo.php" method="post"><inputtype="text" name="username" /><inputtype="text" name="age" /><inputtype="submit" value="提交" /></form></body></html>

demo.php:

<?php
 header("content-type:text/html;charset= utf-8;");
 $username=$_POST['username'];
 $age=$_POST['age'];
 echo "你的名字: $username <br/> 年龄:$age";
 ?>