ajax学习

AJAX学习

什么是AJAX ？

AJAX是指 Asynchronous JavaScript And XML（异步JavaScript和XML）。

AJAX是一种无需重新加载整个网页的情况下，能够更新局部网页的技术。

传统的网页（不使用AJAX），如果需要更新内容，则需要重新加载网页。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

​

原生js实现（了解即可）

创建对象

//创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    //新版本的浏览器创建
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    //老版本的浏览器创建
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

请求

​ 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

​ get请求：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

​ post请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

​ 参数：
​ 第一个参数：请求方式（get 或 post）
​ get方式，请求参数在URL后面拼接。send()方法参数为空。
post方式，请求参数在send()方法中。
第二个参数：请求的URL
第三个参数：同步或异步请求（true 异步 或 false 同步）

服务器响应

​ 什么时候获取返回的响应？

​ 当服务器响应成功后再获取。

​ 如果来自服务器的响应并非 XML，请使用 responseText 属性：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

​ 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。（了解）

代码实现

<script>
//定义方法
function fun(){
    //创建核心对象
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        //新版本的浏览器创建
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        //老版本的浏览器创建
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //建立连接
    /*
    参数：
        第一个参数：请求方式（get 或 post）
            get方式，请求参数在URL后面拼接。send()方法参数为空。
            post方式，请求参数在send()方法中。
        第二个参数：请求的URL
        第三个参数：同步或异步请求（true 异步 或 false 同步）
     */
    xmlhttp.open("GET","ajaxServlet?name=lisi",true);
    //发送请求
    xmlhttp.send();

    //接收服务器端返回的数据
    //当xmlttp对象的就绪态发生改变就会触发事件onreadystatechange。
    xmlhttp.onreadystatechange = function (){
        //判断readyState就绪状态是否为4
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var responseText = xmlhttp.responseText;
            alert(responseText);
        }
    }
}
</script>

JQuery实现

通用方式：

​ 语法：$.ajax({键值对})

​ 常用的键值对：

​ url : 路径( “ajaxServlet” ) //请求路径

​ type : ( “POST” or “GET” ) //请求方式

​ date : (“name=lisi&age=18”) //请求参数

​ 但是不推荐上面这种请求参数的写法，可以写成这样：

​ data : {“name”:“lisi”,“age”:18}

​ success : function(){} //响应成功后的回调函数

​ error : function (){} //表示如果请求响应出现错误，会执行回调函数

​ dataType : “text”（ “xml”,“json”,“html”,“script”) //设置接收到的响应数据的格式

<script src="js/jquery-3.6.0.js"></script>
<script>
        //定义方法
        function fun(){
            $.ajax({
                url:"ajaxServlet",//请求路径
                type:"POST",//请求方式
                //data:"name=lisi&age=18"//请求参数
                //推荐使用下面的格式
                data:{"name":"lisi","age":18},
                success:function (data){
                    alert(data);
                },//响应成功后的回调函数
                error:function (){
                    alert("出错了。。。")
                },//表示如果请求响应出现错误，会执行回调函数
                dataType:"text"//设置接收到的响应数据的格式
            });
        }
</script>

get方式

​ 语法：$.get( url , [data] , [callback] , [type])

​ 参数：

​ url：请求路径

​ data：请求参数

​ callback：回调函数

​ type：响应结果类型

<script src="js/jquery-3.6.0.js"></script>
<script>
    //定义方法
    function fun(){
        $.get("ajaxServlet",{name:"lishi"},function (data){alert(data)},"text");
    }
</script>

post方式

​ 语法：$.post( url , [data] , [callback] , [type])

​ 参数：

​ url：请求路径

​ data：请求参数

​ callback：回调函数

​ type：响应结果类型

<script src="js/jquery-3.6.0.js"></script>
<script>
    //定义方法
    function fun(){
        $.post("ajaxServlet",{name:"lishi"},function (data){alert(data)},"text");
    }
</script>

有错请指出，谢谢！