ajax知识点补充

读取服务器上的数据：

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
   var oBtn=document.getElementById('btn1');
   var oUl=document.getElementById('ul1');
   
   oBtn.onclick=function ()
   {
      ajax('data.txt?t='+new Date().getTime(), function (str){
         var arr=eval(str);
         
         for(var i=0;i<arr.length;i++)
         {
            var oLi=document.createElement('li');
            
            oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
            
            oUl.appendChild(oLi);
         }
      }, function (){
         alert('失败');
      });
   };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>

ajax，js：

function ajax(url, fnSucc, fnFaild)
{
   //1.创建Ajax对象
   if(window.XMLHttpRequest)
   {
      var oAjax=new XMLHttpRequest();     //非IE6浏览器
   }
   else
   {
      var oAjax=new ActiveXObject("Microsoft.XMLHTTP");    //IE6浏览器
   }
   
   //2.连接服务器
   //open(方法, 文件名, 异步传输)
   oAjax.open('GET', url, true);
   
   //3.发送请求
   oAjax.send();
   
   //4.接收返回
   oAjax.onreadystatechange=function ()
   {
      //oAjax.readyState //浏览器和服务器，进行到哪一步了
      if(oAjax.readyState==4)    //读取完成
      {
         if(oAjax.status==200)  //成功
         {
            fnSucc(oAjax.responseText);
         }
         else
         {
            if(fnFaild)
            {
               fnFaild(oAjax.status);
            }
            //alert('失败:'+oAjax.status);
         }
      }
   };
}



data.txt：

[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]

eg：
ajax.js：

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data) {
        url += '?' + data;
    }

    xhr.open(method, url, true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function () {

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

    }
}
HTML：

<!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 () {

                var xhr = null;
                try {
                    xhr = new XMLHttpRequest();
                } catch (e) {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                /*
                 1.缓存 在url？后面连接一个随机数，时间戳
                 2.乱码 编码encodeURI
                 */
                xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + '&age=30&' + new Date().getTime(), true);
                xhr.send();

                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>
HTML（post）：

<!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 () {

                var xhr = null;
                try {
                    xhr = new XMLHttpRequest();
                } catch (e) {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

                xhr.open('post', '2.post.php', true);
                //post方式，数据放在send()里面作为参数传递
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
                //post没有缓存问题
                //无需编码
                xhr.send('username=刘伟&age=30');

                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>

posted on 2016-05-23 18:18 Newbie_小白阅读(218) 评论(0) 收藏举报