JAVA互联网架构学习之ajax&Json
2017-08-18 08:37
351 查看
1.AJAX
[1] AJAX简介> 全称: Asynchronous JavaScript And XML
> 异步的JavaScript和XML
> AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
> XML指的是服务器响应的数据的格式。
> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。
[2] 同步和异步
> 同步:
当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
> 异步:
当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。
[3] XMLHttpRequest对象
> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
> 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
> 如何获取XMLHttpRequest对象
- var xhr = new XMLHttpRequest();
[4] 使用步骤
1.创建XMLHttpRequest对象
大部分比较新的浏览器都支持的方式(IE7以上)
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
通用的获取XMLHttpRequest对象的方法:
//写一个获取XHR的方法
window.onload=function(){ var btn=document.getElementById("btn1"); btn.onclick=function(){ //1.创建XMLHttpRequest对象,我们使用这个对象完成AJAX请求 var xhr = new XMLHttpRequest(); //2.通过open方法设置请求参数 // var method="get"; // var url="${pageContext.request.contextPath}/AServlet?name=test1"; var method="post"; var url="${pageContext.request.contextPath}/AServlet"; xhr.open(method,url); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("name=test1"); //4.接收响应信息 xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseText; var div=document.getElementById("div01"); div.innerHTML+=data; } } } }
2.设置请求信息(请求地址,请求方式,请求参数)
xhr.open(请求方式,请求地址);
在发送post请求时,还需要设置一个请求头,如下:
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3.发送请求
xhr.send(请求体);
get请求没有请求体,所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。
4.接收响应信息
//xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 , 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息,做相关操作。
//如果信息为纯文本
xhr.responseText
//如果信息为XML
xhr.responseXML
}
};
readyState状态码:
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
[5] 响应数据的格式
- 响应一个XML
- 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
- 返回 User :username:sunwukong age:18 gender:男
username:sunwukgon,age:18,gender:男
- 我们可以通过一个XML格式来返回一个大量的信息
<user>
<name></name>
<age></age>
<gender></gender>
</user>
- 响应一个JSON对象
2.JSON
[1] JSON简介> JSON全称 JavaScript Object Notation
> 类似于JS中对象的创建的方法
> JSON和XML一样,都是一种表示数据的格式
> 但是JSON比XML的存储和解析性能要高的多,JSON要比XML高个30%左右。
<user>
<name>sunwukong</name>
<age>18</age>
<gender>男</gender>
</user>
{"name":"孙悟空","age":8,"gender":男}
[2] JSON的格式
> JSON字符串不方便阅读,但是传输性能好
> XML方便阅读,但是传输性能差
> JSON的格式和JS对象类型,但是要求属性名必须使用双引号。不能使用单引号,也不能不写引号!
> JSON对象中实际就是一组一组的键值对的结构,
键和值使用:连接,多个键值对之间使用,分开,注意如果是最后一组键值对,则千万不要在加,.
> {
"属性名1":属性值1,
"属性名2":属性值2,
"属性名3":属性值3,
"属性名4":属性值4
}
> JSON运行属性值的类型:
1.字符串
2.数字
3.布尔
4.对象
5.数组
6.null
> 数组:
[属性1,属性2,属性3,属性4]
[3] JS中使用JSON
JSON对象 --> JSON字符串
JSON.stringify(对象)
JSON字符串 --> JSON对象
JSON.parse(JSON字符串)
[4] Java中使用JSON
> 目前Java中用的比较多的JSON解析工具:
json-lib --> 使用麻烦,解析性能最差
Jackson --> 使用较麻烦,解析性能最好
Gson --> 使用简单,解析性能中能
- Gson是谷歌出的一款JSON解析工具,使用简单,且性能较好。 jar包:https://pan.baidu.com/s/1bUndh0
Java对象 --> JSON字符串
JSON字符串 --> Java对象
// Student stu = new Student("张三",12); Gson gson = new Gson(); // String json = gson.toJson(stu); // System.out.println(json); // Student fromJson = gson.fromJson(json, Student.class); // System.out.println(fromJson); //2.把Map转换成JSON字符串 // Map<String,String> map = new HashMap(); // map.put("hobby","篮球"); // map.put("gender", "男"); // String json2 = gson.toJson(map); // System.out.println(json2); // Map<String,String> fromJson = gson.fromJson(json2, Map.class); // System.out.println(fromJson); //3.将List转换为JSON字符串 List<Student> list = new ArrayList<Student>(); list.add(new Student("刘德华", 53)); list.add(new Student("冯小刚",63)); String json3 = gson.toJson(list); System.out.println(json3); List<Map<String,Object>> fromJson = gson.fromJson(json3, List.class); for(Map map:fromJson){ System.out.println(map.get("name")); }
3.通过jQuery实现AJAX
> 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
> post方法不会有缓存的问题,所以我们开发时使用post方法较多。
[1] post()方法
$.post(url, [data], [callback], [type])
参数:
url:发送AJAX的请求地址,字符串。
data:发送给服务器的请求参数,JSON格式。
callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type:响应信息的类型,字符串。一般两个常用值text、json
[2] get()方法
- get方法和post方法使用方式基本一致。
$("#btn01").click(function(){ var url="${pageContext.request.contextPath }/AServlet"; // var json={"name":"nero","sex":"female"}; var input=document.getElementById("ip1").value; var json2={"box":input}; var div1=document.getElementById("div01"); function callback(data){ var c = "<div style=\"clear:both;float:left\">P1-"+data+"</div>" div1.innerHTML+=c; } $.get(url,json2,callback); });
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); System.out.println("请求过来了"); String name = request.getParameter("box"); System.out.println(name); response.getWriter().write(name); }
[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。
JSON JAR包:https://pan.baidu.com/s/1kVkjVpX
相关文章推荐
- JAVA互联网架构学习之cookie&session
- ajax&&json学习笔记
- json学习六——>Java 读写json格式的文件方法详解
- JAVA互联网架构学习之jsp基础
- JAVA互联网架构学习之SpringMVC其三
- Java进阶学习第二十三天——国际化与AJAX、JSON
- java痛苦学习之路[十二]JSON+ajax+Servlet JSON数据转换和传递
- JAVA互联网架构学习之Spring之AOP
- JAVA互联网架构学习之Mybatis
- JAVA互联网架构学习之SpringMVC其一
- Ajax/JavaScript学习随笔:java script Object Notation(JSON)
- JAVA互联网架构学习之批处理与编程性事务
- JAVA互联网架构学习之SpringMVC其四
- JavaScript学习笔记之JSON&Ajax
- JAVA互联网架构学习之JdbcTemplate
- JAVA互联网架构学习之Listener
- 迟到的总结(四)--springmvc的系统学习之文件上传、ajax&json处理
- JAVA互联网架构之Spring学习其一配置bean及工厂
- ajax&&json学习笔记
- JAVA互联网架构学习之EL表达式&JSTL