AJAX和JSON使用

JSON

什么是JSON

JSON (JavaScript Object Notation)是(与xml对比)一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它 基于JavaScript Programing Language, Standard ECMA -262 3rd Edition - December 1999 的一个子集。JSON 采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C, C++，C#,Java,JavaScript, Perl, Python 等)。这些特性 使JSON成为理想的数据交换语言。

JSON格式

{key:value,key:value}
value的类型

• 基本类型（字符串、数字、布尔值）
• 数组 {lastName:”李四”,books:[“西游记”,”红楼梦”,{}]}
• 对象 {}

1
2
3
4
5
6

{
    "lastname":"张三",
    "age":19,
    "car":{"pp":"宝马","price":"10000$"},
    "books":["西游记","红楼梦"]
}

浏览器处理方便，js解析方便
JSON：js进行传输，(HTTP只能传输文本)
js定义对象加不加双引号都可以
JSON是利于传输的数据
js中将对象转为JSON ：

1

JSON.stringify(student)

JSON转js对象：

1

JSON.parse(str)

AJAX

AJAX ( Asynchronous Javascript And XML (景步JavaScrietXML) ) :

• AJAX：是一种无刚新页面与服务器的交互技术: (页面不剧新顿可以收到服务器响应的数据)

原来的交互

1. 发送请求
2. 服务器收到请求。调用对应的Servlet进行处理; servlet处理完感会有响应信息生成;
3. 浏览器收到了服务器响应的数据，把之前的数据页面的清除，展示新的数据（效果是页面刷新）

现在的交互: ( XmlHttpRequest对象)

1. XMLHttpRequest对象帮我们发送请求
2. 服务器收到请求。调用对应的servlet进行处理; servlet处理完成会有响应信息成;
3. XMLHttpRequest对象收数据;(浏览器就感受不到这个数据；xmlhttprequest对象收到这个数据)

上面两种交互图解

XHR原生编程

XMLHttpRequest对象 所有现代浏览器均支持XMLHttpRequest对象

• xhr原生编程:

  1 2 3 4 5 6 7 8 9 10

  var xhr=new XMLHttpRequest0;//创建xhr对象; xhr.open("GET","test1.txt",true);//建立连接 xhr.send() //发送数据 //监听xhr的状态 xhr.onreadystatechange=function() if (xhr.readyState==4 && xhr.status= =200) { //获取数据 document.getElementByld("myDiv").innerHTML =xhr.responseText; }

改变了我们传统的交互方式;

1. 发请求;
2. 服务器收到请求,处理请求经常要给页面携带数据。reguestsettribute(“map”map);转发到页面
3. 浏览器收到页面数据,在页面使用e!表达式获取数据;
   导致页面整个刷新;造成很大的服务器负担;

只让服务器返回我们需要的部分数据即可;不用返回整个页面; xhr营代浏览器来接受响应发送请求;利用dom增删改的方式来改变页面效果;

异步：不会堵塞服务器
同步：浏览器在接收请求后继续执行，也就是会堵塞到数据返回

什么是ajax :
xhr对象向服务器发送请求,并收到响应数据,利用dom增删改的方式改变页面效果

JQuery-AJAX

1. $.get()

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   // $get(url,[data],[callback],[type])函数说明 // data 传递的数据，可以是k=b&k=v 也可以是js对象 // callback ，定义一个回调函数，随便定义一个参数，这个参数就封装了服务器的返回数据 // type:返回内容格式，xml, html, script, json, text, _default。 //type指定为json，jquery自动转换为json $.get("${ctp}/getinfo","key=value",function(d){ alert(d); }) //点击事件如不想更新整个页面，就直接在点击后function中返回false $("#btn").click(function(){ return false })

• 服务器可以使用gson工具生成json字符串给浏览器

  1 2 3 4 5 6 7 8 9

  //使用前需要导包，包下载路径 //https://lyhcc.github.io/resourses/files/gson-2.2.4.jar Map<String, Object>map = new HashMap<>(); map.put("lastname", "admin"); map.put("age", 10); //解析 Gson gson = new Gson(); response.getWriter().write(gson.toJson(map));

1. $.post()

2. $.ajax(默认异步请求)

   1 2 3 4 5 6 7 8 9 10 11 12

   $.ajax({ type: "POST", async: false, url: "getinfo", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }, error: function(xhr, textStatus){ //xhr XMLHttpRequest } });

国际化、文件上传与下载

国际化

国际化：根据Locale代表的区域信息可以进行国际化

1. 得到需要的国际化区域信息：locale cn = Locale.CHINA
2. 需要使用ResourceBundle绑定写好的国际化资源文件(基础名_语言代码_国家代码.properties)

   1	ResourceBundle bundle = ResoourceBundle.getBundle("bookstore", cn)

3. 从bundle中获取配置文件中的值

   1	String ussername = bundle.getString("username");

4. 更多的国际化功能

   1 2 3 4 5 6 7 8

   java.lang.Object java.text.Format All Implemented Interfaces: Serializable, Cloneable Direct Known Subclasses: DateFormat MessageFormat, NumberFormat Q

   两种方式进行国际化

5. 根据浏览器的请求头带来的信息国际化页面

   1 2 3 4 5

   Locale locale = request.getLocale(); `` 2. 点击超链接切换国际化 - 超链接上戴上区域信息；Locale就根据带上的区域信息来new - 推荐国际化取值，格式化日期

       <fmt:message key="k">
   1
   2
   3
   4
   ### 文件上传下载
   
   #### 上传
   1. 上传准备：
   
   <form method="post" entype="multipart/from-data">

   1 2 3 4 5

   2. 文件上传请求体，多部件形式 3. 需要导包处理 #### 下载 >把文件交给浏览器，一定告诉浏览器，这个流不要打开请下载

   response.setHeader(“Content-Disposition”, “attachment;filename=img.png”)

要求

• Jquery(精通)
• XML了解
• Tomcat(掌握)
• Servlet(掌握思想)
• JSP/JSTL/EL(熟悉)
• HTML/CSS/JS(掌握)
• Session、Cookie(掌握)
• Filter(掌握)
• Listener(掌握ServletContext)
• AJAX和JSON(精通)
• 国际化和文件上传(了解)