Ajax

Ajax：异步的JavaScript and XML

运行原理：页面发起请求，请求会发送至浏览器内核中的Ajax引擎中，Ajax引擎会将请求发送给服务端，服务端返回处理数据给Ajax，会触发设置的事件，从而起到刷新局部页面数据的效果（依然是http协议）。

async：true   异步请求，在请求发送后不管服务端有没有返回数据，都可以对客户端页面进行操作

async：false  同步请求，在未获得服务端响应数据前，客户端页面处于等待卡死状态，在回调函数以下的代码都执行不了

一、原生ajax

核心：XMLHttpRequest对象，提供了对http协议的完全访问。

function newA(){
    //1. 创建对象
    var xhr;
    // 判断浏览器是否支持XMLHttpRequest
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 设置请求  xhr.open(method,url,async)
    xhr.open("GET/POST","index.html",true);
    //3. 设置回调函数，监听事件
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
             var res = responseText；// 或者responseXML
        } 
    }
    //4. POST 时设置协议头，GET不需设置，省略此步
    xhr.setRequestHeader("Content-type","Application/x-www-form-urlencoded");
    //5. 发送请求 GET时send()中无内容xhr.send()
    xhr.send("name=abc&age=18");
    
}

当readyState改变时，都会触发onreadystatechange事件，XMLHttpRequest的三个重要属性如下：

注意content-type：Form元素语法中EncType表明数据提交的格式，属性值指定浏览器发数据发送服务器时浏览器的编码类型。

application/x-www-form-urlencoded（默认方式）：将form表单请求参数按name1=v1&name2=v2...的方式拼接起来成一句，在get时加在url后，在post时放在请求体里，会对非ASCII字符（如汉字）转码（效率问题）

multipart/form-data：包含数据很多时（比如有文件type=file），对非ASCII字符不会转码，直接按编码方式放入数据包中，效率高。发送的请求中不同的input之间用一段叫boundary的字符串分割，每个input都有了自己一个小header，其后空行接着是数据

但是application/x-www-form-urlencoded处理不了复杂的json参数，转化不成name1=v1&name2=v2...的键值对形式，发送请求后服务端的参数为空，所以在使用复杂json作为参数时使用 application/json;charset=utf-8，它是text类型，将参数JSON.stringify(data)序列化后发送，服务端使用@RequestBody JSONObject jsonObject接收

二、JQuery Ajax

底层还是js Ajax，就像JQuery底层还是JavaScript一样，都是对底层进行封装，便于开发操作,相关操作有如下几种：

常用的有$.get ,$.post , $.ajax

var data = {
	name: 'jessic',
	age: 18,
}
$.ajax({
	url: "http://192.168.60.30:8080/hfapp/mune/info",
	type: "post",//get / post
	async: true,
	dataType: "json", //返回值类型
	contentType: 'application/json;charset=utf-8', //发送参数编码类型
	data: {
		param: JSON.stringify(data)
	},
	beforeSend:function(){
		//返回true继续向下执行，false停止执行
	},
	success:function(data) {
		console.info(data);
	},
	error:function(XMLHttpRequest, textStatus, errorThrown){
		
	}
});

常用参数

1. url                   String          请求地址

2. type                String          http请求方式

3. async              Boolean      默认true，异步/同步请求

4. dataType        String          服务器返回数据类型，不指定时JQuery根据HTTP包的MIME信息自动判                                                                                      断:xml/html/json/jsonp/script/text

5. contentType    String         发送给服务器时的内容编码类型，默认application/x-www-form-urlencoded，如果是                                                                     application/json;charset=utf-8，最好先将数据转成json格式JSON.stringify(data)，或手动拼                                                 接成json形式data:"{'name' : " + name+"}"

6. data：              String         发送到服务器的数据，自动转换成请求字符串格式

7. processData    Boolean      默认true，默认情况下通过data选项传递进来的数据，都会默认转化为contentType规定类型的                                                  请求查询字符串，在FormData的情况、进行文件上传之类的就必须要设置为false

8. cache               Boolean      默认true（当dataType为script时，默认为false），false时将不会从浏览器缓存中加载请求信                                                     息，使用ajax进行文件上传的时候要设置为false

9. success            Function     请求成功是调用的方法

10. error               Function     请求失败时调用的方法

serialize()             传递一个或多个form表单参数时可以用,生成序列化的表单值，生成的序列化值可在ajax请求时用于url查询字                              符串中：data：$("form").serialize()/$("#formid").seialize(),序列化后的参数形式                                                                           为FirstName=Mickey&LastName=Mouse...，

                             服务端使用普通参数获取方式获取或者使用实体接收@RequestParam Entity ent

三、ajax发送json类型请求

前端发送数据

function send(){
		 	 var param = [{"name":"jack","age":11},{"name":"lucy","age":22},{"name":"jse","age":33}];
		 		$.ajax({
		 			url:"http://ip:8008/muweb/mu/mu.do?method=getAjax",		 			
		 			data:JSON.stringify(param),// 直接将json类型参数序列化
		 			type:"post",
		 			dataType:"json",
		 			contentType:"application/json;charset=utf-8", 
		 			success: function(res){
		 				
		 			}
		 		})
		 	}

服务端接收数据：两种方式，MVC框架可以用@RequestBody接收和使用流接收

MVC：

@RequestMapping(params="method=getAjax")
	public void getAjax(HttpServletResponse response,@RequestBody JSONArray jsonArray) throws IOException {
		//System.out.println(request.getReader().readLine());
		System.out.println(jsonArray);

	}

非MVC框架使用的流方式：

@RequestMapping(params="method=getAjax")
	public void getAjax(HttpServletRequest request, HttpServletResponse response) throws IOException {
                System.out.println(URLDecoder.decode(request.getReader().readLine(),"utf-8"));
		System.out.println(request.getReader().readLine());// 会有乱码
//		System.out.println(jsonArray);

	}

注意：当方法参数中使用了@RequestBody 时，方法体中便不能再使用流的方式读取请求参数，否则报错

java.lang.IllegalStateException: getInputStream() has already been called for this request

由此也可知@RequestBody已经使用过流的方式获取过了request中的请求参数！