Ajax相关总结
前后端的传输方式
前端和服务器数据的传输方式 常用 的两种，
1.一种是以表单的形式提交，此时可以利用jquery的serialize()方法将表单内容转为a=1&b=2&c=3&d=4&e=5这样的格式传输过去，接收端则可以用javabean直接接收。
2.还有一种方式是以json格式传输，接收时若直接用bean接收则接收不到，此时应该用@RequestBody方式，需要注意的是接收的需要是json串，而不是json对象，可以在发送前使用JSON.stringify函数进行处理。
表单提交(返回值类型为String)
后台
@ResponseBody
public String phoneyanzheng(HttpServletRequest request,HttpServletResponse response) {
Map<String, Object> map = new HashMap<String, Object>();
String info=”测试使用”;
map.put("msg", info);
return new Gson().toJson(map);//回到原页面}
前台
<c:set var="ctx" value="${pageContext.request.contextPath}" />
$.ajax({
type : "POST",
dataType: "json",
url : "${ctx}/bbs/login/getCode",
data : $("#userform").serialize(),//userform为表单id
success : function(result) {
alert(result.msg);}
});
JSON提交
(返回值为bean)
后台
@RequestMapping(value="/testConverter.html")
@ResponseBody //只有是键值对的形式的数据,如map,json,对象,ajax不能回调不是键/值对形式的参数,如返回类型是String,xmlHTTP.responseText得到始终是字符串或者文本流，看了一些资料基本上返回的流都是{"a": 1, "b": 2} 这种类型的字符串,在这里利用该注解把对象转换为json数据,在前台就无需再转换
public User testConverter(@RequestBody User user){
//参数user会自动回显到页面不需要springMVC的addobject()方法;
user.setUserName("testname");
return user;
}
前台
var url=path+'testConverter.html';
$.ajax( {
url : url,
type : "POST",
dataType:"json",
contentType:'application/json;charset=UTF-8',很重要
data:JSON.stringify({“userId”:”1”,”userName”:”hello”,”password”:”test”},
success : function(data) {
alert(data.userName); //date 就相当于返回的user
},
});
@RequestBody注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上,再把HttpMessageConverter返回的对象数据绑定到controller中方法的参数上,在本例中,把前台的json字符串数据绑定到对象的相应属性,@RequestBody注解根据request对象header部分的Content-Type类型逐一匹配合适的HttpMessageConverter来读取数据,
Json对象转换字符串可以使用到json2.js的JSON.stringify()方法
@responseBody用于将controller方法返回的对象通过适当的HttpMessageConverter转换为指定的个时候写入response对象的body数据区,使用时机是返回的数据不是html标签页面(跳转路径),而是某种其他格式的数据,时(如json,XML等)使用,一般在异步获取数据时使用,@responseBody注解根据request对象header部分的Accept属性(逗号隔开)逐一按accept中的类型,去遍历找到冷处理的HttpMessageConverter
如果返回的对象是已经格式化好的json串,不使用@requestBody注解,而应该这样处理,response.setContentType(“application/json”;charset=UTF-8);response.getWriter().print(jsonstr)直接输出到body区,然后视图为void,见下例
上面例子中服务端返回的是个对象，@ResponseBody函数会自动将其转换为客户端要求的‘ dataType:"json",’格式。
另类传输
1.Get方式提交并向前台拼接字符串
(返回值为void)
后台
@RequestMapping("/replacement")
public void replacement(HttpServletRequest request,HttpServletResponse response, String email) {
email = new String(email.getBytes("ISO-8859-1"), "UTF-8");//解决get提交的乱码问题
......
msg ="{\"success\": false,\"msg\":\"此保单号不存在\"}";//这个msg可以在dao层定义根据业务的不同返回相应的提示信息,
response.getWriter().write(msg);//发送前台,由Ajax获取,适合在返回类型为void时使用这种方法,msg为json格式的字符串
response.setCharacterEncoding("UTF-8");
response.getWriter().flush();
}
var date = $("#username").val();
var aa = {username : date};
2.Jquery 的其他方法
$.post("${ctx}/AjaxTest",aa,function(data){
alert(data);
}); //或者$.get
前台
$.ajax({
url : projectName+ "replacement.action?policyID="+policyID+"&email="+email,
dataType: "json",
success: function(data) {
alert(data.msg);
},
});
Ajax核心
Ajax是Asynchronous Javascript and XML(异步javascript与XML)的缩写,ajax核心规范的名称继承与你用来建立和发起请求的javascript对象:XMLHttpRequest,这一规范有两个等级,第一等级代表了基础级别的功能,第二等级扩展了最初的规范,纳入额外的事件和一些功能来让它更容易与form元素协作
var httprequest=new XMLHttpRequest();//创建对象
httprequest.onreadystatechange=handResponse
httprequest.open(“GET”,url)//open 方法指定http方法和需要请求的url
httprequest.send()向服务器发送请求,可带参数
使用FormData对象发送表单数据
var form =document.getElementById(“fruitform”)
var formData=new FormData(form)
....
httprequest.send(formData)
其对象有一个append方法可以向服务器添加 名称/值 对
Ajax发送JSON数据
Java不止可以发送表单,而且包括javascript的对象表示法(javascript Object Notation,JSON)数据
XMLHttpRequest对象有setRequestHeader方法可以把请求的标头Content-Type设置为application/json
setRequestHeader(“Content-Type”,”application/json ”)
接收JSON数据
Var data =JSON.parse(httprequest.responseText)
Ajax事件
abort在请求被终止时触发
error在请求失败时触发
load在请求完成时触发
loadend在请求已完成时触发,无论成功还是失败
loadstart在请求开始时触发
progress 触发以提示请求的进度
readystatechange在请求生命周期的不同阶段触发
timeout如果请求超时则触发
以上事件大多数会在请求的某一个特定点上触发,Readystatechange与progress事件是个例外,可以多次触发提供进度更新
以上事件除了readystatechange使用常规的Event对象,其他的都是使用ProgressEvent对象,progressEvent 对象定义了Event对象的所有成员,并且还有如下的额外的属性
lengthComputable计算数据流的总长度
loaded返回当前已经载入的数据量
total 返回可用的数据总量
考虑到第二级事件的实现还不到位,readystatechange是目前唯一能可靠追踪请求进度的事件
例如
<div id=”target”> press a button </div>
httprequest.onreadystatechange=handResponse//handResponse为方法名
Function handResponse(e){
If(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
document.getelEmentById(“target”).innerHTML=e.target.responseText
}
}
当onreadystatechange事件被触发后,浏览器会把一个Event对象传给指定的函数,target属性会被设为与此事件关联的XMLHttpRequest
XMLHttpRequest readyState属性的值
|
值 |
数值 |
说明 |
|
UNSEND |
0 |
已创建XMLHttpRequest对象 |
|
OPEND |
1 |
已调用open方法 |
|
HEADERS_RECEIVED |
2 |
已收到服务器响应的表头 |
|
LOADING |
3 |
已收到服务器响应 |
|
DONE |
4 |
响应完成或已失败 |
XMLHttpRequest.responseText属性获得服务器发送的数据
追踪上传进度
可以在数据发送到服务器时追踪它的进度,可以使用 XMLHttpRequest对象的upload属性,调用属性会返回一个可用于监控进度的对象XMLHttpRequestUpload对象,这个对象只定义了注册事件处理器所需的属性比如上面提到的onprogress,onload,
例子
<progress id=”prog” value=”0”/>
var progress=document.getElementById(“prog”)
var httprequest=new XMLHttpRequest();
var httprequest.upload
upload.onprogress=function (e){
progress.max=e.total;
progress.value=e.loaded
}
upload.onload=function(e){
progress.value=1;
progress.max=1;
}
.....
httprequest.send(formData)
事件
上文提及事件的知识有很多,在这里做下补充
Onmouseover事件属性对应全局事件mouseover
事件属性=”javascript语句”当事件被触发,浏览器会执行你提供的javascript语句
例如
<p onmouseover=”this.style.color=”’black’”>.......</p>
This.style属性返回元素的CSSStyleDeclaration对象
使用DOM和事件对象
var elem =document.getElementById(“id”)
elem.onmouseover=handleMouseOver //handleMouseOver 是函数名
Function handleMouseOve(e){...}
处理事件的函数定义一个名为e的参数,他会被设为浏览器所创建的一个Event对象用于在事件触发时代表该事件,这个Event对象向你提供了所发生的事件信息,事件属性以on开头,如onclick
Event对象的常用属性
|
名称 |
说明 |
返回 |
|
type |
事件的名称如mouseover |
字符串 |
|
target |
事件指向的元素 |
HTMLElement |
使用HTML事件
文档和窗口事件
Document对象事件
readystatechange 在readystate属性的值发生改变时触发
Window对象事件
onload在文档或资源加载完触发
......
鼠标事件
click 在点击并释放鼠标时触发
.......
键盘焦点事件
blur/focus/....
键盘事件
keyup在用户释放某个键时触发
....
表单事件
submit 在表单提交时触发
...
在使用事件属性时加on
ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
