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中的请求参数!