Ajax &JQuery

Ajax

1. 是什么？

并不是一个新的技术，只是把原有的技术，整合到一起而已。
1. 使用CSS和XHTML来表示
2. 使用DOM模型来交互和动态显示
3. 使用XMLHttpRequest来和服务器进行异步通讯
4. 使用JavaScript来绑定和调用

• 用途

网页如果想要刷新局部内容，那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

数据请求 Get

1.创建对象

		function  ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject(\"Msxml2.XMLHTTP\");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject(\"Microsoft.XMLHTTP\");
			      }
			      catch (e){}
			      }
		    }
	
			return xmlHttp;
		 }


2. 发送请求


	//执行get请求
function get() {
	
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	
	//2. 发送请求。
	// http://localhost:8080/day16/demo01.jsp
	//http://localhost:8080/day16/DemoServlet01
	
	/*	
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
	*/
	request.open(\"GET\" ,\"/day16/DemoServlet01\" ,true );
	request.send();
}

   如果发送请求的同时，还想获取数据，那么代码如下
   ```
servlet中doget()
String name = request.getParameter(\"name\");
String age = request.getParameter(\"age\");
   System.out.println(\"收到了请求\"+name+\"-----\"+age);
   response.setContentType(\"text/html;charset=UTF-8\");
   response.getWriter().write(\"<h1>收到了请求<h1>\");
页面
   //执行get请求
   function get() {
   	
   	//1. 创建xmlhttprequest 对象
   	var request = ajaxFunction();
   	
   	//2. 发送请求
   	request.open(\"GET\" ,\"/day16/DemoServlet01?name=aa&age=18\" ,true );
   	
   	//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
   	request.onreadystatechange = function(){
   		
   		//前半段表示 已经能够正常处理。  再判断状态码是否是200
   		if(request.readyState == 4 && request.status == 200){
   			//弹出响应的信息
   			alert(request.responseText);
   		}
   	}
   	request.send();

数据请求post

需要获取数据


	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( \"POST\", \"/day16/DemoServlet01\", true );
		
		//想获取服务器传送过来的数据， 加一个状态的监听。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				
				alert(\"post：\"+request.responseText);
			}
		}
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send(\"name=aobama&age=19\");
	}

校验用户名是否可用

1. 搭建环境

1. 页面准备

   用户名:
   密码
   邮箱
   简介

2. 数据库准备

2. Servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	try {
		
		request.setCharacterEncoding(\"UTF-8\");
		
		//1. 检测是否存在
		String name = request.getParameter(\"name\");
		System.out.println(\"name=\"+name);
		
		UserDao dao = new UserDaomImpl();
		boolean isExist = dao.checkUserName(name);
		
		//2.  通知页面，到底有还是没有。
		if(isExist){
			response.getWriter().println(1);  //存在用户名
		}else{
			response.getWriter().println(2); //不存在该用户名
		}
		
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

3. Dao代码

	public class UserDaomImpl implements UserDao{

		@Override
		public boolean checkUserName(String username) throws SQLException {
			QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
			
			String sql = \"select count(*) from t_user where username =?\";


			runner.query(sql, new  ScalarHandler(), username);

			Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
			return result > 0 ;
		}
	
	}

jsp页面显示

​
function checkUserName() {

	//获取输入框的值 document 整个网页
	var name = document.getElementById(\"name\").value; // value  value() val val()
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open(\"POST\"  ,\"/day16/CheckUserNameServlet\" , true );
	
	//注册状态改变监听，获取服务器传送过来的数据
	request.onreadystatechange = function(){
		
		if(request.readyState == 4 && request.status == 200){
			//alert(request.responseText);
			var data = request.responseText;
			if(data == 1){
				//alert(\"用户名已存在\");
				document.getElementById(\"span01\").innerHTML = \"<font color=\'red\'>用户名已存在!</font>\";
			}else{
				document.getElementById(\"span01\").innerHTML = \"<font color=\'green\'>用户名可用!</font>\";
				//alert(\"用户名未存在\");
			}
		}
		
	}
	
	request.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\");
	request.send(\"name=\"+name);
}

JQuery

• 是什么？

JavaScript的代码框架

• 有什么作用？

简化代码，提高效率
核心
write less do more ,写的更少，做的更多
###load

<a href=\"\" onclick=\"load()\">使用JQuery执行load方法</a>

有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=\"\"的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。


//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$(\"#aaa\").load(\"/day16/DemoServlet02\" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$(\"#aaa\").val(responseText);
	}); 

Get

$.get(\"/day16/DemoServlet02\"  , function(data ,status) {
		$(\"#div01\").text(data);
	});

赋值显示

• val(“aa”);

只能放那些标签带有value属性

• html(“aa”); —写html代码
• text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

load & get

• load

  $(\"#元素id\").load(url地址);

  $(\"#div1\").load(serlvet); —> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

• get

  语法格式 ： $.get(URL,callback);

    使用案例： $.get(\"/day16/DemoServlet02\"  , function(data ,status) {
    	$(\"#div01\").text(data);
    });
  

• post

  语法格式：$.post(URL,data,callback);

    function post() {
    	$.post(\"/day16/DemoServlet02\", {name:\"zhangsan\",age:18},function(data,status) {
    		//想要放数据到div里面去。 --- 找到div
    		$(\"#div01\").html(data);
    	});
    }
  

使用JQuery去实现校验用户名

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $(\"#name\").val();
		
		//2. 发送请求
		$.post(\"/day16/CheckUserNameServlet\" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert(\"用户名存在\");
				$(\"#span01\").html(\"<font color=\'red\'>用户名已被注册</font>\");
			}else{
				//alert(\"用户名可用\");
				$(\"#span01\").html(\"<font color=\'green\'>用户名可以使用</font>\");
			}
		} );
		//3. 输出响应的数据到页面上。
	}

搭建环境

1. 定义首页

   黑马

    <div id=\"div01\" style=\"position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: None\"></div>
   

2. 定义数据库

捕获键盘弹起

$(function(){
$(\"#word\").keyup(function() {
alert(“键盘弹起了…”);
})
});

JS请求

$(function(){
	$(\"#word\").keyup(function() {
		//2。 获取输入框的值 
		//var word = $(\"#word\").val();
		//this  对应就是执行这个方法的那个对象， $(\"#word\")
		var word = $(this).val();

		if(word == \"\"){
			$(\"#div01\").hide();
		}else{
			//3. 请求数据。
			$.post(\"find\",{word:word} ,function(data , status){
				//alert(data);
				$(\"#div01\").show();
				$(\"#div01\").html(data);
			});
		}
		
	})
});

Servlet代码

		protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding(\"utf-8\");
		try {
			//1. 先获取参数
			String word = request.getParameter(\"word\");
			System.out.println(\"word=\"+word);
			
			//2. 让dao执行查询
			WordsDao dao = new WordsDaoImpl();
			List<WordBean> list = dao.findWords(word);
			
			for (WordBean wordBean : list) {
				System.out.println(\"===\"+wordBean.toString());
			}
			
			request.setAttribute(\"list\", list);
			
			//3. 返回数据
			response.setContentType(\"text/html;charset=utf-8\");
			//response.getWriter().write(\"数据是：\");
			request.getRequestDispatcher(\"list.jsp\").forward(request, response);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	
	}

list.jsp

	<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\"
	    pageEncoding=\"UTF-8\"%>
	 <%@ taglib uri=\"http://java.sun.com/jsp/jstl/core\"  prefix=\"c\"%>

​

使用jQuery实现省市联动

1. 准备数据库

2. 准备页面

    <script type=\"text/javascript\" src=\"js/jquery-1.11.3.min.js\"></script>
    	<script type=\"text/javascript\" src=\"js/city.js\"></script>
    	</head>
    	<body>
    	省份: <select name=\"province\" id =\"province\">
    			<option value=\"\" >-请选择 -
    			<option value=\"1\" >广东
    			<option value=\"2\" >湖南
    			<option value=\"3\" >湖北
    			<option value=\"4\" >四川
    		</select>
    	城市: 
    		<select name=\"city\" id=\"city\">
    			<option value=\"\" >-请选择 -
    		</select>
    	</body>
   

XStream的使用

	//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
		XStream xStream = new XStream();
		
		//想把id做成属性
		xStream.useAttributeFor(CityBean.class, \"id\");
		
		//设置别名
		xStream.alias(\"city\", CityBean.class);
		
		//转化一个对象成xml字符串
		String xml = xStream.toXML(list);

JS代码

	$(function() {
	//1。找到省份的元素
	$(\"#province\").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$(\"#province\").varl();
		var pid = $(this).val();
		
		/*<list>
			<city>
				<id>1<id>
				<pid>1</pid>
				<cname>深圳</cname>
			</city>
			<city >
				<id>2<id>
				<pid>1</pid>
				<cname>东莞</cname>
			</city>
		</list>*/
		
		$.post( \"CityServlet\",{pid:pid} ,function(data,status){
			//alert(\"回来数据了:\"+data);
			
			//先清空以前的值：
			$(\"#city\").html(\"<option value=\'\' >-请选择-\")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find(\"city\").each(function() {
				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children(\"id\").text();
				var cname = $(this).children(\"cname\").text();
				
				$(\"#city\").append(\"<option value=\'\"+id+\"\' >\"+cname)
			});
		} );
		
	});
});

服务器和客户端数据传输的方式

• xml

  1 1 深圳 2 1 东莞

• json

  阅读性更好 、 容量更小。

  {“name”:“aaa” , “age”:19}

    把javaBean  转化成 json数据
  
    //3. 把list ---> json数据
    	//JSONArray ---> 变成数组 ， 集合  []
    	//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
    	
    	JSONArray jsonArray = JSONArray.fromObject(list);
    	String json = jsonArray.toString();
  

使用json格式数据显示省市联动效果

serlvet代码：

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	try {
		//1. 获取参数
		int pid = Integer.parseInt(request.getParameter(\"pid\"));
		
		//2 找出所有的城市
		CityDao dao = new CityDaoImpl();
		List<CityBean> list = dao.findCity(pid);
		
		//3. 把list ---> json数据
		//JSONArray ---> 变成数组 ， 集合  []
		//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
		
		JSONArray jsonArray = JSONArray.fromObject(list);
		String json = jsonArray.toString();


		response.setContentType(\"text/html;charset=utf-8\");
		response.getWriter().write(json);


	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	};
}



js代码


	$(function() {
		//1。找到省份的元素
		$(\"#province\").change(function() {
			//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
			//$(\"#province\").varl();
			var pid = $(this).val();
			
			/*[
			    {
			        \"cname\": \"深圳\",
			        \"id\": 1,
			        \"pid\": 1
			    },
			    {
			        \"cname\": \"东莞\",
			        \"id\": 2,
			        \"pid\": 1
			    }
			    ...
			]*/
			$.post( \"CityServlet02\",{pid:pid} ,function(data,status){
				
				//先清空
				$(\"#city\").html(\"<option value=\'\' >-请选择-\");
				//再遍历，追加
				$(data).each(function(index , c) {
					$(\"#city\").append(\"<option value=\'\"+c.id+\"\' >\"+c.cname)
				});
			},\"json\" );
			
		});
	});

总结

Ajax

发送get请求

发送post请求

都要求带数据 + 获取数据＋　放置到元素上。

JQuery

发送get请求

发送post请求

都要求带数据 + 获取数据＋　放置到元素上。

---------------------------------------

1. 服务器返回xml数据


2. 服务器返回json数据