ajax与json

最新推荐文章于 2024-08-30 11:14:57 发布

Distance-X

最新推荐文章于 2024-08-30 11:14:57 发布

阅读量118

点赞数

分类专栏： Javaweb 文章标签： json

本文链接：https://blog.csdn.net/weixin_43582611/article/details/84928049

版权

Javaweb 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

JSON是什么？

JSON（javascript object notation)是一种轻量级的数据交换格式，相当于一种接口
JSON是用字符串来表示JS对象，例如可以再Servlet中发送一个JSON格式的字符串给客户端JS,JS可以执行这个字符串，得到一个JS对象

JSON对象语法

JSON语法：

数据在名称或者值队中
数据由逗号分割
花括号保存对象
方括号保存数组

var person={"name":"张三","age"：22，”gender":"男"};
alert(person.name+","+person.age+","+person.gender);
注意key也要在双引号中

json值

数字（整数或浮点数）
字符串（必须在双引号中单引号不行）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）

  var person={"name":"zhangsan","age":"20","gender":"nv"，“hobby":["学习","打篮球","睡觉"]};
  //例如hobby习惯 具有多个属性所以封装在数组之中  用方框号表示

带有方法的JSON对象

var person={"name":"张三","getName":function(){
					return this.name;
					}
				};
				alert(person.name);
				alert(person.getName);

JSON与XML比较

可读性：XML比较好一点
解码难度：JSON本身就是JS对象，所以JSON简单许多
流行程度：虽说XML已经流行多年，但是在AJAX中JSON还是比较受欢迎

把JAVA对象转换成JSON对象

使用apache提供的json-lib小工具，它可以方便的把使用Java语言创建json字符串，可以把JavaBean对象转换成字符串
String str="{“name”:“zhangsan”,“age”:“22”,“gender”:“nan”}";
注意Java语言创建json串的时候，将双引号必须转义

json-lib需要依赖的jar包
json-lib的核心jar包有：

json-lib.jar

json-lib的依赖jar包有：

commons-lang.jar
commons-beanutils.jar
commons-logging.jar
commons-collections.jar
ezmorph.jar

代码示例-json1

<script text/javascript>
	window.onload=function(){
	var num="1+2";
	var sum=eval("("+num+")");
	alert(sum);
	};
	</script>

  </head>
  
  <body>
    <h1 id="h1">json的使用</h1>
  </body>

代码示例-json2

<script type="text/javascript">
	function createXMLHttpRequest() {
		try {
			return new XMLHttpRequest(); //改请求适用于大多数浏览器
		} catch (e) {
			return AcativeObject("Msxml2.XMLHTTP"); //适用于IE6.0
			try {
				return ActiveObject("Microsoft.XMLHTTP"); //使用于IE5.0及更早版本

			} catch (e) {
				alert("哥们你有毒把!!");
				throw (e);
			}
		}
	}
	window.onload = function() {
		//获取btn元素
		var btn = document.getElementById("btn");
		btn.onclick = function() { //给点击按钮上注册监听
			//使用ajax得到服务器端响应，把结果显示到h3中
			//1、得到request
			var xmlHttp = createXMLHttpRequest();
			//2、打开连接
			xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
			//3、发送
			xmlHttp.send(null);
			//4、给xmlHttp事件的状态注册监听
			xmlHttp.onreadystatechange = function() {
				//双重判断
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					//获取json串
					var text = xmlHttp.responseText;
					//执行 json串
					var person = eval("(" + text + ")");
					var s = person.name + "," + person.age + "," + person.sex;
					document.getElementById("h3").innerHTML = s;

				}
			};
		};
	};
</script>

</head>
<body>
	<button id="btn">点击这里</button>
	<h1>json之HelloWord</h1>
	<h3 id="h3"></h3>
</body>

package web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//向服务器发送json串  
		//在json串中引号需要转义
		String str="{\"name\":\"张三\",\"age\":20,\"sex\":\"男\"}";
		PrintWriter out = response.getWriter();
		out.println(str);
		System.out.println(str);
		out.flush();
		out.close();
	}	
}

代码示例-json3(自己建一个json-lib工具类)


//创建request对象
function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();//适用于大多数浏览器
	}catch(e){
		try{
			return ActiveObject("Msxml2.XMLHTTP");//使用IE6.0
		}catch(e){
			try{
				return ActiveObject("Microsoft.XMLHTTP");//IE5.0或者更早版本
			}catch(e){
				alert("哥们换个浏览器吧");
				throw(e);
			}
		}
	}
}
/*
 * option对象有以下几个属性
 */
/*请求方式*/method, 
/*请求的url*/ url, 
/*是否异步*/async, 
/*请求体*/params, 
/*回调方法*/callback,
/*服务器响应数据转换成什么类型*/type

  function ajax(option){
	  //得到xmlHttp
	  var xmlHttp=createXMLHttpRequest();
	  //打开连接
	  if(!option.method){  //默认的请求为GET
		  option.method="GET";
	  }
	  if(option.async==undefined){
		  option.async=true;
	  }
	  xmlHttp.open(option.method, option.url, option.async);
	  /**
	   * 判断是否为POST请求
	   */
	  if("POST"==option.method){
		  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencode");
	  }
	  /*
	   * 发送请求
	   */
	  xmlHttp.send(option.params);
	  //给xmlHttp状态注册监听
	  xmlHttp.onreadystatechange=function(){
		  if(xmlHttp.readyState==4&&xmlHttp.status==200){
			  var data;
			  //获取服务器的响应数据进行转换
			  if(!option.type){
				  data=xmlHttp.responseText;  //如果Type没有赋值 那么就默认为文本类型
			  }else if(option.type=="xml"){
				  data=xmlHttp.responseXML;
			  }else if(option.type=="text"){
				  data=xmlHttp.responseText;
			  }else if(option.type=="json"){
				  var text=xmlHttp.responseText;
				  data=eval("("+text+")");
			  }
			  //调用回调方法
			  option.callback(data);
		  }
	  };
  };

引用工具类

//导入自己建立的json-lib工具类
<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"> </script>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById("btn").onclick = function() {
		
			ajax(
			{
				url : "<c:url value='/AServlet'/>",//需要获取的地址
				type : "json",
				callback : function(data) {
					document.getElementById("h3").innerHTML = data.name + "," + data.age + "," + data.sex;
				}
			}
			);
		};
	};
</script>
</head>
<body>
	<button id="btn">请点击这里</button>
	<h1>显示自己封装的ajax小工具0</h1>
	<h3 id="h3"></h3>