JavaWeb
来源：互联网 发布：神话特效软件 编辑：程序博客网 时间：2024/05/30 07:14
Ajax讲解
1.ajax是什么？
asynchronous javascript and xml：一部的js和xml
它能使js访问服务器，而且是异步访问
服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而只是数据
- text：纯文本
- xml：
- json：它是js提供的数据交互格式，它在ajax中最受欢迎
2.异步交互和同步交互
- 同步
- 发一个请求，就要等待服务器的响应结束，然后才能发第二个请求，中间这段时间就是一个字“卡”
- 刷新的是整个页面
- 异步
- 发一个请求后，无序等待服务器的响应，然后就可以发第二个请求
- 可以使用js接收服务器的响应，然后使用js来局部刷新
3.ajax应用场景
- 百度的搜索框
- 用户注册时（校验用户名是否被注册过）
4.ajax的优缺点
- 优点：
- 异步交互：增强了用户的体验
- 性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了
- 缺点：
- ajax不能应用在所有场景
- ajax无端的增多了对服务器的访问次数，给服务器带来了压力
5.ajax发送异步请求（四步操作）
1.第一步
- ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax
得到XMLHttpRequest
大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.5以及更早版本的IE：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);编写创建XMLHttpRequest对象的函数
function creatXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch(e) { try{ return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ alert("您用的是什么浏览器啊？"); throw e; } } }}2.第二步（打开与服务器的连接）
xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
请求方式：可以是GET或POST
请求的URL：指定服务器端资源，例如：/day23_1/AServlet
请求是否为异步：如果为true表示发送异步请求，否则同步请求xmlHttp.open(“GET”, “/day23_1/AServlet”, true);
3.第三步（发送请求）
- xmlHttp.send(null)：如果不给可能会造成部分浏览器无法发送
参数：就是请求体内容！如果是GET请求，必须给出null
4.第四步（）
- 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
- xmlHttp对象一共有5个状态：
- 0状态：刚创建，还没有调用open()方法；
- 1状态：请求开始，调用了open()方法，但还没有调用send()方法
- 2状态：调用完了send()方法
- 3状态：服务器已经开始响应，但不表示响应结束了
- 4状态：服务器响应结束（通常我们只关心这个状态）
- 得到xmlHttp对象的状态
var state = xmlHttp.readyState;//可能是0、1、2、3、4 - 得到服务器响应的状态码
var status = xmlHttp.status;//例如200、404、500 - 得到服务器响应的内容
- var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
- var content = xmlHttp.responseXML;//叨叨服务器的响应的xml响应的内容，xmlHttp对象会自动对响应的字符串进行解析，它是Document
示意代码：
双重判断
xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断：判断是否为4状态，而且还要判断是否为200 //获取服务器的响应内容 var text = xmlHttp.responseText; }}Ajax练习
第一例：Ajax的HelloWorld
Servlet:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub System.out.println("Hello xiaohei"); response.getWriter().print("Hello xiaohei"); }JSP:
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>//创建异步对象function creatXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您用的是什么浏览器啊？"); throw e; } } }}window.onload = function(){//文档加载完毕后执行 var but = document.getElementById("but"); but.onclick = function(){//给按钮的点击事件注册监听 //ajax四步操作 //1.得到异步对象 var xmlHttp = creatXMLHttpRequest(); //2.打开数据库连接，这里是在jsp页面中使用标签，客户端看到jsp页面的时候是服务端tomcat把jsp页面变成html页面才发送过来的，到客户端就没有jsp标签了，已经变成字符串"/day23_1_itcast/AServlet" xmlHttp.open("GET","<c:url value='/AServlet'/>", true); //3.发送请求 xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送 //4.给异步对象的onreadystatechange注册监听器 xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行 //双重判断 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var h4 = document.getElementById("h4"); var text = xmlHttp.responseText; h4.innerHTML = text; } } }}</script></head><body> <button id="but">点击这里</button> <h4 id="h4"></h4></body>第二例：发送POST请求（如果发送请求时需要带有参数，一般都用POST请求）
- open：xmlHttp.open(“POST”…)
- 添加一步：设置Content-Type请求头：
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); - send：xmlHttp.send(“username=zhangsan&password=123”);发送请求时指定请求体
Servlet：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username = request.getParameter("username"); System.out.println("(Post)...Hello xiaohei" + username); response.getWriter().print("(Post：)...Hello xiaohei" + username); }JSP：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>function creatXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch (e) { try { return ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您用的是什么浏览器啊？"); throw e; } } }}window.onload = function(){ var but = document.getElementById("but"); but.onclick = function(){ //ajax四步操作 //1.得到异步对象 var xmlHttp = creatXMLHttpRequest(); //2.打开数据库连接 /********修改open方法，指定请求方式为POST**********/ xmlHttp.open("POST","<c:url value='/AServlet'/>", true); /*********设置请求头：Content-Type*********/ xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //3.发送请求 /*********发送时指定请求体*********/ xmlHttp.send("username=张三"); //4.给异步对象的onreadystatechange注册监听器 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var h4 = document.getElementById("h4"); var text = xmlHttp.responseText; h4.innerHTML = text; } } }}</script></head><body> <button id="but">点击这里</button> <h4 id="h4"></h4></body></html>第三例：用户名是否已被注册
Servlet：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String username = request.getParameter("username"); if(username.equalsIgnoreCase("itcast")){ response.getWriter().print("1"); }else{ response.getWriter().print("0"); } }JSP：
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function creatXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch (e) { try { return ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您用的是什么浏览器啊？"); throw e; } } }} window.onload = function(){ //获取文本框，给它的失去焦点事件注册监听 var nameele = document.getElementById("usernameele"); nameele.onblur = function(){ //1.得到异步对象 var xmlHttp = creatXMLHttpRequest(); //2.开启与服务器的连接 xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet' />", true); //3.设置请求头：Content-Type xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4.发送请求，给出请求体 xmlHttp.send("username=" + nameele.value); //5.给xmlHttp的onreadystatechange事件注册监听 xmlHttp.onreadystatechange = function(){ //双重判断 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var text = xmlHttp.responseText; var spanele = document.getElementById("errorspan"); if(text == "1"){ spanele.innerHTML = "该用户名已被注册"; } else { spanele.innerHTML = ""; } } } }; };</script></head><body> <form action="" method="post"> name：<input type="text" name="username" id="usernameele" /><span id="errorspan"></span><br/> password：<input type="password" name="password" /><br/> <input type="submit" value="Submit" /> </form></body>第四例：响应XML
如果服务端响应内容为xml数据：
- 服务器端：设置响应头ContentType=“text/xml;charset=utf-8”
- 客户端：var doc = xmlHttp.responseXML;//得到的是document对象
Servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String xml = "<students>" + "<student number='ITCAST_1001'>" + "<name>zhangsan</name>" + "<age>18</age>" + "<sex>male</sex>" + "</student>" + "</students>"; response.setContentType("text/xml);charset=UTF-8"); response.getWriter().print(xml); }JSP：
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script>function creatXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch (e) { try { return ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您用的是什么浏览器啊？"); throw e; } } }}window.onload = function(){ var but = document.getElementById("but"); but.onclick = function(){ //ajax四步操作 //1.得到异步对象 var xmlHttp = creatXMLHttpRequest(); //2.打开数据库连接 xmlHttp.open("GET","<c:url value='/BServlet'/>", true); //3.发送请求 xmlHttp.send(null); //4.给异步对象的onreadystatechange注册监听器 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //获取服务器响应结果（xml） var doc = xmlHttp.responseXML; var ele = doc.getElementsByTagName("student")[0]; //获取元素名为number的属性值 var number = ele.getAttribute("number"); var name; var age; var sex; if(window.addEventListener){ name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器 } else{ name = ele.getElementsByTagName("name")[0].text;//IE浏览器 } if(window.addEventListener){ age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器 } else{ age = ele.getElementsByTagName("age")[0].text;//IE浏览器 } if(window.addEventListener){ sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器 } else{ sex = ele.getElementsByTagName("sex")[0].text;//IE浏览器 } var text = number + "," + name + "," + age + "," + sex; var h4 = document.getElementById("h4"); h4.innerHTML = text; } } }}</script></head><body> <button id="but">点击这里</button> <h4 id="h4"></h4></body></html>JSON
JSON基础
1.json是什么？
它是js提供的一种数据交换格式
2.json语法
{ }：是对象，对象的属性名可以不用双引号括起来
但JSON的属性名必须使用双引号括起来，单引号不行
属性值可以是：null，数值，字符串，数组（使用[ ]括起来），boolean值（true和false）
3.应用json
var person = {“name”:”zhangsan”, “age”:18, “sex”:”male”};
服务端向客户端发送json串
String str = “{\”name\”:\”zhangsan\”, \”age\”:18, \”sex\”:\”male\”}”;
需要转义，为了能在字符串中正确的表示双引号，双引号是字符串内容的一部分
通常，我们在jsp页面中获取到服务器响应来的json串后，需要去执行它，就需要调用eval方法，然后在json串两边加上括号
var text = xmlHttp.responseText;
var person = eval(“(” + text + “)”);
json-lib
json-lib的核心jar包：json-lib.jar
json-lib的依赖jar包：
- commons-lang.jar
- commons-beanutils.jar
- commons-logging.jar
- commons-collections.jar
- ezmorph.jar
核心类：
JSONObject：类似于Map
- toString();返回一个JSON串
- fromObject(Object arg);这是一个静态方法，可以把一个对象转成JSONObject类型
JSONObject map = JSONObject.fromObject(person);
JSONArray：类似于List
- toString();返回一个JSON串
- fromObject(Object arg);
JSONArray jsonArray = JSONObject.fromObject(list);把一个List转换成JSONArray
- fromObject(Object arg);
阅读全文
1 0
- javaweb
- JavaWeb
- JavaWeb
- javaweb
- javaWeb
- JAVAweb
- 【JavaWeb】
- javaweb
- javaweb
- javaweb
- javaweb
- javaWeb
- javaweb
- javaweb
- JavaWEB
- JavaWeb
- javaweb
- JavaWeb
- 二叉树最小深度探究
- BeautifulSoup中的.text方法和get_text()方法的区别
- 2-sat
- 浅谈八皇后问题
- 某笔试题（一）获取20个随机不重复的字符
- JavaWeb
- Spring bean id相同引发的故障
- demo_3. Python的函数嵌套
- nodejs和python 简单爬取百度图片保存在本地
- 编译开关学习
- 二叉树的层次遍历
- 堆排序简要介绍
- 分布式事务解决方案课程概述(一)
- bzoj 1965（快速幂+逆元）
