Ajax
- 简介
1)异步的JavaScript和XML技术 (Asynchronous JavaScript and XML)
2)Ajax应用:侧重于局部刷新/局部交互
3)XMLHttpRequest对象(内置在浏览器中,是一个JS对象)发送请求,接收响应
4)原理:是多种技术的综合运用
*以XMLHttpRequest对象为核心,实现请求的发送和响应结果的接收
*以JavaScript语言为基础,实现用户操作和响应结果的解析并呈现到页面
*以XML和JSON技术作为数据传输格式
*以HTML,CSS等技术做界面及渲染
5)优点:
*可以实现页面局部刷新,提升系统交互性能
*可以提升用户体验
6)何时使用
一个页面包含很多功能处理,这些功能处理时不离开当前页面,适合采用Ajax局部刷新,异步交互 - 基本使用
1)发送Ajax请求
*创建XMLHttpRequest对象
new XMLHttpRequest() 非IE浏览器 new ActiveObject(“Microsoft.XMLHTTP”) IE浏览器
*open(“get/post”,”url”,true/false) //true表示异步,false表示同步,默认异步
*send(参数):发送请求
get请求参数为null,post请求参数为:key=value&key=value
*若采用post请求 需在open后加如下代码
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
2)服务端处理
*编写Servlet或SpringMVC流程处理
*返回text字符串或JSON格式的数据
3)Ajax回调处理
*onreadystatechange事件:当readyState属性发生改变时触发
*readyState属性:属性值0-4,表示Ajax请求处理的过程,4表示请求处理完毕
*responseText属性:获取服务器返回的信息
*responseXML属性:获取服务器返回的XML信息
*status属性:获取服务器响应的HTTP CODE
4)post请求提交的中文乱码
*request.setCharacterEncoding(“utf-8”);解决服务器端乱码
*response.setContentType(“text/html;charset=utf-8”);解决浏览器端乱码
JSON应用
- JSON简介
1)JavaScript Object Notation JavaScript对象格式,属于js的一种数据类型
2)JSON类型格式如下:
var obj={“key1”:value1,”key2”:value2…}(标准)
var obj={key1:value1,key2:value2…}(有些情况下可使)
3)访问: obj.key1//获取value的值
4)将JSON字符串转换成JSON对象
*使用eval()函数转成JSON类型 eg:obj=eval(“(“+jsonStr+”)”);
*使用JSON.parse()函数转成JSON类型 eg:obj=JSON.parse(jsonStr);
*使用第三方库 eg:json.js/jQuery.js
5)将Java对象转换成JSON字符串
*JSONObject jsonObj=JSONObject.fromObject(c);//利用JSONObject将单个对象转成JSON字符串
*JSONArray jsonObj=JSONArray.fromObject(list);//利用JSONArray将list集合转成JSON字符串
*需要导入的jar包 Servlet:json-lib/SpringMVC:jackson/Struts2:struts2-json-plugin
jQuery对Ajax的支持
- $.ajax():jQuery中发送请求最基本的函数,其中的参数有:
*url:地址
*type:请求类型
*data:请求参数
*async:同步/异步
*dataType:返回结果类型
*success:成功回调函数
*error:失败回调函数 -
.get()/
.post():jQuery中发送get或post请求的函数
*$.get(url,data,successFun,dataType类型) - load();jQuery中发送请求,将返回的结果设置到某个div或者span元素中
*对象.load(url,data)
SpringMVC如何返回JSON结果
- 需导入jackson工具包,该工具包封装了将对象数据转成JSON字符串,并借助于response的out对象输出
- 处理流程
请求–>DispatcherServlet–>HandlerMapping–>Controller(调用Service,DAO)–>返回数据对象(@ResponseBody)–>调用jackson包–>将数据对象转成JSON写出