欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现Ajax异步

程序员文章站 2022-07-12 19:15:19
...

jQuery中的$.ajax()方法

  1. 参数:
    async:是否异步,默认true 代表异步
    data:发送到服务器的参数,建议使用Json格式
    dataType:服务器返回的数据类型,常用text和Json
    success:成功响应执行的函数,对应的类型微function类型
    type:请求方式,post/get
    url:请求服务器端的地址
    function fn1() {
            $.ajax({
                async: true,
                dataType: "text",
                success: function (data) {
                    document.getElementById("tis").innerHTML = data;
                },
                error:function () {
                    alert("请求失败!")
                },
                type: "post",
                url: "/ajaxServlet"
            });
        }

jQuery中的get()方法

  1. get(url,[data],[callback],[type])
  2. 参数:
    url:待载入页面的url
    data:待发送的key/value参数
    callback:载入成功时回调函数
    type:返回内容格式(xml,html,json,text,script)
    function fn1() {
            $.get("/ajaxServlet",
                function (data) {
                document.getElementById("tis").innerHTML = data;
            },"text"

            );
        }

原生javaScript实现Ajax

    *function fn1() {
            /!*1.创建Ajax引擎对象*!/
            var xmlHttp = new XMLHttpRequest();
            /!*2.绑定监听----监听服务器是否返回数据*!/
            xmlHttp.onreadystatechange = function () {
                /!*5.接受响应数据*!/

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var res = xmlHttp.responseText;
                    document.getElementById("tis").innerHTML=res;
                }
            }
            /!*3.绑定地址*!/
            xmlHttp.open("post", "/ajaxServlet", true);
            /!*4.发送请求*!/
            xmlHttp.send();


        }