Ajax学习笔记，原生的ajax，jQuery的ajax，跨域问题

Ajax学习笔记

AJAX 是开发者的梦想，因为您能够：

• 不刷新页面更新网页
• 在页面加载后从服务器请求数据
• 在页面加载后从服务器接收数据
• 在后台向服务器发送数据

1、原生js实现ajax

<script>
    var box = $(".box");
    $("button").click(function () {
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 设置响应体的类型，以json字符串的结果会自动转换成js对象
        xhr.responseType = "json";
        /*
           这个方法第一个参数是访问的类型，第二个参数是请求的url
           初始化，可以在url后面跟加参数
         */
        xhr.open("Get","http://localhost/ssm/test");
        // 设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 发送请求，如果请求方式时post请求，在send()方法中设置请求参数
        // xhr.send("a=100&b=200");
        xhr.send();

        // 设置请求超时的时间，2s
        xhr.timeout = 2000;
        // 当请求超时时的回调函数
        xhr.ontimeout = function () {
            alert("请求超时!");
        };
        // 网络异常时的回调函数
        xhr.onerror = function () {
          alert("您的网络异常!");
        };
        // 设置取消请求
        // xhr.abort();

        // 获取响应，当xhr.readyState为4时，服务器就全部响应完毕
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
                // 状态码以2开头的就是成功响应
                if(xhr.status >= 200 && xhr.status < 300){
                    box.html(xhr.response.userName);
                }
            }
        };
    });
</script>

2、jQuery实现ajax

get()方法：
通过get请求的方式请求。

$(function () {
    // 第一个方法$.get()，通过方法来请求
    var box = $(".box");
    $("button").click(function () {
        $.get("http://localhost/ssm/test",{
            a : 100,
            b : 200
        },function (data) {
            // 当请求成功时执行的回调函数
            console.log(data);
            box.html(data.userName);
        },"json");
    });
});

四个参数：

• url：请求的地址。
• data：参数，以 {key:value}的形式传入，多个值之间使用逗号隔开。
• function(data){}：请求成功时的回调函数，返回的数据封装到data中，以参数形式传入。
• 返回的数据类型：设置返回的数据类型，以字符串的形式传入，如果是json则json字符串的数据会自动转换成js对象。

该方法的第一个参数是必须的，后面的三个参数是可选值。该方法请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax，没有出错的回调函数。

getJSON()：

// 第二个方法$.getJSON()
$("button").click(function () {
    $.getJSON("http://localhost/ssm/test",
        {
            a : 100,
            b : 200
        },
        function (data) {
            console.log(data);
            box.html(data.userName);
        }
    );
});

这个方法和get()方法类似，只是不用指定返回的数据类型，直接将返回的json字符串自动转换成js对象。通过这种方式同时解决了跨域的问题。

post()：
通过post请求的方式请求。

// 第三个方法$.post()
$("button").click(function () {
    $.post("http://localhost:80/ssm/test1",
        {
            a : 100,
            b : 200
        },
        function (data) {
            console.log(data);
            box.html(data.userName);
        },"json");
});

参数与get()方法的请求类似。

ajax()：

$("button").click(function () {
    $.ajax(
        {
            type: "get",   // 请求的类型
            url: "http://localhost/ssm/test",  // 请求的地址
            data: "a=100&b=200",  // 请求的参数
            dataType: "json",  // 返回数据的类型
            timeout: 2000,  // 超时时间，2s
            success: function (data) {  // 请求成功时的回调函数
                console.log(data);
                box.html(data.userName);
            },
            error: function () {  // 请求失败的回调函数
                console.log("您的请求不存在!");
            }
        }
    );
});

通常使用这种方式将参数作为一个对象传入，type表示访问的类型，url表示请求的路径，data表示参数，success表示请求成功时的回调函数，后端返回的数据会封装到data中，dataType表示设置返回数据类型，json是将返回的json字符串转换成js对象。

load()：
载入远程 HTML 文件代码并插入至 DOM 中。

$("button").click(function () {
    // 将远程请求的数据加载到指定的元素中，可以是数据中的某一个元素
    // 通常用于刷新页面的中的某个部分，在请求地址后面给一个页面的中元素的选择器
    box.load("http://localhost/ssm/index.html #content");
});

3、跨域问题

一般跨域问题是由后端程序员解决的问题，前端也可以解决，但是不方便，下面介绍几种跨域问题的解决方案。

1. 使用jsonp的方式方式请求，这是在前端解决跨域请求，但是这种方式只支持get方式的请求，不推荐使用。
2. 设置响应头，在后端设置一个响应头让它支持跨域请求，固定格式。

response.setHeader("Access-Control-Allow-Origin","*");

3. spring-mvc中解决跨域问题，可以在controller的请求上面添加一个注解@CrossOrigin，这样也可以解决跨域问题。

@RequestMapping(value = "/test",method = RequestMethod.GET)
@ResponseBody
@CrossOrigin
public String test(HttpServletResponse response){
    // 设置响应头，解决跨域问题
    response.setHeader("Access-Control-Allow-Origin","*");
    User user = new User(1, "张三", "123");
    return JSON.toJSONString(user);
}

4. 设置过滤器，将需要跨域的请求进行拦截筛选。

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;


@Component
public class CrossFilter implements Filter {
    private static Logger logger = LoggerFactory.getLogger(CrossFilter.class);
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
      	// 设置请求跨域
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        httpServletRequest.getSession();
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");
        httpResponse.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Content-type", "application/json");
        httpResponse.setHeader("Cache-Control", "no-cache, must-revalidate");
        chain.doFilter(request, httpResponse);
    }
}