zoukankan      html  css  js  c++  java
  • 23ajax基础;

    ajax:发送异步请求到服务器读取所需要的数据;

    步骤:1创建ajax对象;var oAjax=new XMLHttpRequest(); chrome ff,  var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

       2连接服务器;oAjax.open('GET',url,true);true表示异步,false表示同步;

        3发送请求;oAjax.send();

       4接收服务器响应 oAjax.onreadystatechange();

    readyState五种状态:

    • 0:请求未初始化(还没有调用 open())。
    • 1:请求已经建立,但是还没有发送(还没有调用 send())。
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
    • 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
    • 4:响应已完成;您可以获取并使用服务器的响应了。

     oAjax.status==200;成功 404未找到页面;

    responseText成功后从浏览器读取的数据;

    window.XMLHttpRequest;没有定义的属性会报undefine;没有定义的变量,会报错;

    ajax js:

    function ajax(url, fnSucc, fnFaild)
    {
        //1.创建Ajax对象
        if(window.XMLHttpRequest)
        {
            var oAjax=new XMLHttpRequest();
        }
        else
        {
            var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        }
        
        //2.连接服务器(打开和服务器的连接)
        oAjax.open('GET', url, true);
        
        
        //3.发送
        oAjax.send();
        
        //4.接收
        oAjax.onreadystatechange=function ()
        {
            if(oAjax.readyState==4)
            {
                if(oAjax.status==200)
                {
                    //alert('成功了:'+oAjax.responseText);
                    fnSucc(oAjax.responseText);
                }
                else
                {
                    //alert('失败了');
                    if(fnFaild)
                    {
                        fnFaild();
                    }
                }
            }
        };
    }
    View Code

    ajax(url,fnSucc,fnFail);可以修改fnSucc,结合DOM和ajax,可以将从服务器读取的数据在浏览器上输出;

    eval(str);可以计算字符串;计算从服务器上读取的数据字符串;

    为了解决缓存的问题,在url中文件名加'?t='+new Date().getTime();这样每次取得的文件名就会不一样了。以保证取得实时的数据;

    数据读取的方法:get,post;

    get:不安全,容量小,一般能在url中看到;用来访问数据;

    post:相对安全稳定,容量大,不能在url中看到;用来传输数据

    从服务器上读取用户名,qq号,并在浏览器中输出;

    <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>
    View Code
  • 相关阅读:
    0615-temp-python web
    ResultSet 转ArrayList
    svn与git
    日期与时间
    springboot 注解
    函数式编程
    几个O
    springboot框架中的异步执行
    JDBC
    mysql 导出表结构
  • 原文地址:https://www.cnblogs.com/maoduoduo/p/3180336.html
Copyright © 2011-2022 走看看