JSP学习之Ajax详细教学

Ajax的概念和原理

一、什么是Ajax？
1、Ajax本质上是一个浏览器端的技术。
2、异步刷新技术，用来在当前页面内响应不同的请求内容。
3、相当于js修改页面文档结构，只不过数据变成动态的；之前js修改页面文档DOM是静态的，数据不可以随意修改。例如：

//修改元素内容
showdiv.innerHTML = "这里是固定的，不能动态改变";

二、为什么需要Ajax？

需求：
有时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户；
解决：
1、在后台服务器端将多次响应的内容重新拼接成一个jsp页面，响应。但是这样会造成很多响应内容被重复的响应，造成资源浪费；
2、使用Ajax技术；

三、使用Ajax

Ajax访问原理
Ajax的基本使用流程
Ajax的状态码
Ajax的异步和同步
Ajax的请求
Ajax的响应数据类型
Ajax的封装
Ajax的案例

四、了解

浏览器发请求的方法：
（1）a标签下的href，
（2）window.loaction，
（3）form表单，
前三种传统方式都会修改浏览器地址栏；
（4）ajax，
Ajax方式不会修改浏览器地址栏；
Ajax属于js内置Ajax引擎对象（XMLHttpRequest），隶属于当前页面js代码的一部分；
不管是使用传统方式还是Ajax方式，都是通过浏览器发送请求给服务器；但是服务器并不知道浏览器以什么方式发送。
注册时用户名检验，三级联动，淘宝网的下拉框等都属于Ajax。

Ajax基本使用流程

一、创建Ajax引擎对象：

	var ajax;
	if(window.XMLHttpRequest){
		//火狐
		ajax = new XMLHttpRequest();
	}else if (window.ActiveXObject) {
		//IE6、7
		ajax = new ActiveXObject("Msxml2.XMLHTTP");
	}

说明：
	因为浏览器不同，所以ajax的对象不同；要进行判断。

二、复写onreadystatement函数：

声明
ajax.onreadystatechange = function(){};
发生时机：
每次ajax状态码改变触发，共触发4次。

	ajax.onreadystatechange=function(){
		//获取响应内容
		var result = ajax.responseText;
		//获取元素对象
		var showdiv = document.getElementById("showdiv");
		//修改元素内容
		showdiv.innerHTML = result;
	}

说明：
	1、因为Ajax的状态码为： 0,1,2,3,4，其中4：表示响应内容被成功接收；
	2、在一次请求中状态码会改变四次；
	3、只要状态码发生变化，就会触发onreadystatechange函数，导致修改元素内容的代码会
	重复执行四次。但是只有在状态码为4的时候才能真正获取到响应的数据，前三次的状态改变
	是无意义的。所以下面要进行判断Ajax状态码的步骤。

三、发送请求：

请求方式：
GET或POST
使用：
ajax.open(“方式”, “url”, async, username, password);
ajax.send(发送的数据);
说明：
方式：post或get
url：请求地址或servlet别名
async：异步（true，默认）或同步（false）
username：用户名，不常用
password：密码，不常用
send：
填写发送的数据，没有则写null（可写可不写，用火狐浏览的话必须写）；
GET方法没有发送的数据，所以填null；
POST有单独的请求实体，所以需要填。
下面会有详细解释；

	ajax.open("get", "ajax");
	ajax.send(null);

四、判断Ajax状态码

Ajax状态码：
获取：ajax.readyState
类型：0,1,2,3,4
其中只有ajax状态码为4:表示响应内容被成功接收

ajax.onreadystatechange=function(){
	if(ajax.readyState == 4){
		//获取响应内容
		var result = ajax.responseText;
		//获取元素对象
		var showdiv = document.getElementById("showdiv");
		//修改元素内容
		showdiv.innerHTML = result;
	}
}

说明：
	1、之所以进行ajax状态码判断，是因为不想代码无意义的执行四次；
	2、因为只有在ajax状态码为4时，才能真正获取到响应数据。所以在ajax状态码为4时才进行
数据响应，代码就不会无意义重复执行了，节省了资源。
	3、在进行ajax状态码判断后，还要进行响应状态码判断；

五、判断响应状态码

响应状态码：
获取：ajax.status
200:表示一切ok
404:资源未找到
500:内部服务器错误

if(ajax.status == 200){
	
		//获取响应内容
		var result = ajax.responseText;
		//获取元素对象
		var showdiv = document.getElementById("showdiv");
		//修改元素内容
		showdiv.innerHTML = result;
		
}else if(ajax.status == 404){
	
		var showdiv = document.getElementById("showdiv");
		showdiv.innerHTML = "请求资源不存在";
		
}else if(ajax.status == 500){
	
		var showdiv = document.getElementById("showdiv");
		showdiv.innerHTML = "服务器繁忙";
		
}

