Ajax详解

zoukankan html css js c++ java

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"); } } }
  
  register.jsp
  
  <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类型
参考资料
查看全文

相关阅读:
android滤镜效果
 Android ListView的OnItemClickListener详解
 Categories
利用Stack倒序List，利用Set使List不能添加重复元素
 IOS数据类型对应输出格式
 win7的dropbox无法启动重新安装也没用
 记一次datatable的删除操作
 winform动态创建radio以及使用委托判断哪个选中
 临时表列的长度
 退出winform应用程序

原文地址：https://www.cnblogs.com/rpish/p/14728622.html

AJAX简介

XMLHttpRequest

XHR案例

XStram

JSON(JavaScript Object Notation)

JSON-LIB

参考资料