ajax

最新推荐文章于 2024-05-14 00:20:38 发布

newbeedaly

最新推荐文章于 2024-05-14 00:20:38 发布

阅读量273

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/willdic/article/details/80740233

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax异步请求

同步是排队，异步即并行

js请求

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">

            function showText(text){
                var span = document.getElementById("span");
                span.innerHTML = text;
            }


            function test(){
                var uname = document.getElementById("uname").value;
                var upass = document.getElementById("upass").value;
                //Ajax
                //创建到了一个Ajax的请求对象
                var xhr = new XMLHttpRequest();
                //设置回调方法
                xhr.onreadystatechange = function(){
                    //共分为5个状态码:  0  1  2  3  4 
                    if(xhr.status==200&&xhr.readyState==4){
                        //在这里代表响应已经结束, 且响应正常

                        //获取ajax中的 响应结果
                        var text = xhr.responseText;
                        if(text=="ok"){
                            showText("登录成功");
                        }else{
                            showText("登录失败, 请检查您的帐号或者密码");
                        }

                    }else if(xhr.stauts!=200){
                        showText("暂时无法登录 ,请联系管理员~");
                    }
                }
                //打开一个请求
                /**
                    参数1.    String:请求方式
                    参数2.    String:请求的url
                    参数3.    boolean:是否异步请求 
                */
                xhr.open("get","login.do?uname="+uname+"&upass="+upass,true);

                //发起一个请求
                //参数: 当请求方式为get时, 传递null
                //参数: 当请求方式为post时 , 传递参数
                //  例如:  要传递用户名+密码:  "uname=xxx&upass=xxx"
                xhr.send(null);

            }


        </script>
    </head>
    <body>
        <form action="login.do">
            帐号:<input name="uname" id="uname"/><span id="span"></span><br><br>
            密码:<input type="password" id="upass" name="upass"/><br><br><br>
                <input type="button" onclick="test()" value="登录"/>
        </form>
    </body>
</html>

script标签里写事件触发的代码
创建XMLHttpReqeust对象
设置回调函数 -- *.onreadystatechange = function(){}
打开一个请求 -- *.open(“请求方式”,”url”,boolean true);
        -- url不需要加/,否则报错
发生这个请求 -- *.send(参数/null);
        -- 如果是post方式需要在send()里传参，但事先需要设置*.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
等待在步骤3回调函数中进行结果的处理
*.readyState; -- 1 执行的状态码 0 1 2 3 4
    -- 0请求未初始化 1请求正在发送 2发生完毕 3响应交互中 4响应完成
*.status; -- 服务器沟通的状态码，200为正常
*.responseText; -- 或许响应的信息

jquery请求

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                var count = 0;
                $(":button").click(function(){
                    count++;
                    //向服务器发起Ajax请求, 将获取的数据填充到div中
                    /**
                        url: 请求的地址
                        type:请求的方式
                        dataType: 服务器响应的数据类型, JSON/text 
                        data: 携带的参数
                        success: 成功时执行的回调函数
                        error: 失败时 执行的回调函数

                    */
                    $.ajax({
                        "url":"test.do",
                        "type":"get",
                        "dataType":"json",
                        "data":"count="+count,
                        "success":function(data){
                            //data就是获取到的数据 , 
                            //如果dataType是JSON, 那么data就是一个JSON对象
                            //如果dataType是text,那么data就是一个字符串
                            $("div").html("<img src='"+data.src+"'/>");
                            $("div").html($("div").html()+"<br>");
                            $("div").html($("div").html()+"<span>"+data.name+"</span>");
                            $("div").html($("div").html()+"<br>");
                            $("div").html($("div").html()+data.rmb+"  ");
                            $("div").html($("div").html()+"<input type='button' value='查看详情'/>");
                        },
                        "error":function(xhr){
                            //xhr就是XMLHttpRequest
                            alert(xhr.readyState+","+xhr.status);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="获取商品" />
        <div id="div"></div>
    </body>
</html>

Jquery常用的Ajax请求方法
$.ajax
$.ajax({
    url:请求的地址,
    type:请求的方式,
    dataType:JSON/text,
    async:true,//默认为true异步，false为同步，
    data:"key=value" || {"key":value},
    success:function(data){data是成功获取服务器的数据},
    error:function(xhr){xhr.Status:服务器的错误号，xhr.readyState:执行的状态码}
});
$.get/$.post
$.get/post(“url”,”参数”,function(data){当获取响应结果执行的函数},”JSON/text”);
    $.getJSON
        $.getJSON(“url”,”参数”,function(data){获取响应结果执行的函数});
    $(选择器).load
$(选择器).load(“url”[,”参数”,”function(data){同上}”]);
    -- 中括号可写可不写，将返回的结果填充到选择器当中，
    常用语页面的引用。

newbeedaly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax

ajax异步请求同步是排队，异步即并行js请求&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&amp;gt; &amp;lt;title&a
复制链接

扫一扫

专栏目录