版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
JavaWeb开发从入门到实践JavaWebDevelopmentFromIntroductiontoPracticeAjax、jQuery和JSON技术Chap10提纲Ajax、jQuery和JSON技术Ajax是一种通过异步方式与服务器交换数据并更新页面的技术，jQuery是一个简化JavaScript操作的库，提供了便捷的DOM操作和事件处理，JSON是一种轻量级的数据交换格式，常用于客户端与服务器之间传输结构化数据。10.1Ajax技术10.2jQuery技术10.3JSON技术10.4本章小结10.1Ajax技术10.1.1Ajax简介10.1.2XMLHttpRequest对象的应用10.1.3应用案例：模拟用户名验证10.1.4应用案例：模拟百度搜索功能10.1.1Ajax简介什么是AjaxAjax（AsynchronousJavaScriptandXML，异步JavaScript和XML）是一种用JavaScript语言与服务器进行异步交互的网页开发技术，与服务器进行交换数据时，无需刷新整个页面。Ajax的核心概念（1）异步数据处理。Ajax使用异步方式与服务器进行通信，服务器响应过程中，客户端可以继续处理其他任务，大大提高了用户体验和网站的响应速度。（2）更新部分数据。Ajax只需要刷新部分需要的数据，不需要刷新整个页面。（3）使用JavaScript实现。Ajax依赖JavaScript，使用XMLHttpRequest对象实现异步通信，通过DOM操作更新页面局部内容。（4）使用CSS和HTML呈现。10.1.1Ajax简介普通交互与Ajax交互方式的区别10.1.1Ajax简介普通交互与Ajax交互方式的区别10.1.1Ajax简介Ajax的工作流程图
10-2
Ajax的工作流程10.1.1Ajax简介Ajax的工作流程（1）浏览器客户端触发一个Ajax事件，例如，onblur、onclick等。（2）创建XMLHttpRequest对象，调用open()方法，设置URL和请求方式。（3）向服务器发出请求。通过调用send()方法发送数据到服务器。（4）服务器访问数据库等。（5）服务器响应数据到浏览器。服务器响应了数据，XMLHttpRequest对象会触发onreadystatechange事件。（6）调用回调函数，该函数不是立即执行，而是等待服务器响应数据后在客户端完成相关操作。10.1.2XMLHttpRequest对象的应用XMLHttpRequest对象的创建functioncreateXMLHttp(){
varxmlhttp;
if(window.XMLHttpRequest){//适合IE7+、Firefox、Chrome、Opera、Safari浏览器
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//适合IE5、IE6浏览器
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
returnxmlhttp;
}10.1.2XMLHttpRequest对象的应用XMLHttpRequest对象的属性表
10-1XMLHttpRequest对象的属性及其描述属性描述onreadystatechange状态改变时会触发这个事件处理器readyState对象状态值，例如，常用的4表示数据接收完毕status服务器的HTTP状态码，比如，200表示已就绪statusTextHTTP状态码的相应文本responseText服务器的响应，通常为一个字符串responseXML服务器的响应，通常为一个XML10.1.2XMLHttpRequest对象的应用XMLHttpRequest对象的属性详细说明（1）onreadystatechange属性。该属性是readyState属性值改变时的事件触发器，通常会调用一个函数。xmlhttp.onreadystatechange=function(){//回调函数}（2）readyState属性。readyState有五种就绪状态。状态值描述0请求未初始化1请求已经建立，但是还没有发送，尚未调用send()方法2请求已发送，正在处理中，已调用send()方法3请求在处理中，响应中已有部分数据，但是服务器还没有完成响应的生成4响应已完成。此时可以通过responseText或者responseXML获取响应数据，开发中常用该值进行判断表10-2
readyState的五种就绪状态10.1.2XMLHttpRequest对象的应用XMLHttpRequest对象的属性详细说明（3）status属性。status属性代表当前HTTP请求的状态。表10-3
status的常用状态值状态值描述常用状态值1xx信息提示100：初始的请求已经接受，客户端可以继续发送请求的其余部分2xx成功200：一切正常3xx重定向300：针对请求，服务器根据请求者选择一项操作，或提供操作列表供请求者选择4xx客户端错误404：无法找到指定位置的资源。5xx服务器端错误500：服务器内部错误，不能完成客户的请求10.1.2XMLHttpRequest对象的应用XMLHttpRequest对象的属性详细说明（4）responseText属性。通过该值可以获取服务器响应的文本数据。//如果服务器响应已完成，并且就绪，那么通过responseText属性获取服务器响应的文本if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText;
alert(responseText);}10.1.2XMLHttpRequest对象的应用Ajax向服务器发送请求（1）GET请求varurl="服务器资源的URL";xmlhttp.open("GET",url,true);xmlhttp.send();varurl="ajaxServlet?username=charles&password=123456";xmlhttp.open("GET",url,true);
xmlhttp.send();在上述代码中，第一行url中“？”前面的ajaxServlet表示请求路径，“？”后面的username和password表示请求的参数。10.1.2XMLHttpRequest对象的应用POST请求POST请求方式，需要添加请求头，传递给服务器的数据作为send()方法的参数varurl="ajaxServlet";
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username=charles&password=123456");Ajax获得服务器响应可以使用XMLHttpRequest对象的responseText或responseXML属性获得服务器响应数据varresponseText=xmlhttp.responseText;10.1.2XMLHttpRequest对象的应用xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText; }}onreadystatechange属性指定每次状态改变所触发事件的事件处理函数。Ajax获得服务器响应数据一般放在该事件处理函数中。10.1.3应用案例：模拟用户名验证页面文本框输入用户名，使用Ajax技术模拟验证用户名是否存在，本示例使用POST方式提交，与GET方式不同之处已经加粗标出。<head> <title>验证用户名</title><script>
functioncreateXMLHttp(){
varxmlhttp;
if(window.XMLHttpRequest){//适合IE7+、Firefox、Chrome、Opera、Safari浏览器
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//适合IE5、IE6浏览器
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
returnxmlhttp;
}
应用案例：模拟用户名验证创建一个JSP页面checkUser.jsp10.1.3应用案例：模拟用户名验证 functioncheckUser(){
varxmlhttp=createXMLHttp();
varusername=document.getElementById("username").value;
varurl="CheckUserServlet";//发送请求的地址
xmlhttp.open("POST",url,true);//请求方式为POST //设置请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("username="+username+"&tmp="+Math.random());//发送数据
xmlhttp.onreadystatechange=function(){//回调函数
if(xmlhttp.readyState==4&&xmlhttp.status==200){
varresponseText=xmlhttp.responseText;//获取服务器返回文本
if(responseText.trim()=="exists"){//trim()方法用于去掉左右空格
alert("用户名已存在");
}else{
alert("可以注册");
}
} }
}
</script>
10.1.3应用案例：模拟用户名验证</head><body>
用户名：<inputtype="text"id="username"onblur="checkUser()"/>
</body>如果使用GET方式提交，只需将加粗部分代码进行修改，修改后的代码，如下所示。varurl="CheckUserServlet?username="+username+"&tmp="+Math.random();xmlhttp.open("GET",url,true);
xmlhttp.send();10.1.3应用案例：模拟用户名验证@WebServlet("/CheckUserServlet")publicclassCheckUserServletextendsHttpServlet{ @Override protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{ resp.setContentType("text/html;charset=UTF-8"); PrintWriterout=resp.getWriter(); Stringusername=req.getParameter("username");//获取客户端浏览器发送的用户名 if("charles".equals(username)){//用户名为“charles”表示该用户名已存在 out.println("exists"); }else{ out.println("notexists"); } out.flush(); out.close(); }
创建Serlvet10.1.3应用案例：模拟用户名验证浏览器地址栏输入“http://localhost:8080/ajaxjQueryPro/checkUser.jsp”，在文本框输入“charles”时，弹出警告框显示“用户名已存在”，表示“Ajax技术验证用户名是否存在”已成功。10.1.4应用案例：模拟百度搜索功能文本框输入一座城市的名称，然后通过Ajax技术显示城市的描述信息。XML文件XML（ExtensibleMarkupLanguage，可扩展标记语言）是一种允许用户对自己的标记语言进行定义的源语言。XML是一种与HTML非常相似的标记语言，常用于存储和传输数据。<?xmlversion="1.0"encoding="UTF-8"standalone="no"?>
<根标签> <子标签>数据</子标签> <子标签>数据</子标签></根标签>10.1.4应用案例：模拟百度搜索功能应用案例实现步骤1、编写Servlet@WebServlet("/BaiduSearchServlet")
publicclassBaiduSearchServletextendsHttpServlet{
@Override
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{//获取城市名称
Stringkeywords=req.getParameter("keywords");
//构建城市数据
List<City>cities=newArrayList<City>();
cities.add(newCity(1,"湖南长沙","国务院批复确定的长江中游地区重要的中心城市、长株潭都市圈成员城市"));cities.add(newCity(2,"湖南岳阳","位于湖南省东北部，北枕长江，南纳三湘四水，怀抱洞庭，江湖交汇"));cities.add(newCity(3,"广东深圳","国务院批复确定的经济特区、全国性经济中心城市和国家创新型城市"));cities.add(newCity(4,"浙江宁波","国家历史文化名城，距今4200年的夏朝堇子国，被认为是宁波作为“邑城”的最早起源"));//将城市数据拼接成XML格式
StringBuffersb=newStringBuffer();
10.1.4应用案例：模拟百度搜索功能sb.append("<cities>");
for(Citycity:cities){
Stringname=city.getName(); //模糊匹配（关键字非空，并且是一座城市名称的一部分内容）
if(keywords!=""&&name.contains(keywords)){
Stringdescribe=city.getDescribe();
sb.append("<city>");
sb.append("<name>"+name+"</name>");
sb.append("<describe>"+describe+"</describe>");
sb.append("</city>");
}
}
sb.append("</cities>");
resp.setContentType("text/xml;charset=utf-8");//设置响应格式为text/xml
PrintWriterout=resp.getWriter();
out.print(sb.toString());
out.flush();
out.close();
}
}10.1.4应用案例：模拟百度搜索功能<script>//省略createXMLHttp()函数functionsearch(element){ xmlhttp=createXMLHttp(); varkeywords=element.value;//获取输入的关键字 varurl="BaiduSearchServlet?keywords="+keywords+"&tmp="+Math.random(); xmlhttp.open("GET",url,true); xmlhttp.send(); xmlhttp.onreadystatechange=callback; } //回调函数 functioncallback(){ if(xmlhttp.readyState==4&& xmlhttp.status==200){ varxml=xmlhttp.responseXML; //获取服务器响应的XML文件中的city标签 varcities=xml.getElementsByTagName("city");
2、编写网页10.1.4应用案例：模拟百度搜索功能
//获取页面中ul标签，用来显示城市名称和城市描述信息 varul=document.getElementsByTagName("ul")[0]; varlen=ul.childNodes.length;
//删除ul下所有的li标签 for(vari=0;i<len;i++){ varli=ul.childNodes[0]; li.parentNode.removeChild(li);//移除li标签 } //向ul中添加li标签 for(vari=0;i<cities.length;i++){ varcname=cities[i].childNodes[0].firstChild.nodeValue; varcdescribe=cities[i].childNodes[1].firstChild.nodeValue; varli=document.createElement("li");//创建li标签 li.innerHTML=cname+":"+cdescribe; ul.appendChild(li);//ul标签中追加li标签 } } }</script>10.1.4应用案例：模拟百度搜索功能 <body> <divid="container"> <imgsrc="img/baidu.png"class="img"><br/> <inputtype="text"id="keywords"class="keywords"onkeyup="search(this)"/> <ul></ul> </div> </body>启动服务器图
10-4
模拟百度搜索10.2jQuery技术10.2.1jQuery简介10.2.2jQuery选择器10.2.3jQuery事件10.2.4jQuery常用方法10.2.5使用jQuery实现Ajax请求10.2.1jQuery简介jQuery是一个快速、简洁的JavaScript框架。它于2006年1月由JohnResig(约翰·莱西格)发布，设计的宗旨是“WriteLess,DoMore”，即倡导写更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。jQuery核心特性包括独特的链式语法和短小清晰的多功能接口，高效灵活的CSS选择器，以及可对CSS选择器进行扩展。jQuery还拥有便捷的插件扩展机制和丰富的插件。jQuery简化JavaScript和Ajax编程，能够使开发人员从设计和书写繁杂的JavaScript应用中解脱出来。10.2.2jQuery选择器jQuery选择器是jQuery的核心功能之一，通过选择器使我们更方便地获取页面中的元素。jQuery选取HTML元素$(selector).action()jQuery核心函数$()$(selector,[context])查找所有li标签，而且这些li标签是div的子标签$(“div>li”);10.2.2jQuery选择器基本选择器表
10-4基本选择器的名称、描述、返回值和示例选择器名称描述返回值示例#idID选择器根据给定的ID匹配一个元素单个元素$(“#my”)选取id为my的元素.class类选择器根据给定的类名匹配元素元素集合$(“.my”)选取class为my的所有元素element标签选择器根据给定的标签匹配元素元素集合$(“p”)选取所有的p元素*全局选择器匹配所有元素元素集合$(“*”)选择所有元素selector1,...selectorN并集选择器将每一个选择器匹配到的元素合并后一起返回元素集合$(“div,p,.my”)选取所有div、p标签、class为my的一组元素element.classelement#id交集选择器匹配指定class或id的元素或元素集合单个元素或元素集合$(“div#container”)选取id为container的div元素10.2.2jQuery选择器层次选择器表
10-5层次选择器的名称、描述、返回值和示例选择器名称描述返回值示例$(“ancestordescendant”)后代选择器选取给定祖先元素下匹配所有的后代元素元素集合$(“divp”)选取div元素里所有的p元素$(“parent>child”)子选择器选取给定的父元素下匹配所有的子元素元素集合$(“div>p”)选取div元素下元素名为p的子元素$(“prev+next”)相邻选择器选取紧接在prev元素后的next元素元素集合$(“div+p”)选取div元素的下一个p元素$(“prev~siblings”)同辈选择器选取prev元素后的所有同辈元素元素集合$(“div~p”)选取div元素之后的所有同辈p元素10.2.2jQuery选择器属性选择器表
10-6属性选择器的描述、返回值和示例选择器描述返回值示例[attribute]选取拥有此属性的元素元素集合$(“div[id]”)选取拥有属性id的div元素[attribute=value]选取属性值为value的元素元素集合$(“div[id=’container’]”)选取id为container的div元素[attribute!=value]选取属性值不等于value的元素元素集合$(“div[id!=’container’]”)选取id不等于container的div元素[attribute^=value]选取属性值以value开始的元素元素集合$(“div[id^=’hi’]”)选取id以“hi”开始的div元素[attribute$=value]选取属性值以value结束的元素元素集合$(“div[id$=’hi’]”)选取id以“hi”结束的div元素10.2.2jQuery选择器过滤选择器表
10-7基本过滤选择器的描述、返回值和示例选择器描述返回值示例:first选取第一个元素单个元素$(“li:first”)选取所有li元素中第一个:last选取最后一个元素单个元素$(“li:last”)选取所有li元素中最后一个:even选取索引是偶数的所有元素，索引从0开始元素集合$(“li:even”)选取索引是偶数的li元素:odd选取索引是奇数的所有元素，索引从0开始元素集合$(“li:odd”)选取索引是奇数的li元素:eq(index)选取指定索引值的元素单个元素$(“li:eq(1)”)选取索引为1的li元素:gt(index)选取所有大于指定索引值的元素元素集合$(“li:gt(1)”)选取索引大于1的li元素:lt(index)选取所有小于指定索引值的元素元素集合$(“li:lt(1)”)选取索引小于1的li元素（1）基本过滤选择器10.2.2jQuery选择器表
10-8内容过滤选择器的描述、返回值和示例（2）内容过滤选择器选择器描述返回值示例:contains(text)选取所有文本内容为text的元素元素集合$(“div:contains(‘中国’)”)选取含有文本“中国”的div元素:empty选取不包含子元素或文本的空元素元素集合$(“div:empty”)选取不包含任何元素和内容的div元素:has(selector)选取含有选择器所匹配的元素的元素元素集合$(“div:has(p)”)选取含有p元素的div元素:parent选取含有子元素或文本的元素元素集合$(“div:parent”)选取拥有子元素或文本的div元素10.2.2jQuery选择器表
10-9可见性过滤选择器的描述、返回值和示例（3）可见性过滤选择器选择器描述返回值示例:hidden选取所有不可见的元素元素集合$(“:hidden”)选取所有不可见的元素，例如，<inputtype=”hidden”>、<spanstyle=”display:none”>、<divstyle=”visibility:hidden”/>等元素:visible选取所有可见的元素元素集合$(“#myidspan:visible”)选取id为myid的标签内所有可见的span标签10.2.2jQuery选择器表
10-10子元素过滤选择器的描述、返回值和示例（4）子元素过滤选择器选择器描述返回值示例:first-child选取每一个父元素的第一个子元素元素集合$(“ulli:first-child”)选取每一个ul中第一个li元素:last-child选取每一个父元素的最后一个子元素元素集合$(“ulli:last-child”)选取每一个ul中最后一个li元素:only-child选取一个元素，这个元素的父元素只有唯一的子元素（这个子元素就是选取的元素）元素集合$(“ulli:only-child”)选取每一个ul中只有唯一一个li元素:nth-child(index/odd/even)选取每个父元素下的第index个子元素/奇/偶元素，下标从1开始元素集合$(“ulli:nth(2)”)选取每一个ul中下标为2的li元素10.2.2jQuery选择器表
10-11表单过滤选择器的描述和返回值（5）表单过滤选择器选择器描述返回值:input选取所有的<input>、<select>、<textarea>和<button>元素集合:text选取所有的文本框元素集合:password选取所有的密码框元素集合:checkbox选取所有的多选框元素集合:radio选取所有的单选框元素集合:submit选取所有的提交按钮元素集合:reset选取所有的重置按钮元素集合:button选取所有的按钮元素集合10.2.2jQuery选择器表
10-12表单对象属性过滤选择器的描述和返回值（6）表单对象属性过滤选择器选择器描述返回值:enabled选取所有属性为可用的表单元素元素集合:disabled选取所有属性为不可用的表单元素元素集合:checked选取所有被选中的表单元素元素集合:selected选取所有被选中的option表单元素元素集合10.2.3jQuery事件jQuery事件是对JavaScript事件的封装$(document).ready(function(){
//页面加载完成后执行的代码
$("p.china").css("color","red");//类名为china的p标签设置字体颜色为红色
})jQuery事件方法（1）鼠标事件表
10-13鼠标常用事件的描述和执行时机方法描述执行时机click(fn)触发或将函数绑定到指定元素的click事件单击鼠标时dblclick(fn)触发或将函数绑定到指定元素的dblclick事件双击鼠标时mouseover(fn）触发或将函数绑定到指定元素的mouseover事件鼠标移过时mouseout(fn）触发或将函数绑定到指定元素的mouseout事件鼠标移出时10.2.3jQuery事件（2）键盘事件
表
10-14键盘常用事件的描述和执行时机方法描述执行时机keypress(fn)触发或将函数绑定到指定元素的keypress事件产生可打印字符时keydown(fn)触发或将函数绑定到指定元素的keydown事件按下键盘时keyup(fn)触发或将函数绑定到指定元素的keyup事件释放按键时（3）表单事件表
10-15表单常用事件的描述和执行时机方法描述执行时机focus(fn)触发或将函数绑定到指定元素的focus事件获得焦点blur(fn)触发或将函数绑定到指定元素的blur事件失去焦点submit(fn)触发或将函数绑定到指定元素的submit事件提交表单时10.2.3jQuery事件2、jQuery事件的绑定$(selector).on(events,[selector],fn)events：一个或者多个用空格分隔的事件类型，例如，“click”、“blur”。selector：元素的子元素选择器，可以省略。fn：回调函数。10.2.3jQuery事件应用案例：div标签样式完成本案例，div标签需要绑定mouseover、mouseout事件10.2.3jQuery事件<title>mouseover、mouseout事件的使用</title>
<styletype="text/css">
.current{
color:red;
}
</style>
<scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").on({
mouseover:function(){
$(this).addClass("current");
},
mouseout:function(){
$(this).removeClass("current");
}
})
})
</script>addClass()方法的作用是向被选中元素添加一个或多个类。该方法不会移除已存在的class属性removeClass()方法的作用是移除class属性10.2.3jQuery事件<title>优化mouseover、mouseout事件</title> <styletype="text/css"> .current{ color:red; }</style><scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script><script>
$(document).ready(function(){
$("div").on("mouseovermouseout",function(){
$(this).toggleClass("current");
})
})</script>优化代码10.2.4jQuery常用方法表
10-16jQuery常用方法方法描述html()获取或设置元素内容（包括HTML标记），等价于JavaScript中的innerHTML属性text()获取或设置元素文本内容，等价于JavaScript的innerText属性val()获取或设置表单元素的值，等价于JavaScript的value属性attr()获取或设置标签的属性值hide()隐藏元素removeAttr()移除标签的属性prop()针对selected、checked、disabled等表单元素的属性，直接操作的就是布尔值；语法：$(selector).prop(‘属性名’,值)，例如，$("p.china").prop("style","text-decoration:underline")css()用于获取和设置CSS属性值，设置CSS的语法：$(selector).css(name,value)10.2.5使用jQuery实现Ajax请求jQuery提供了$.ajax()、$.get()、$.post()等方法实现Ajax请求。Ajax的dataType选项设置预期服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包中的MIME信息返回responseXML或responseText，并作为回调函数参数传递表
10-17dataType选项的值选项的值描述json服务器返回JSON数据，例如，{"username":"charles","gender":"男","age":18}xml服务器返回XML文档html返回纯文本HTML信息text返回纯文本字符串script返回纯文本JavaScript代码。不会自动缓存结果，除非设置了“cache”参数jsonp返回JSONP格式10.2.5使用jQuery实现Ajax请求jQuery实现Ajax请求：实现用户名的验证jQuery的安装图
10-5
jQuery下载页面10.2.5使用jQuery实现Ajax请求jQuery的安装
页面引入jQuery<scripttype="text/javascript"src="js/jQuery-3.7.1.min.js"></script>10.2.5使用jQuery实现Ajax请求<script>
$(document).ready(function(){//加载事件
$("#username").blur(function(){//文本框失去焦点时触发的函数
varusername=document.getElementById("username").value;//获取用户名
$.ajax({url:"CheckUserServlet",//发送请求的地址
type:"POST",//请求方式，默认为GET
data:{"username":username},//发送给服务器的数据
dataType:'text',//如果不设置datType，则默认当成字符串处理。jQuery实现Ajax请求10.2.5使用jQuery实现Ajax请求//请求成功后调用的回调函数，参数data为服务器返回的数据
success:function(data){ alert(data);},//请求失败后调用的函数
error:function(){ alert("无法连接到服务器或者处理错误");} }) })})
</script>
用户名：<inputtype="text"id="username"onblur="checkUser()"/>10.2.5使用jQuery实现Ajax请求jQuery的get()方法的使用$("#username").blur(function(){
varusername=document.getElementById("username").value;
$.get("CheckUserServlet",{"username":username},function(data){//使用GET方式发送请求
alert(data);
},"text");
})10.3JSON技术10.3.1JSON简介10.3.2JSON基础语法和常用方法10.3.3应用案例：使用jQueryAjax获取JSON数据10.3.1JSON简介JSON（JavaScriptObjectNotation,JS对象标记法）是一种轻量级的数据交换格式。它基于ECMAScript（EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON是通过JavaScript对象标记法书写的文本，是Ajax发送和接收数据的一种格式。10.3.2JSON基础语法和常用方法JSON语法var变量名=‘{“key1”:value1,“key2”:value2}’;对象形式JSON示例varuser={"id":1,"name":"Charles","gender":"male","age":30}10.3.2JSON基础语法和常用方法数组形式JSON示例varusers=[ { "id":1,"name":"Charles","gender":"male","age":30},{"id":2,"name":"Jack","gender":"male","age":20}
];10.3.2JSON基础语法和常用方法JSON语法规则如下：（1）数组使用方括号“[]”表示，每个数组由多个值组成，值之间用“，”号分隔，数组可以包含多个对象或者其他数组。（2）对象使用大括号“{}”表示，每个对象由多个键值对组成，键值对之间用“，”分隔，对象之间也是用“，”号分隔。（3）JSON数据是由键值对组成的。每个键值对包含一个键和一个值，键和值之间使用冒号“：”隔开。（4）名称使用双引号，值支持字符串（双引号中）、数值（整数或浮点数）、布尔值（true或false）、对象（花括号中）、数组（方括号中）和null六种数据类型。（5）并列的数据之间使用逗号“，”分隔。（6）使用“\”转义字符。10.3.2JSON基础语法和常用方法JSON常用方法JS对象转为JSON字符串varjsonStr=JSON.stringify(user);JSON字符串转为JS对象varjsObject=JSON.parse(jsonStr);10.3.3应用案例：使用jQueryAjax获取JSON数据具体步骤（1）导入gson-2.10.1.jar包。Java转化为JSON字符串示例Gsongson=newGson();
out.println(gson.toJson(对象));//将对象转化为JSON字符串，并响应到客户端10.3.3应用案例：使用jQueryAjax获取JSON数据（2）在“WEB-INF/config”目录下创建student.xml文件<?xmlversion="1.0"encoding="UTF-8"standalone="no"?>
<students>
<studentid="1">
<name>kitty</name>
<email>kitty@</email>
</student>
<studentid="2">
<name>ross</name>
<email>ross@126.com</email>
</student>
<studentid="3">
<name>jack</name>
<email>jack@126.com</email>
</student>
</students>10.3.3应用案例：使用jQueryAjax获取JSON数据（3）在包“com.swxy.pojo”下创建实体类StudentpublicclassStudent{ privateintsid; privateStringname; privateStringemail; publicStudent(){} publicStudent(intsid,Stringname,Stringemail){ super(); this.sid=sid; =name; this.email=email; }//省略get和set方法}10.3.3应用案例：使用jQueryAjax获取JSON数据（4）在包“com.swxy.dao”下创建XMLDao，用于读取XML文件publicXMLDao(Stringpath){
this.path=path;
}
privateStringpath;//XML文件的目录
10.3.3应用案例：使用jQueryAjax获取JSON数据//查询所有学生
publicList<Student>query()throwsParserConfigurationException,SAXException,IOException{
List<Student>stus=newArrayList<Student>();
Documentdoc=this.readXML();
NodeListnodes=doc.getElementsByTagName("student");//获取所有student节点
for(inti=0;i<nodes.getLength();i++){//遍历所有student节点
Elementele=(Element)nodes.item(i);//获取学生节点
Stringid=ele.getAttribute("id");//获取学号
ElementnameEle=(Element)ele.getElementsByTagName("name").item(0);
ElementemailEle=(Element)ele.getElementsByTagName("email").item(0);
Stringname=nameEle.getTextContent();//获取姓名
Stringemail=emailEle.getTextContent();//获取email
Studentstudent=newStudent(Integer.parseInt(id),name,email);//构建学生对象
stus.add(student);//学生对象添加到集合中
}
returnstus;
}
10.3.3应用案例：使用jQueryAjax获取JSON数据//读取xml文件
publicDocumentreadXML()throw
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 党员培训工作方案（18篇）
- 2025年搏击运动项目申请报告模范
- 2025年林产化学产品项目申请报告
- 2025年污水处理鼓风机项目规划申请报告模范
- 2025年泳池热泵项目申请报告模板
- 2022年大学生实习报告例文5篇
- 2025年智能汽车项目申请报告模板
- 2025年干燥设备：热风炉项目规划申请报告模板
- 收银员的辞职报告模板汇编7篇
- 企业诚信承诺书合集6篇
- 2024-2030年版中国IPVPN服务行业发展现状及投资商业模式分析报告
- 北京市海淀区2021-2022学年第一学期四年级期末考试语文试卷（含答案）
- 2024-2030年中国企业大学行业运作模式发展规划分析报告
- 电动力学-选择题填空题判断题和问答题2018
- 房地产激励培训
- 山东省济南市2023-2024学年高二上学期期末考试地理试题 附答案
- 【MOOC】微型计算机原理与接口技术-南京邮电大学 中国大学慕课MOOC答案
- 违章建筑举报范文
- 2024幼师年终工作总结
- 糖尿病伤口护理
- 人教版（2024新版）八年级上册物理期末必刷单项选择题50题（含答案解析）
评论
0/150
提交评论