SpringMVC——异步调用与跨域访问

异步调用

• 添加Jackson的坐标pom.xml

<!--        json坐标三个-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>

接收异步请求参数的传递

• jsp代码

//为id="testAjax"的组件绑定点击事件
$("#testAjax").click(function(){
    //发送异步调用
    $.ajax({
        //请求方式：POST请求
        type:"POST",
        //请求的地址
        url:"ajaxController",
        //请求参数（也就是请求内容）
        data:'ajax message',
        //响应正文类型
        dataType:"text",
        //请求正文的MIME类型
        contentType:"application/text",
    });
});

//为id="testAjaxPojo"的组件绑定点击事件
$("#testAjaxPojo").click(function(){
    $.ajax({
        type:"POST",
        url:"ajaxPojoToController",
        data:'{"name":"Jock","age":39}',
        dataType:"text",
        contentType:"application/json;charset=utf-8"
    });
});

异步请求接收响应数据

• jsp代码

//为id="testAjaxReturnString"的组件绑定点击事件
$("#testAjaxReturnString").click(function(){
    //发送异步调用
    $.ajax({
        type:"POST",
        url:"ajaxReturnString",
        //回调函数
        success:function(data){
            //打印返回结果
            alert(data);
        }
    });
});

//为id="testAjaxReturnjson"的组件绑定点击事件
$("#testAjaxReturnjson").click(function(){
    //发送异步调用
    $.ajax({
        type:"POST",
        url:"ajaxReturnjson",
        //回调函数
        success:function(data){
            alert(data);//这里弹出的是[object Object]
            alert(data['name']+" ,  "+data['age']);//这里弹出的是Jockme ,  39
        }
    });
});

//为id="testAjaxReturnjsonList"的组件绑定点击事件
$("#testAjaxReturnjsonList").click(function(){
    //发送异步调用
    $.ajax({
        type:"POST",
        url:"ajaxReturnjsonList",
        //回调函数
        success:function(data){
            alert(data);//[object Object],[object Object]
            alert(data.length);//2
            alert(data[0]["name"]);//Tom
            alert(data[1]["age"]);//5
        }
    });
});

跨域访问

• 当通过域名A下的操作访问域名B下的资源时，称为跨域访问

• 跨域访问时，会出现无法访问的现象

跨域访问环境搭建：这样配置过后，就可以使用www.jock.com访问127.0.0.1；配置完过后，通过localhost和www.jock.com进行访问，如此便实现该环境