玩转AJAX

客户端向服务器发送请求，若服务器每次响应过来的结果都要重新加载整个界面的话这样会给服务器带来很大的压力。所以ajax出现了，它是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术，是一种使用现有标准的新方法。

AJAX是什么

1.asynchronous javascript and xml，翻译过来就是异步的js和xml。2.它能使用js语言访问服务器，而且是异步访问。3.服务器给客户端的响应一般是整个页面，一个html完整页面但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面而只是响应局部。

服务器向客户端返回的数据类型

一般客户端向服务器发送请求，服务器返回的数据类型有三种:

• 1.text类型:返回的数据是纯文本。
• 2.xml类型:返回的数据是xml格式，它是提供js和java交互的数据格式
• 3.json类型:它也是提供js和java交互的数据格式，在ajax中最受欢迎。

理解同步交互和异步交互

• 同步交互:
  • 1.发一个请求，就要等待服务器的响应结束，然后才能发送第二个请求。
  • 2刷新的是整个页面。
• 异步交互:
  • 1.发一个请求，无需等待服务器的响应，然后就可以发第二个请求。
  • 2.可以使用js来接受服务器的响应，然后使用js来局部刷新界面。

附上uml图解释这两者的区别:

ajax常见应用情景

• 1.搜索引擎:在搜索引擎中输入关键字，会出现一个下拉框，列出网络上与关键字相关的字眼。
• 2.注册:注册页面上填写完用户名后移开光标，会显示该用户名是否已被注册。
• 3.淘宝某个店铺下方的评论框:翻页时的异步操作。

ajax的优缺点

• 优点:
  • 异步交互，增强了用户的体验。
  • 性能:因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了。
• 缺点:
  • ajax不能应用在所有场景
  • ajax无端的增多了对服务器的访问次数，给服务器带来了压力(比较上述优点，在减少了服务器压力的同时又给服务器带来了压力，不知你理不理解哈哈)

如何使用ajax来发送异步请求

第一步(首先要得到XMLHttpRequest)

大多数浏览器都只是得到该对象的方法为:var xmlHttp=new XMLHttpRequest();

IE6.0得到的方法为:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

IE5.0以及更早版本的IE:var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

在<script>中编写创建XMLHttpRequest对象的函数:

function createXMLHttpRequest(){
		try{
			return new XMLHttpRequest();
		}catch(e){
			try{
				return new ActiveXObject(“Msxml2.XMLHTTP”);
			}catch(e){
				try{
					return new ActiveXObject(“Microsoft.XMLHTTP”);
				}catch(e){
					alert(“哥们，你用的是什么浏览器啊”);
					throw e;
				}
			}
		}
	}

第二步(打开与服务器的连接)

xmlHttp.open("","",boolean):用来打开与服务器的连接，它需要三个参数。1.请求参数，可以是get可以是post。2.请求的url:指定服务器端资源。3.请求是否异步，如果为true表示发送异步请求，否则发送同步请求。例如xmlHttp.open(“GET”,”项目名称/AServlet”,true);

第三步(发送请求)

xmlHttp.send(参数):参数为请求体内容。如果请求方式是get，则参数为null(不可以省略null)，因为get请求方式的请求体为空;如果请求方式为post，则参数为请求体，另外还需要在此方法前面增加一个mlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);设置请求头的方法。

第四步

给xmlHttp对象注册onreadystatechange监听器，这个方法用于接收从服务器发送过来的响应数据。 在该方法中需要做以下步骤:

1.获取xmlHttp对象的状态，xmlHttp对象一共有5个状态:

• 0状态:表示xmlHttp对象刚创建，还没有调用open()方法。
• 1状态：请求开始，调用了open方法，但还没有调用send方法
• 2状态：调用完了send方法
• 3状态：服务器已经开始响应，但不表示响应结束了。
• 4状态：服务器响应结束(通常我们只关心这个状态)

该状态通过调用xmlHttp.readyState得到。

2.得到服务器响应的状态码:通过调用xmlHttp.status得到，例如200，404，500。

3.得到服务器响应的内容，由于服务器返回的类型不同，所以得到的内容类型也不同，以下3种类型采用3种方法得到:

• var content=xmlHttp.responseText;//服务器返回的文本为text。
• var content=xmlHttp.responseXML;//服务器响应的文本为xml内容。xmlHttp会自动对xml文本进行解析，得到的content为document对象。
• var content=eval("("+xmlHttp.responsetext+")");//服务器返回的文本为json数据。

完成第四步我们需要写的完整代码为:

xmlHttp.onreadystatechange=function(){//xmlHttp的5种状态都会调用本方法
	if(xmlHttp.readState==4&&xmlHttp.status==200){//双重判断:判断是否为4状态，而且还要判断是否为200
		//获取服务器的响应内容
		var content=xmlHttp.responseText;//或var content= xmlHttp.responseXML;
	}
}

案例:省市联动

说明，该案例就是在网页上显示两个下拉列表，一个列表用于显示中国所有的省份，一个列表用于显示相应省份下的城市，当然这些数据是存在数据库中的，为了方便展示，我只在数据库中列举了两个省份和部分城市。

domain包下的city.java和province.java代码如下:

servlet包下的CityServlet.java与ProvinceServlet.java，用于向客户端发送响应数据代码如下:

dao包下的ProvinceDao.java代码如下:用于与数据库连接:

最终要的界面代码关于ajax的操作,代码如下:

数据库中的表有两张，一张是省份表province,一张是城市表city,如下:

结果如下:

当选择了相应的省份时，ajax会立即向服务器发送请求，然后服务器返回该省份下所有的城市，ajax将这些城市动态的显示在”请选择城市”列表中。达到部分刷新界面的效果。

2018.3.19更

欢迎加入我的Java交流1群:659957958。

2018.4.21更:如果群1已满或者无法加入，请加Java学习交流2群：305335626 。

联系

If you have some questions after you see this article,you can tell your doubts in the comments area or you can find some info by clicking these links.

• Blog@codingXiaxw’s blog

• Weibo@codingXiaxw

• Zhihu@codingXiaxw

• Github@codingXiaxw