Ajax相关总结

电玩女神 2022-06-09 06:26 263阅读 0赞

## [Ajax相关总结][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属性的值

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 数值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> UNSEND &nbsp; </td> 
 <td> 0 </td> 
 <td> 已创建XMLHttpRequest对象 </td> 
 </tr> 
 <tr> 
 <td> OPEND </td> 
 <td> 1 </td> 
 <td> 已调用open方法 </td> 
 </tr> 
 <tr> 
 <td> HEADERS_RECEIVED </td> 
 <td> 2 </td> 
 <td> 已收到服务器响应的表头 </td> 
 </tr> 
 <tr> 
 <td> LOADING </td> 
 <td> 3 </td> 
 <td> 已收到服务器响应 </td> 
 </tr> 
 <tr> 
 <td> DONE </td> 
 <td> 4 </td> 
 <td> 响应完成或已失败 </td> 
 </tr> 
 </tbody> 
</table>

XMLHttpRequest.responseText属性获得服务器发送的数据

**追踪上传进度**

可以在数据发送到服务器时追踪它的进度,可以使用　XMLHttpRequest对象的upload属性,调用属性会返回一个可用于监控进度的对象XMLHttpRequestUpload对象,这个对象只定义了注册事件处理器所需的属性比如上面提到的onprogress,onload,

例子

var progress=document.getElementById(“prog”)

var httprequest=new XMLHttpRequest();

var httprequest.upload

upload.οnprοgress=function (e)\{

progress.max=e.total;

progress.value=e.loaded

upload.οnlοad=function(e)\{

progress.value=1;

progress.max=1;

.....

httprequest.send(formData)

## **事件** ##

上文提及事件的知识有很多,在这里做下补充

Onmouseover事件属性对应全局事件mouseover

事件属性=”javascript语句”当事件被触发,浏览器会执行你提供的javascript语句

例如

.......

This.style属性返回元素的CSSStyleDeclaration对象

**使用DOM和事件对象**

var elem =document.getElementById(“id”)

elem.οnmοuseοver=handleMouseOver //handleMouseOver 是函数名

Function handleMouseOve(e)\{...\}

处理事件的函数定义一个名为e的参数,他会被设为浏览器所创建的一个Event对象用于在事件触发时代表该事件,这个Event对象向你提供了所发生的事件信息,事件属性以on开头,如onclick

Event对象的常用属性

<table> 
 <tbody> 
 <tr> 
 <td> 名称 </td> 
 <td> 说明 </td> 
 <td> 返回 </td> 
 </tr> 
 <tr> 
 <td> type </td> 
 <td> 事件的名称如mouseover </td> 
 <td> 字符串 </td> 
 </tr> 
 <tr> 
 <td> target </td> 
 <td> 事件指向的元素 </td> 
 <td> HTMLElement </td> 
 </tr> 
 </tbody> 
</table>

**使用HTML事件**

**文档和窗口事件**

Document对象事件

readystatechange 在readystate属性的值发生改变时触发

Window对象事件

onload在文档或资源加载完触发

......

鼠标事件

click 在点击并释放鼠标时触发

.......

键盘焦点事件

blur/focus/....