Ajax请求

Ajax即“Asynchronous Javascript And Xml”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

Ajax是一种浏览器通过js异步发起请求,局部更新页面的技术。

Ajax由前端来实现

通过原生的js来实现Ajax请求

1、首先创建XMLHttpRequest对象

var xmlHttpRequest=new XMLHttpRequest();

2、调用open方法设置请求信息及参数

xmlHttpRequest.open(method,Url,true/false);
  • 其中method是请求的方式:GET/POST
  • Url是请求的地址
  • true/false :表示异步或者同步

3、在send方法发送请求之前,先绑定onreadystatechange事件,处理请求完成后的操作(回调函数)

    xmlHttpRequest.onreadystatechange=function () {
        if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
            var jsonObj=JSON.parse(xmlHttpRequest.responseText);
            //把响应的数据显示在页面上
            document.getElementById("div01").innerHTML="编号:"+jsonObj.id+" ,姓名:"+jsonObj.name;
        }
    }

4、调用send()发送请求

完整代码:

        function ajaxRequest() {
                //1、我们首先要创建XMLHttpRequest
                var xmlHttpRequest=new XMLHttpRequest();
                //2、调用open方法设置请求参数
                xmlHttpRequest.open("GET","http://localhost:8080/json/ajaxServlet?action=javaScriptAjax",true);
                //3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
                xmlHttpRequest.onreadystatechange=function () {
                    if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                        alert("收到服务器返回的数据"+xmlHttpRequest.responseText);
                        var jsonObj=JSON.parse(xmlHttpRequest.responseText);
                        //把响应的数据显示在页面上
                        document.getElementById("div01").innerHTML="编号:"+jsonObj.id+" ,姓名:"+jsonObj.name;
                    }
                }
                //4、调用send方法发送请求
                xmlHttpRequest.send();
        }

Ajax请求的特点:

  • Ajax请求局部更新,浏览器的地址栏不会发生变化
  • 局部更新不会舍弃原来页面的内容
  • 异步的好处:当前功能的交互并不用影响其他功能的交互。不会出现当前功能正在交互,而其他功能无法使用的情况。

jQuery中的Ajax请求

jQuery中的Ajax请求是对原生js的Ajax请求的封装,操作更为便捷

$.ajax({
    url:"http://localhost:8080/json/ajaxServlet",
    data:{action:"jQueryAjax"},
    type:"GET",
    success:function (data) {
        //var jsonObj = JSON.parse(data);
        alert(data);
        $("#msg").text("编号:"+data.id+" ,姓名:"+data.name);
    },
    dataType:"json"
});

其中:

  • url:表示请求的地址
  • data:表示请求参数
  • type:表示请求的类型GET/POST
    格式有两种:
    1、name=value&name=value
    2、{key:value}
  • success:请求成功后的回调函数
  • dataType:响应回来的数据类型
    常用的数据类型:
    1、text 表示纯文本
    2、xml 表示xml数据
    3、json 表示JSON对象

jQuery中Ajax请求的进一步封装

Get方式的Ajax请求,无需再写请求的类型

$.get (url,data,callback,type)

POST方式的Ajax请求,与上面的类似

$.post(url,data,callback,type)

这两种的方式的type参数与$.ajax中的type参数略微有些差别

  • type:响应回来的数据类型

$.getJSON(url,data,callback):此方法默认为get请求,且响应回来的数据默认给你转化成了json对象类型.。因此无需我们填写请求方式和数据类型

注意:如果后台返回的不是正确的响应的数据类型,那么永远不执行回调函数success,而只执行error函数。这里需要注意,容易踩坑,前端的BUG没有提示修改起来很痛苦~

补充:

表单序列化 serialize():serialize() 可以把表单中的所有表单项的内容获取到,以name=valuer&name=value的形式拼接起来

最后修改:2021 年 06 月 06 日 02 : 28 PM
如果觉得我的文章对你有用,请随意赞赏