Ajax详解

AJAX简介

什么是AJAX?
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步和异步
- 同步:发送一个请求,要等服务器响应后,才能发送第二个请求
  - 刷新就要渲染整个页面
  - 返回数据是html页面
- 异步:发送一个请求后,无需等待服务器响应,可以直接发送第二个请求
  - 可以使用js接收服务器响应,再进行局部刷新
  - 返回数据可以是xml或者json
应用场景
- 百度搜索框,输入后出现下拉列表
- 网站注册,判断用户名是否已注册
- 知乎推荐页面,下拉不断获取新文章
AJAX优缺点
- 优点:
  - 异步交互:增强了用户体验
  - 性能:服务器每次响应只需返回部分内容,无需重新返回整个页面=>减轻了服务器压力
- 缺点:
  - 不能应用于所有场景
  - 增多了对服务器的访问次数=>增加了对服务器压力

XMLHttpRequest

什么是XMLHttpRequest?
- 所有浏览器都支持XMLHttpRequest对象
- XMLHttpRequest 用于在后台与服务器交换数据=>可以在不重新加载整个网页的情况下，对网页的某部分进行更新
使用XMLHttpRequest对象
- 创建XMLHttpRequest对象
  - var xmlhttp = new XMLHttpRequest();
- 向服务器发送请求
  - xmlhttp.open("GET","ajax\_info.txt",true);=>先规定类型,url,是否使用异步
  - xmlhttp.send(null);=>再发送请求
    - send()有一个字符串参数,为请求体内容,如果是GET方法最好传入null,否则Firefox可能会报错
- 服务器响应
  - XHR对象5种状态
    - 0=>刚创建,未调用open()方法
    - 1=>请求开始,调用了open()方法,未调用send()方法
    - 2=>调用了send()方法
    - 3=>服务器响应,但未结束
    - 4=>服务器响应结束
  - 获取XHR对象状态
    - var state = xmlHttpRequest.readyState;=>可能是上述的0~4
  - 获得服务器响应状态码
    - var status = xmlHttpRequest.status;
  - 获得服务器响应内容
    - var content = xmlHttpRequest.responseText;=>得到服务器响应内容的文本格式
    - var content = xmlHttpRequest.responseXML;=>得到服务器响应的xml内容,浏览器自动解析为一个Document对象
  - 在XHR对象的一个事件上注册监听器:onReadyStateChange=>每次状态变化都会调用
```
xmlHttpRequest.onReadyStateChange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)//成功接收响应
	var content = xmlHttpRequest.responseText; //获取响应文本
}
```

XHR案例

HelloWorld

<html>
	<body>
	<button id="btn">Click Here</button>
	<h1 id="h1"></h1>
	</body>
	
	<script type="text/javascript">
		function createXMLHttpRequest(){
			try{
				return XMLHttpRequest();
			} catch(e){
				thorw e;
			}
		}
		
		window.onload = function(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var xmlHttp = createXMLHttpRequest();
				xmlHttp.open("GET","api.jsp",true); //这个api.jsp会返回"Hello World"
				xmlHttp.send(null);
				xmlHttp.onreadystatechange = function(){
					if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
					var content = xmlHttpRequest.responseText;
					var h1 = document.getElementById("h1");
					h1.innerHTML = content;
					}	
				}
			}
		}
		
	</script>
</html>

发送POST请求
- xhr.open("POST",url,async);
- xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- xhr.send("param1=v1&param2=v2");

判断用户是否已注册

validateUsernameServlet

public class validateUsernameServlet extends HttpServlet{
	public 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("username")){	//之后可以修改此处,与数据库中的用户名作比较
			response.getWriter().print("1");	//这里0表示未存在,1表示已存在
		} else{
			response.getWriter().print("0");	
		}
	}
}

<html>
	<body>
		<form action="" method="post">
		<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
		<input type="password" name="password"/><br/>
		<input type="submit" value="submit"/>
		</form>
	</body>
	<script>
		window.onload = function(){
			var userEle = document.getElementById("usernameEle");
			var span = document.getElementById("errorSpan");
			userEle.onblur = function(){
				var xhr = createXMLHttpRequest();
				xhr.open("POST","<c:url value="/validateUsernameServlet"/>",true);
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send("username="+userEle.value);
				xhr.onreadystatechange = fucntion(){
					if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
						var text = xhr.responseText;
						if(text=="1"){
							span.innerHTML="Username has been used.";
						}else{
							span.innerHTML="";
						}
					}
				}
			}
		}
	</script>
</html>

响应内容为xml
- Servlet
  - 设置响应头ContentType = text/xml;charset=utf-8
- JS
  - 用XML解析var doc = xhr.responseXML
- JS解析xml成本较高=>已被json解析逐步替代
省市联动
- 服务端需要两个servlet
  - provinceServlet=>获取城市列表
  - cityServlet=>根据post过来的province返回city列表
- 客户端处理方法
  - windows.onload请求provinceServlet,并将响应结果赋给一个个option,添加到province对应的select中
  - province下的option选择后,post到cityServlet,清空city对应select下的所有option后,将返回的结果同样添加进来
  - 具体实现可以看参考资料7

XStram

将可以JavaBean序列化为xml,也可以JavaBean序列化成json或者反序列化
XStream的jar包
- 核心jar包:xstream.jar
- 必须依赖包:xpp3_min(XML Pull Parser,一款速度很快的xml解析器)
- 使用前需要复制到项目的Referenced Libaraies
使用步骤
- 创建xstream对象XStream xstream = new XStream();
- 序列化javabeanString s = xstream.toXML(javabean);
- 其他方法
  - 给类名指定别名xstream.alias("alias",className.class);
  - 更多可以到参考9 看官方文档

JSON(JavaScript Object Notation)

JS提供的一种数据交换语言
语法
- {}=>括号包括的是对象
- ""=>双引号包括的是属性名
- 用:分割属性名和属性值
- 用,分割各个属性
- 属性值类型
  - 数字,字符串,逻辑值,数组,对象,null
和XML比较
- 可读性,解析难度,流行度都更好
- 老项目更多基于XML

JSON-LIB

JavaBean转为JSON
使用前把jar包导入WEBROOT/WEB-INF/lib
核心类
- JSONObject=>类似于Map的用法
  - toString()=>序列化输出
  - fromObject()=>将对象转为JSONObject类型
- JSONArray=>类似于List的用法
  - toString()=>序列化输出
  - fromObject()=>将对象转为JSONArray类型

Ajax详解

AJAX简介

XMLHttpRequest

XHR案例

XStram

JSON(JavaScript Object Notation)

JSON-LIB

参考资料