怎么做简单的企业网站站长字体
305.JSON-什么是JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式
。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式,而且很多语言都提供了对 json 的支持(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。 这样就使得 JSON 成为理想的数据交换格式。
json 是一种轻量级的数据交换格式。
轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。
306.JSON-JSON的定义和访问
json 的定义
json 是由键值对组成
,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
json 的访问
json 本身是一个对象。
json 中的 key 我们可以理解为是对象中的一个属性。
json 中的 key 访问就跟访问对象的属性一样: json 对象.key
json 示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="Expires" content="0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">// json的定义var jsonObj = {"key1":12,"key2":"abc","key3":true,"key4":[11,"arr",false],"key5":{"key5_1" : 551,"key5_2" : "key5_2_value"},"key6":[{"key6_1_1":6611,"key6_1_2":"key6_1_2_value"},{"key6_2_1":6621,"key6_2_2":"key6_2_2_value"}]};alert(typeof(jsonObj));// object json就是一个对象alert(jsonObj.key1); //12alert(jsonObj.key2); // abcalert(jsonObj.key3); // truealert(jsonObj.key4);// 得到数组[11,"arr",false]// json 中 数组值的遍历for(var i = 0; i < jsonObj.key4.length; i++) {alert(jsonObj.key4[i]);}alert(jsonObj.key5.key5_1);//551alert(jsonObj.key5.key5_2);//key5_2_valuealert( jsonObj.key6 );// 得到json数组// 取出来每一个元素都是json对象var jsonItem = jsonObj.key6[0];alert( jsonItem.key6_1_1 ); //6611alert( jsonItem.key6_1_2 ); //key6_1_2_valuealert(jsonObj);// 把json对象转换成为 json字符串var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toStringalert(jsonObjString)// 把json字符串。转换成为json对象var jsonObj2 = JSON.parse(jsonObjString);alert(jsonObj2.key1);// 12alert(jsonObj2.key2);// abc</script></head><body></body>
</html>
307.JSON-JSON在JavaScript中两种常用的转换方法
json 的存在有两种形式
对象
:我们叫它 json 对象,一般我们要操作
json 中的数据的时候使用
字符串
:我们叫它 json 字符串,客户端和服务器之间进行数据交换
的时候使用
JSON.stringify():把 json 对象
转换成为 json 字符串
JSON.parse():把 json 字符串
转换成为 json 对象
// 把json对象转换成为 json字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString
alert(jsonObjString)// 把json字符串。转换成为json对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc
308.JSON-JavaBean和json的相互转换
javaBean和json的互转
import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class JsonTest {@Testpublic void test1(){Person person = new Person(1,"国哥好帅!");// 创建Gson对象实例Gson gson = new Gson();// toJson方法可以把java对象转换成为json字符串String personJsonString = gson.toJson(person);System.out.println(personJsonString);// fromJson把json字符串转换回Java对象// 第一个参数是json字符串// 第二个参数是转换回去的Java对象类型Person person1 = gson.fromJson(personJsonString, Person.class);System.out.println(person1);}
}
Person实体类(Bean)
package com.atguigu.pojo;public class Person {private Integer id;private String name;public Person() {}public Person(Integer id, String name) {this.id = id;this.name = name;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {return "Person{" +"id=" + id +", name='" + name + '\'' +'}';}
}
309.JSON-List集合和json的相互转换
List 和json的互转
@Testpublic void test2() {List<Person> personList = new ArrayList<>();personList.add(new Person(1, "国哥"));personList.add(new Person(2, "康师傅"));Gson gson = new Gson();// 把List转换为json字符串String personListJsonString = gson.toJson(personList);System.out.println(personListJsonString);//json// 把json字符串转换ListList<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());//准确的转化为Person需要PersonListTypeSystem.out.println(list);Person person = list.get(0);System.out.println(person);}
package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.ArrayList;public class PersonListType extends TypeToken<ArrayList<Person>> {
}
310.JSON-Map集合和json的相互转换
map 和json的互转
@Testpublic void test3(){Map<Integer,Person> personMap = new HashMap<>();personMap.put(1, new Person(1, "国哥好帅"));personMap.put(2, new Person(2, "康师傅也好帅"));Gson gson = new Gson();// 把 map 集合转换成为 json字符串String personMapJsonString = gson.toJson(personMap);System.out.println(personMapJsonString);// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());//准确转换需要PersonMapType System.out.println(personMap2);Person p = personMap2.get(1);System.out.println(p);}
package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.HashMap;public class PersonMapType extends TypeToken<HashMap<Integer, Person>> {
}
311.AJAX-什么是AJAX请求
AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 JS 异步发起请求,局部更新页面的技术。
Ajax 请求的局部更新
,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
312.AJAX-原生JavaScript的AJAX请求示例
1、我们首先要创建XMLHttpRequest
2、调用open方法设置请求参数:请求方式、请求地址、true异步false同步
3、在send方法前绑定onreadystatechange事件,处理请求完成后的操作
4、调用send方法发送请求
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="Expires" content="0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">// 在这里使用javaScript语言发起Ajax请求,访问服务器AjaxServlet中javaScriptAjaxfunction ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest var xmlhttprequest = new XMLHttpRequest();
// 2、调用open方法设置请求参数xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。xmlhttprequest.onreadystatechange = function(){if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {//请求成功之后readyState 的值会改变alert("收到服务器返回的数据:" + xmlhttprequest.responseText);var jsonObj = JSON.parse(xmlhttprequest.responseText);// 把响应的数据显示在页面上document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;}}
// 3、调用send方法发送请求xmlhttprequest.send();alert("我是最后一行的代码");}</script></head><body>
<!-- <a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>--><button onclick="ajaxRequest()">ajax request</button><div id="div01"></div><table border="1"><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table></body>
</html>
AjaxServlet
package com.atguigu.servlet;import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class AjaxServlet extends BaseServlet {protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("Ajax请求过来了");Person person = new Person(1, "国哥");try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(" jQueryAjax == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(" jQueryGet == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(" jQueryPost == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(" jQueryGetJSON == 方法调用了");Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(" jQuerySerialize == 方法调用了");System.out.println("用户名:" + req.getParameter("username"));System.out.println("密码:" + req.getParameter("password"));Person person = new Person(1, "国哥");// json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);resp.getWriter().write(personJsonString);}
}
BaseServlet
package com.atguigu.servlet;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 解决post请求中文乱码问题// 一定要在获取请求参数之前调用才有效req.setCharacterEncoding("UTF-8");// 解决响应中文乱码resp.setContentType("text/html; charset=UTF-8");String action = req.getParameter("action");try {// 获取action业务鉴别字符串,获取相应的业务 方法反射对象Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
// System.out.println(method);// 调用目标业务 方法method.invoke(this, req, resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);// 把异常抛给Filter过滤器}}
}
313.AJAX-AJAX请求的特点说明
Ajax 请求的局部更新
,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
同步时,请求没有结束,下面的代码都不能执行。当有好多按钮,只能等一个按钮执行完才能点其它按钮
314.AJAX-jQuery的ajax方法
$.ajax 方法
属性 | 作用 |
---|---|
url | 表示请求的地址 |
type | 表示请求的类型 GET 或 POST 请求 |
data | 表示发送给服务器的数据 |
success | 请求成功,响应的回调函数 |
dataType | 响应的数据类型 |
data格式有两种:
1、name=value&name=value
2、{key:value}
dataType常用的数据类型有:
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象
// ajax请求$("#ajaxBtn").click(function(){$.ajax({url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",//请求地址// data:"action=jQueryAjax",data:{action:"jQueryAjax"},//请求的方法type:"GET",//请求类型success:function (data) {//成功的回调函数// alert("服务器返回的数据是:" + data);// var jsonObj = JSON.parse(data);$("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name);},dataType : "json"//直接用json,不需要自己转了});});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="Expires" content="0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){// ajax请求$("#ajaxBtn").click(function(){$.ajax({url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",// data:"action=jQueryAjax",data:{action:"jQueryAjax"},type:"GET",success:function (data) {// alert("服务器返回的数据是:" + data);// var jsonObj = JSON.parse(data);$("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name);},dataType : "json"});});// ajax--get请求$("#getBtn").click(function(){$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);},"json");});// ajax--post请求$("#postBtn").click(function(){// post请求$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);},"json");});// ajax--getJson请求$("#getJSONBtn").click(function(){$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);});});// ajax请求$("#submit").click(function(){// 把参数序列化$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);});});});</script></head><body><div><button id="ajaxBtn">$.ajax请求</button><button id="getBtn">$.get请求</button><button id="postBtn">$.post请求</button><button id="getJSONBtn">$.getJSON请求</button></div><div id="msg"></div><br/><br/><form id="form01" >用户名:<input name="username" type="text" /><br/>密码:<input name="password" type="password" /><br/>下拉单选:<select name="single"><option value="Single">Single</option><option value="Single2">Single2</option></select><br/>下拉多选:<select name="multiple" multiple="multiple"><option selected="selected" value="Multiple">Multiple</option><option value="Multiple2">Multiple2</option><option selected="selected" value="Multiple3">Multiple3</option></select><br/>复选:<input type="checkbox" name="check" value="check1"/> check1<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>单选:<input type="radio" name="radio" value="radio1" checked="checked"/> radio1<input type="radio" name="radio" value="radio2"/> radio2<br/></form><button id="submit">提交--serialize()</button></body>
</html>
315.AJAX-jQuery的get和post方法
get 方法和post 方法
属性 | 作用 |
---|---|
url | 请求的 url 地址 |
data | 发送的数据 |
callback | 成功的回调函数 |
type | 返回的数据类型 |
// ajax--get请求$("#getBtn").click(function(){$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) { $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);},"json");});// ajax--post请求$("#postBtn").click(function(){// post请求$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);},"json");});
316.AJAX-jQuery的getJSON方法
$.getJSON 方法
属性 | 作用 |
---|---|
url | 请求的 url 地址 |
data | 发送给服务器的数据 |
callback | 成功的回调函数 |
// ajax--getJson请求
$("#getJSONBtn").click(function(){$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);});
});
317.AJAX-jQuery的serialize方法
可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。
// ajax请求
$("#submit").click(function(){// 把参数序列化//可以得到表单form01格式为name=value的参数//$("#form01").serialize()$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);});
});