JavaWeb(九)——AJAX

AJAX是一种异步数据交互技术或者局部刷新技术
它可以在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

AJAX的运行原理

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被阻塞

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,
Ajax引擎会提交请求到服务器端,在这段时间里,
客户端可以任意进行任意操作,直到服务器端将数据返回数据	
给Ajax引擎后,会触发事先设置的事件,从而执行自定义的js逻辑代码完成某种功能
所用异步访问都是ajax引擎

Ajax的核心是JavaScript对象XmlHttpRequest
该对象在Internet Explorer 5中首次引入，
它是一种支持异步请求的技术。
即XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户

AJAX应用

js原生的AJAX技术:
请求由AJAX引擎发送到服务端
1）创建Ajax引擎对象
var xmlHttp = new XMLHttpRequest();
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState==4&&xmlHttp.status==200){
			//5、接受响应数据
			var res = xmlHttp.responseText;
			document.getElementById("span1").innerHTML = res;
		}
	}
3）绑定提交地址
xmlHttp.open("GET","/web/ajaxServlet",true);
			提交方式,提交地址,true异步/false同步
4）发送请求
xmlHttp.send();
5）接受响应数据
注意：如果是post提交
在发送请求之前要设置一个请求头参数信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")

onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 
readyState 存有 XMLHttpRequest 的状态。状态从 0 到 4 发生变化。
0: 请求未初始化 
1: 服务器连接已建立 
2: 请求已接收 
3: 请求处理中 
4: 请求已完成，且响应已就绪 
可以通过xmlhttp获取当前AJAX状态和响应的状态码
status 200: "OK" 响应的状态码
if(xmlHttp.readyState==4&&xmlHttp.status==200)

获取响应数据

要获得来自服务器的响应,可以使用 XMLHttpRequest 对象的 
responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据。 
responseXML 获得XML形式的响应数据 
展示响应数据
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

不同的浏览器版本对应不同的创建AJAX的方式
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

AJAX提交中参数的携带问题

//get方式跳转路径后携带参数
xmlHttp.open("GET","/web/ajaxServlet?name=zs",true);
可以直接资源地址后面拼接,使用request.getParameter("name");获取即可

post方式不能在地址后拼接,post方式的同步提交时后台获取到的参数为null,所以需要对请求头进行设置
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求式将参数携带
xmlHttp.send("name=wangwu");

AJAX中数据类型

AJAX中常用的数据类型为JSON
JSON:json是一种与编程语言无关的数据交换的格式
很多编程语言都在使用JSON
json有两种格式：
1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}
key是字符串  jaon的value是Object
2）数组/集合格式：[obj,obj,obj...]
json是js的原生内容，js可以直接取出json对象中的数据

示例:
var persons = [
                	{"name":"张三","age":23},
                	{"name":"李四","age":25}
                ];
 
//取出 name=李四
alert(persons[1].name);
//取23
alert(persons[0].age);

Jquery的Ajax技术

jquery是一个优秀的js框架
对js原生的ajax进行了封装
与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种	 
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
3）$.ajax( { option1:value1,option2:value2... } );

$.get和$.post中：默认是异步请求
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
$.get和$.post底层都是调用$.ajax
$.ajaxSettings.async = false;把ajax设置为同步
$.ajaxSettings.async = true;把ajax设置为异步
在$.post和$.get之前设置同步还是异步

$.ajax
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

示例:
	//get异步访问
	$.get(
		"/web/ajaxServlet", //url地址
		{"name":"张三","age":23}, //请求参数
		function(data){ //执行成功后的回调函数			
			alert(data.name);
		},
		"json" //返回响应数据的格式为json,
		//对于普通格式的字符串无法解析,只对json格式的字符串才能解析
	);	
示例:
	//ajax异步访问
	$.ajax({
		url:"/WEB22/ajaxServlet2",
		async:true,
		type:"POST",
		data:{"name":"lucy","age":18},
		success:function(data){
			alert(data.name);
		},
		error:function(){
			alert("请求失败");
		},
		dataType:"json"
	});
