ajax学习

最新推荐文章于 2024-04-30 11:27:22 发布

yuhaiqi666

最新推荐文章于 2024-04-30 11:27:22 发布

阅读量217

点赞数

分类专栏：新手学习文章标签： ajax 数据交互同步异步 get和post

新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<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;
       /*if (window.XMLHttpRequest) {
           xhr = new XMLHttpRequest();
       } else {
           xhr = new ActiveXObject('Microsoft.XMLHTTP');
       }*/
       try {
           xhr = new XMLHttpRequest();
       } catch (e) {
           xhr = new ActiveXObject('Microsoft.XMLHTTP');
       }

       //alert( xhr.readyState );
       //在地址栏输入地址
       /*
           open方法
           参数
               1.打开方式
               2.地址
               3.是否异步
                   异步:非阻塞前面的代码不会影响后面代码的执行
                   同步:阻塞前面的代码会影响后面代码的执行
       */
       xhr.open('get','1.txt',true);
       //提交发送请求
       //alert(1);
       xhr.send();
       //alert( xhr.readyState );

       //alert(1)

       //alert( xhr.responseText );


       //等待服务器返回内容
       /*
           readyState : ajax工作状态
           responseText : ajax请求返回的内容就被存放到这个属性下面
           on readystate change : 当readyState改变的时候触发
           status : 服务器状态，http状态码
       */
       xhr.onreadystatechange = function() {

           if ( xhr.readyState == 4 ) {
               if ( xhr.status == 200 ) {
                   alert( xhr.responseText );
               } else {
                   alert('出错了,Err：' + xhr.status);
               }
           }

       }

   }
}
</script>
</head>

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

</html>

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