说明：
	之所以进行响应状态码判断，是因为当访问失败时(404或500)，不想把错误信息返回给用
户，需要进行处理后返回信息给用户。

六、完整的流程

<script type="text/javascript">
	function getData() {
		//1 创建Ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){
				//火狐
				ajax = new XMLHttpRequest();
			}else if (window.ActiveXObject) {
				//IE6、7
				ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}
			
		//2 复写onreadystatement函数
			ajax.onreadystatechange=function(){

				//4 判断Ajax状态码
				if(ajax.readyState == 4){
					
					//5 判断响应状态码
					if(ajax.status == 200){
						//获取响应内容
						var result = ajax.responseText;
						//获取元素对象
						var showdiv = document.getElementById("showdiv");
						//修改元素内容
						showdiv.innerHTML = result;
						
					}else if(ajax.status == 404){
						var showdiv = document.getElementById("showdiv");
						showdiv.innerHTML = "请求资源不存在";
					}else if(ajax.status == 500){
						var showdiv = document.getElementById("showdiv");
						showdiv.innerHTML = "服务器繁忙";
					}
				}
				
			}
		
		//3 发送请求
			ajax.open("get", "ajax");
			ajax.send(null); 
	}
</script>

<body>
	<h3>Ajax学习</h3>
	<br>
	<input type="button" value="测试" onclick="getData()">
	<div id="showdiv"></div>
</body>

Ajax流程总结

Ajax的概念：
局部刷新技术，不是一门新技术，是多种技术的组合。是浏览器端的技术，可以看做是js；
Ajax的作用：
实现在当前结果页中显示其他请求的相应内容。
Ajax的使用：
Ajax的基本流程：

//创建ajax引擎对象
//复写onreadystatement函数
	//判断ajax状态码
		//判断响应状态码
			//获取响应内容
//发送请求

Ajax的请求方式

get方式：请求实体拼接在URL后面

ajax.open("get", "ajax?"+data, true); //打开请求连接 
ajax.send(null);

post方式：请求实体需要单独的发送

ajax.open("post", "ajax");
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123")

setRequestHeader必须设置，其中的属性是form表单中enctype="application/x-www-form-urlencoded"的属性，代表以键值对形式提交。

ajax的响应数据格式

一、json

概念:
1、json是一种声明格式；
2、使用GSON进行数据格式转换，通过resp.getWriter().write()返回；
3、在js中通过eval()，进行转换；
获取返回值的方式：

var result = ajax.responseText;

第一种方式：
servlet中返回数据：

resp.getWriter().write("var obj={};obj.name='"+user.getUname()+"'");

js代码中获取返回值：

eval(result);
alert(obj.name);

注意：
	这种方式需要在servlet中手动将数据转换为json格式，再返回；且在js中获取只能以obj 
为对象名获取；
缺点:
	手动转换json格式比较麻烦，而且只能以obj为名获取，灵活性差。

第二种方式：
servlet中返回数据：

resp.getWriter().write( "{name: '"+user.getUname()+"'}" );

js代码中获取返回值：

eval("var obj=" +result);
alert(obj.name);

注意：
	这种方式允许在js中自己设置返回对象名，具有灵活性；

第三种方式：
servlet中返回数据：
导入gson.jar，不管是list还是对象都可以转换

user为用户实体类的对象。
resp.getWriter().write( new Gson().toJson(user) );

js代码中获取返回值：

eval("var u="+result);

注意：
	这种方式是使用Gson.jar进行转换Json格式，不用自己转换json，方便，而且允许自己在js
中设置返回数据的对象名；

二、XML

获取返回值方式：

var doc = ajax.responseXML;

第一种方式：

servlet中返回数据：

resp.getWriter().write("
	<user>  
		<uid>1</uid>  
		<name>张三</name> 
		<price>1</price>  
	</user>
");

js代码中获取返回值：

doc.getElementsByTagName("name")[0].innerHTML；

第二种方式：
新建XML.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<user>
	<name>李四</name>
	<pwd>123</pwd>
</user>

js代码中获取返回值：

doc.getElementsByTagName("name")[0].innerHTML

因为写jsp的过程相当于在写servlet。

Ajax的封装

jQuery中的ajax就是对ajax的封装。
ajax也可以自己封装为一个js文件，供自己使用。

更多推荐

JSP学习之Ajax详细教学

JSP学习之Ajax详细教学

Ajax的概念和原理

Ajax基本使用流程

Ajax流程总结

Ajax的请求方式

ajax的响应数据格式

Ajax的封装

发布评论取消回复

最近发表

热门文章

标签列表

JSP学习之Ajax详细教学

Ajax的概念和原理

Ajax基本使用流程

Ajax流程总结

Ajax的请求方式

ajax的响应数据格式

Ajax的封装

相关文章

发布评论取消回复

最近发表

热门文章

标签列表