在servlet中返回json类型的数据时要设置响应的编码和字符串的转义
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"李四\",\"age\":24}");
以上代码传到页面会被jquery解析
调用jQuery.parseJSON(json),如果传入一个畸形的JSON字符串
会抛出一个异常,包括无引号的数据与单引号的数据,所以要使用\来转义

请求参数的中文乱码问题

get方式:需要对字符串进行编码解码
在过滤器中对参数进行解码与编码
String parameter = request.getParameter("username");//中文
parameter = new String(parameter.getBytes("iso8859-1"),"utf-8");

post方式
在过滤器中设置请求的编码
request.setCharacterEncoding("UTF-8");

AJAX异步校验用户名是否存在

$(function(){//当前页面加载完成后执行的函数		
		//为输入框绑定失去焦点事件
		$("#username").blur(function(){
			//1、失去焦点时获得输入框的内容
			var usernameInput = $(this).val();
			//2、去服务端校验该用户名是否存在---ajax
			$.post(		//url	资源请求地址	
				"${pageContext.request.contextPath}/checkUsername",
				//data 携带的参数
				{"username":usernameInput},
				//成功响应后执行的回调函数
				function(data){
					//获取返回的json数据
					var isExist = data.isExist;
					//3、根据返回的isExist动态的显示提示信息
					var usernameInfo = "";//提示信息的内容
					if(isExist){
						//该用户存在
						usernameInfo = "该用户名已经存在";
						$("#usernameInfo").css("color","red");
					}else{
						usernameInfo = "该用户可以使用"
						$("#usernameInfo").css("color","green");
					}
					//将提示内容写入标签中
					$("#usernameInfo").html(usernameInfo);
					
				},
				"json"//响应返回数据的格式
			);						
		});		
	});	

servlet中

		//获得要校验的用户名
		String username = request.getParameter("username");		
		//传递username到service
		UserService service = new UserService();
		boolean isExist = false;
		try {
			//查询当前用户名是否存在
			isExist = service.checkUsername(username);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		//将查询结果以json形式存入域对象
		response.getWriter().write("{\"isExist\":"+isExist+"}");

搜索栏搜索信息的实时更新

搜索框的基本样式

<form class="navbar-form navbar-right" role="search">
	<div class="form-group" style="position:relative">
		<!-- 搜索框 -->
		<input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
		<!-- 搜索框下的相关搜索目录 -->
		<div id="showDiv" style="display:none; position:absolute;z-index:1000;background:#fff; width:179px;border:1px solid #ccc;">
			<!-- 动态添加搜索相关信息 -->
			
		</div>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>	

<!-- 完成异步搜索 -->
<script type="text/javascript">	
	function overFn(obj){
		$(obj).css("background","#DBEAF9"); //鼠标移入关联信息栏时颜色为蓝色
	}
	function outFn(obj){
		$(obj).css("background","#fff");	//鼠标移出关联信息栏时颜色为白色
	}	
	function clickFn(obj){
		$("#search").val($(obj).html());	
		//鼠标点击后将关联信息写入搜索栏,并隐藏关联信息栏
		$("#showDiv").css("display","none");
	}
	

	function searchWord(obj){
		//1、获得输入框的输入的内容
		var word = $(obj).val();
		//2、根据输入框的内容去数据库中模糊查询---List<Product>
		var content = "";
		$.post(
			"${pageContext.request.contextPath}/searchWord",
			{"word":word},
			function(data){
				//3、将搜索相关的商品显示到关联信息栏showDiv中								
				if(data.length>0){
					for(var i=0;i<data.length;i++){
						content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
															//鼠标移入显示小手,并绑定单击事件和鼠标移入移出事件
					}
					//将相关代码写到showDiv
					$("#showDiv").html(content);
					//显示showDiv
					$("#showDiv").css("display","block");
				}
				
			},
			"json"
		);
		
	}
</script>