Day31 JavaWeb知识 (8)-Ajax&Jquery

(一)Ajax

一.概述

1. AJAX  Asynchronous Javascript And XML  (异步JavaScript和XML),
   是指一种创建交互式网页应用的网页开发技术
2. ajax并非一种新的技术,而是几种原有技术的结合体,它由下列技术组合而成:
   1.使用CSS和XHTML来表示
   2.使用DOM模型来交互和动态显示
   3.使用XMLHttpRequest来和服务器将进行异步通信
   4.使用javascript来绑定和调用
3. 网页如果想刷新局部内容,那么需要重新载入整个网页,用户体验不是很好
   就是为了解决局部刷新的问题,保持其他部分不动,只刷新某些地方

二.数据请求 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. 发送请求

   function get() {
   		//1.创建xmlhttprequest对象
   		var request = ajaxFunction();
   		//2.发送请求
   		//参数一:请求类型GET POST
   		//参数二:请求的路径
   		//参数三:是否异步 true false
   		request.open("GET","DemoServlet01",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","DemoServlet01",true);

                //3.获取服务器发送过来的数据,加一个状态的监听
		request.onreadystatechange=function(){
			if(request.readystate==4 && request.status == 200){
				alert(request.responseText);
			}
		}
		
		//如果使用的是post方式带数据,那么这里要添加头,
		//说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//3.带数据过去,在send方法里面写表单数据
		request.send("name=zhangsan&age=23");
		
	}

 

四.校验用户名案例

1. 搭建环境
   - - 页面准备
   - - 数据库准备
2. Servlet查询,并响应
3. Dao代码
4. jsp页面显示

(二)Jquery

一.概述

1. Jquery是javascript的代码框架
2. 简化代码,提高效率

二.方法

1. load方法
   语法格式  $("#元素id").load(url地址);
   例如   $("#div01").load(servlet);  ---->使用的get请求,回来赋值的时候,使用text();
2. get方法
   语法格式  $.get(URL,callback);
   例如:   $.get("/day31/DemoServlet" , function(data , status){
           $("#div01").text(data);
   });
3. post方法
   语法格式  $.post(url , data , callback);
   例如:   $.post("/day31/DemoServlet" , { name:"zhangsan" ,age:18  } ,function(data , status){
           $("#div01").html(data);
   });

三. XStream的使用

1. XStream 转化 bean对象成xml
   XStream xstream = new XStream();
   //把id做成属性
   xstream.useAttributeFor(Bean.class , "id" );
   //设置别名
   xstream.alias("bean" , Bean.class);
   //转化一个对象成xml字符串
   String xml = xStream.toXML(list);
   //发送到jsp里
   response.setContentType("text/xml;charset=utf-8");
   response.getWrite().write(xml);

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

1. xml
   格式: 
   <list>
             <city>
                       <id>1</id>                        
             </city>
   </list>
2. json
   格式:
   {"name":"aaa"  ,  "age" : 19}
   //把list -- > json数据
   JSONArray --> 变成数组,集合  [ { } , { } ]
   JSONObject --> 变成简单的数据 {"name":"aaa"  ,  "age" : 19 }
   //转化一个对象成json字符串
   JSONArray jsonArray = JSONArray.fromObject(list);
   String json = jsonArray.toString();
   //发送到jsp里
   response.setContentType("text/html;charset=utf-8");
   response.getWrite().write(json);