一、AJAX概述

  1. AJAX 全称 asynchronous(异步) javaScript and xml , 在项目中AJAX主要用于通过异步请求的方式与服务器进行交互。 通过在应用中使用AJAX技术给广大的网民用户带来了全新的体验。
  2. AJAX的核心 : 通过使用XHR对象,向服务器发送异步请求。

3异步请求的特点:异步请求响应的是一段字符串文本信息(响应的是网页的局部)。不会造成整张页面的刷新。

4.AJAX不可以进行文件的导出功能,因为导出excel,实际上是文件下载,后台需要往前端(浏览器)写文件流的。而Ajax请求获取数据都是“字符串”,整个交互传输用的都是字符串数据,它没法解析后台返回的文件流,但浏览器可以。

二、使用AJAX开发(原始)

/**
 *  1 创建xhr对象 : 注意浏览器的差异
 *  IE5 6 或以下 版本 xhr = new ActiveXObject("Microsoft.xmlhttp");
 *  非 IE5 6 或以下 版本 xhr = new XMLHttpRequest();
  */
var xhr;
if(window.ActiveXObject) { // IE5 6 或以下 版本
    xhr = new ActiveXObject("Microsoft.xmlhttp");
}else {
    xhr = new XMLHttpRequest();
}
// 2 明确请求目标和请求方式
xhr.open('GET','/AjaxRequest');
// 3 发送请求
xhr.send();
// 4 处理解析响应
xhr.onreadystatechange = function () {
    /**
     * 使用xhr对象中的响应内容
     * xhr在整个运行过程中有自己的状态, 而xhr.readyState的返回值表示整个请求过程的状态:
     *  0 代表请求还未初始化,还没有调用send方法
     *  1 代表调用了send方法,发送了请求
     *  2 请求已经返回了,但是响应的内容还没开始解析
     *  3 开始解析响应内容了,但还没解析完
     *  4 完全解析完毕响应内容,我们可以使用了
     */
    if(xhr.readyState==4 && xhr.status==200) {// 代表响应已经完全解析完毕可以使用了
        // 获取到响应内容
        var txt = xhr.responseText;
        console.log(txt);
        // DOM编程
        document.getElementById('nameMsg').innerHTML = txt;
    }
}

三、发送post请求

var strIds = ['1','2','3']
$.ajax({
            url : "*****",		//后台请求地址
            type:"post",		//请求方式,post请求 ,可以改成get请求
            dataType : "json",	//后台返回值类型,一般均为json
            data:{ids:strIds},	//请求后台所带的参数,为键值对
            traditional : true,	//是否序列化  注:传递类型为数组,则必须加此项为true,否则后端接受不到参数!!!!!
            async : false,		//是否为异步请求
            success:function (data) {	//data为 请求后台返回的数据
                alert(data.status)
            },
            err:function () {
                alert("失败!")
            }
        })

注:传递置后端数据类型为数组时,则traditional 必须加此项为true,否则后端接受不到参数!!!!!

注:若不加traditional : true,则需要在后端使用@RequestParam(value="")指定接受参数的类型,如下↓

@RequestMapping(value = "/****",method = RequestMethod.POST)
    @ResponseBody
    public Object manyFiling(@RequestParam(value="ids[]")String[] ids, HttpServletRequest request){
    }

四、使用ajax传递表单数据。

var form = $('#formId').serialize();
$.ajax({
            url : "*****",		//后台请求地址
            type:"post",		//请求方式,post请求 ,可以改成get请求
            dataType : "json",	//后台返回值类型,一般均为json
            data:form,	//请求后台所带的参数,为表单时,只写定义的变量。
            traditional : true,	//是否序列化  注:传递类型为数组,则必须加此项为true,否则后端接受不到参数!!!!!
            async : false,		//是否为异步请求
            success:function (data) {	//data为 请求后台返回的数据
                alert(data.status)
            },
            err:function () {
                alert("失败!")
            }
        })

若传递后台的参数除了表单还有其他参数,则进行数据的拼接,如下↓

data:form+'&codes='+codes   //不能写{}键值对形式的!