Rotark

阿里云Java学习路线 - Ajax快速入门笔记

学习链接

学习链接
1、Ajax简介、异步与同步
2、Ajax的应用场景和优缺点
3、Ajax发送异步请求（四步操作）
- 第一步，得到XMLHttpRequest
- 第二步、打开与服务器的连接
- 第三步、发送请求
- 第四步、响应请求
- Ajax第一例：helloworld
- Ajax第二例：发送POST请求
- Ajax第三例：用户名是否已被注册
- Ajax第四例：响应内容为xml
- Ajax第五例：省市联动
4、XStream工具
5、JSON的概述
6、json-lib的应用
7、打包ajax生成小工具

1、Ajax简介、异步与同步

asynchronous javascript and xml ：异步的js和xml，能使用js访问服务器，并且是异步访问；
服务器给客户端的响应一般是整个页面：一个html完整页面，但在ajax中因为是局部刷新，那么服务器就不再响应整个页面，而只是数据

返回的数据可以是text纯文本和xml和json

异步交互和同步交互

同步：发一个请求，就要等待服务器的响应结束，然后才能发第二个请求，刷新的是整个页面；
异步：发一个请求后，无须等待服务器的响应，就可以发第二个请求，可以使用js接收服务器的响应，然后使用js来局部刷新；

局部刷新

<head>
<script type="text/javascript">
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
	//得到btn元素
	var btn = docunment.getElementById("btn");
	//给btn的click事件注册监听
	btn.onclock = function(){//在按钮被点击时执行
		//获取h1元素对应的DOM对象
		var h1 = document,getElementById("h1");
		// 给h1添加内容
		h1.innerHTML = "Hello JS!!!";
	}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>

2、Ajax的应用场景和优缺点

搜索框的联想下拉列表
注册页面检测
Ajax优缺点：
优点：
1、异步交互，增强了用户体验；
2、性能：因为服务器无需再响应整个页面，只需响应部分内容，服务器压力减轻了；
缺点：
1、不能应用在所有场景；
2、增加了服务器响应次数。

3、Ajax发送异步请求（四步操作）

第一步，得到XMLHttpRequest

ajax只需要学习一个对象：XMLHttpRequest
得到XMLHttpRequest

//大多数浏览器都支持：
	var xmlHttp = new XMLHttpRequest();
//IE6.0 
	var xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
//IE5.5及更早版本的IE
	var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

编写创建XMLHttpRequest对象的函数

function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}

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

xmlHttp.open()用来打开与服务器的连接，需要三个参数：

请求的方式：可以是GET或POST
请求的URL：指定服务器端资源
请求是否为异步，如果为true表示发送异步请求，否则同步请求。
eg. xmlHttp.open(“GET”,“资源URL”,true);

第三步、发送请求

xmlHttp.send(null); 如果不给参数可能造成部分浏览器无法发送。

参数：就是请求体内容
如果是GET请求，必须给出null
PSOT请求，xmlHttp.send(“username=zhangsan&password=123”);

第四步、响应请求

在xmlHttp对象的一个事件上注册监听器：onreadystatechange

xmlHttp对象一共有五个状态：
0状态：初始化，没有调用open()方法；
1状态：请求开始，调用了open()方法，但还没有调用send()方法；
2状态：调用完了send()方法；
3状态：服务器已经开始响应，但不表示响应结束了；
4状态：服务器响应结束。
通常只关注4状态。

得到xmlHttp对象的状态：

	var state = xmlHttp.readyState;//可能是0、1、2、3、4

得到服务器响应的状态码

	var status = xmlHttp.status;	//例如200、404、500

得到服务器响应的内容

	var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
	var content = xmlHttp.responseXML;//得到服务器的响应的xml格式的内容，它是Document对象了

示例

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

Ajax第一例：helloworld

Servlet

import java.io.IOException;
public class AServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throw ServletException, IOException{
		System.out.println("Hello Ajax!");
		response.getWriter().print("Hello Ajax!!!");
	}
}

ajax.jsp

<head>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();//大多数浏览器
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
	//得到btn元素
	var btn = docunment.getElementById("btn");
	//给btn的click事件注册监听
	btn.onclock = function(){//给按钮的点击事件注册监听，在按钮被点击时执行
		/*
		ajax四步操作，得到服务器响应，把响应结果显示到h1元素中
		*/
		// 1、得到异步对象
		var xmlHttp = createXMLHttpRequest();
		/* 2、打开与服务器的连接
			* 指定请求方式
			* 指定请求的url
			* 指定是否为异步请求
		*/
		xmlHttp.open("GET","",true);		
		// 3、发送请求
		xmlHttp.send(null);//GET请求没有请求体，但也要给出null
		// 4、给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadtstatechange = function() {//当xmlHttp的状态发生变化时执行
			//双重判断：xmlHttp的状态为4，以及服务器响应的状态码为200
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			//获取服务器的响应内容
			var text = xmlHttp.responseText;
			//获取h1元素对应的DOM对象
			var h1 = document,getElementById("h1");
			// 给h1添加内容
			h1.innerHTML = text;
			}
		}
	}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>

Ajax第二例：发送POST请求

如果发送请求时需要带有参数，一般都用POST请求
POST请求的请求头

Content-Type: application/x-www-form-urlencoded

注意：

open：xmlHttp.open(“POST”…);
添加一步：设置Content-Type请求头
xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

send：xmlHttp.send(“username=zhangsan&password=123”);//发送请求时指定请求体

Servlet

import java.io.IOException;
public class AServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throw ServletException, IOException{
		System.out.println("Hello Ajax!");
		response.getWriter().print("Hello Ajax!!!");
	}
	//在Servlet中新增函数
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throw ServletException, IOException{
		response.setContentType("text/html;charset=utf-8");//响应的编码
		request.setCharacterEncoding("UTF-8");//请求的编码
		String username = request.getParameter("username");//获取请求参数
		System.out.println("POST：Hello Ajax!" + username);
		response.getWriter().print("POST：Hello Ajax!!!" + username);
	}
}

ajax2.jsp

<head>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();//大多数浏览器
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
	//得到btn元素
	var btn = docunment.getElementById("btn");
	//给btn的click事件注册监听
	btn.onclock = function(){//给按钮的点击事件注册监听，在按钮被点击时执行
		/*
		ajax四步操作，得到服务器响应，把响应结果显示到h1元素中
		*/
		// 1、得到异步对象
		var xmlHttp = createXMLHttpRequest();
		/* 2、打开与服务器的连接
			* 指定请求方式
			* 指定请求的url
			* 指定是否为异步请求
			* 修改open方法，指定请求方式为POST
		*/
		xmlHttp.open("POST","",true);	
		// 设置请求头：Content-Type
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	
		// 3、发送请求
		xmlHttp.send("username=张三&password=123");//
		// 4、给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadtstatechange = function() {//当xmlHttp的状态发生变化时执行
			//双重判断：xmlHttp的状态为4，以及服务器响应的状态码为200
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			//获取服务器的响应内容
			var text = xmlHttp.responseText;
			//获取h1元素对应的DOM对象
			var h1 = document,getElementById("h1");
			// 给h1添加内容
			h1.innerHTML = text;
			}
		}
	}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>

Ajax第三例：用户名是否已被注册

1、编写页面

ajax3.jsp 给出注册表单页面、给用户名文本框添加onblur事件的监听、获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
如果为1：在文本框后显示“用户名已被注册”
如果为0：不做操作

2、编写Servlet

ValidateUsernameServlet
获取客户端传递的用户名参数，判断是否为itcast
是，返回1/否，返回0
ajax3.jsp

<head>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();//大多数浏览器
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
	//得到文本框
	var userEle = docunment.getElementById("usernameEle");
	//给文本框的失去焦点事件注册监听
	userEle.onblur = function(){
		/*
		ajax四步操作，得到服务器响应，把响应结果显示到h1元素中
		*/
		// 1、得到异步对象
		var xmlHttp = createXMLHttpRequest();
		/* 2、打开与服务器的连接
			* 指定请求方式
			* 指定请求的url
			* 指定是否为异步请求
			* 修改open方法，指定请求方式为POST
		*/
		xmlHttp.open("POST","",true);	
		// 设置请求头：Content-Type
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	
		// 3、发送请求
		xmlHttp.send("username="+userEle.value);//
		// 4、给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadtstatechange = function() {//当xmlHttp的状态发生变化时执行
			//双重判断：xmlHttp的状态为4，以及服务器响应的状态码为200
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//获取服务器的响应内容
				var text = xmlHttp.responseText;
				//获取span，添加内容
				var span = document.getElementById("errorSpan");
				if(text == "1"){
					span.innerHTML = "用户名已被注册";
				} else {
					span.innerHTML = "";
				}
			}
		}
	}
};
</script>
</head>
<body>
<h1 >演示用户名是否被注册</h1>
<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="注册">
</form>
</body>

Servlet

import java.io.IOException;
public class AServlet extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throw ServletException, IOException{
		response.setContentType("text/html;charset=utf-8");//响应的编码
		request.setCharacterEncoding("UTF-8");//请求的编码
		/*
		 * 1、获取参数username
		 * 2、判断是否为itcast
		 * 3、如果是：响应1
		 * 4、如果不是：响应0
		*/
		String username = request.getParameter("username");
		if(username.euqalsIgnoreCase("itcast")){
			response.getWriter().point("1");
		} else {
			response.getWriter.print("0");
		}
	}
}

Ajax第四例：响应内容为xml

服务器端：
设置响应头： Content-Type，其值为：text/xml;character=utf-8
客户端：
var doc = xmlHttp.responseXML;//得到的是Document对象
Servlet

import java.io.IOException;
public class AServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throw ServletException, IOException{
		String xml = ""+
					""+
					"zhangsan"+
					"23"+
					"male"+
					""+
					"";
		response.setContentType("text/xml;character=utf-8");
		response.getWriter().print(xml);
	}
}

ajax4.jsp

<head>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();//大多数浏览器
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}
window.onload = function(){//在文档加载完成后马上执行，实际为监听器
	//得到btn元素
	var btn = docunment.getElementById("btn");
	//给btn的click事件注册监听
	btn.onclock = function(){//给按钮的点击事件注册监听，在按钮被点击时执行
		/*
		ajax四步操作，得到服务器响应，把响应结果显示到h1元素中
		*/
		// 1、得到异步对象
		var xmlHttp = createXMLHttpRequest();
		/* 2、打开与服务器的连接
			* 指定请求方式
			* 指定请求的url
			* 指定是否为异步请求
		*/
		xmlHttp.open("GET","",true);		
		// 3、发送请求
		xmlHttp.send(null);//GET请求没有请求体，但也要给出null
		// 4、给异步对象的onreadystatechange事件注册监听器
		xmlHttp.onreadtstatechange = function() {//当xmlHttp的状态发生变化时执行
			//双重判断：xmlHttp的状态为4，以及服务器响应的状态码为200
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				//获取服务器的响应结果(xml)
				var doc = xmlHttp.responseXML;
				//查询文档下名为student的所有元素，得到数组，再取下标0元素
				var ele = doc.getElementsByTagName("student")[0];
				var number = ele.getAttribute("number");//获取元素名为number的属性值
				var name，age,sex;
				if(window.addEventListener){
					//其他浏览器支持
					name = ele.getElementsByTagName("name")[0].textContent;
					age = ele.getElementsByTagName("age")[0].textContent;
					sex = ele.getElementsByTagName("sex")[0].textContent;
				} else {
					//IE支持
					name = ele.getElementsByTagName("name")[0].text;
					age = ele.getElementsByTagName("age")[0].text;
					sex = ele.getElementsByTagName("sex")[0].text;
				}
				var text = number + "," + name + "," + age + "," + sex;
				document.getElementById("h1").innerHTML = text;
			}
		}
	}
};
</script>

</head>
<body>
<button id="btn">点击这里</button>
<h1 id='h1'></h1>
</body>

Ajax第五例：省市联动

Servlet用到了doc4j

1、页面

<select name="province">
	<option>===请选择省份===option>
select>
<select name="city">
	<option>==请选择城市==option>
select>

2、ProvinceServlet

ProvinceServlet：当页面加载完毕后马上请求这个Servlet。
它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端。

3、页面的工作

获取这个字符串，使用逗号分隔，得到数组
循环遍历每个字符串（省份的名称），使用每个字符串创建一个 < option >元素添加到< select name=“province”>这个元素中

4、CityServlet

当页面选择某个省份时，发送请求。
得到省份的名称，加载china.xml，查询出该省份对应的元素对象，把这个元素转换成xml字符串，发送给客户端

5、页面的工作

把< select name=“city” >中的所有子元素删除，但不要删除< option >=== 请选择城市 ===< option >
得到服务器的响应结果doc
获取所有的< city > 子元素，循环遍历，得到内容
使用每个< city >的内容创建一个< option >元素，添加到< select name=“city” >

ajax5.jsp

<script>
/*
 * 1、在文档加载完毕时发送请求，得到所用省份名称，显示在元素中
*/
//创建异步对象
function createXMLHttpRequest() {
	try{
		return new XMLHttpRequest();//大多数浏览器
	} catch(e) {
		try {
			return new ActiveXObject("Msxml12.XMLHTTP");//IE6.0
		} catch(e) {
			try {
				return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
			} catch(e) {
				alert("创建XMLHttpRequest对象失败");
				throw e;
			}
		}
	}
}
window.onload = function() {
	/*
	 * ajax四步：请求ProvinceServlet，得到所有省份名称
	 * 使用每个省份名称创建一个
			for(var i = 0; i < arr.length; i++){
				//创建一个指定名称元素
				var op = document.createElement("option");
				op.value = arr[i];//设置op的实际值为当前的省份名称
				var textNode = document.createTextNode(arr[i]);//创建文本节点
				op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
				document.getElementById("p").appendChild(op);	
			}
		}
	};
	
	/*
	 * 给
	*/
	var proSelect = document.getElementById("p");
	proSelect.onchange = function() {
		var xmlHttp = createXMLHttpRequest();
		xmlHttp.open("POST","",true);
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.send("pname="+proSelect.value);//把下拉列表中选择的值发送给服务器
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				/*
				 * 把中
				for(var i = 0; i < cityEleList .length; i++){
					var cityEle = cityEleList[i];//得到每个city元素
					var cityName;
					// 获取市名称
					if(window.addEventListener){//处理浏览器差异
						cityName = cityEle.textContent;//支持FireFox等浏览器
					} else {
						cityName = cityEle.text;//支持IE
					}
					var op =document.createElement("option");
					op.value = cityName;
					// 创建文本节点
					var textNode = document.createTextNode(cityName);
					//把文本节点追加到op元素中
					op.appendChild(textNode);
					//把op添加到

阿里云Java学习路线 - Ajax快速入门 笔记

学习链接

目录

1、Ajax简介、异步与同步

2、Ajax的应用场景和优缺点

3、Ajax发送异步请求（四步操作）

第一步，得到XMLHttpRequest

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

第三步、发送请求

第四步、响应请求

Ajax第一例：helloworld

Ajax第二例：发送POST请求

Ajax第三例：用户名是否已被注册

Ajax第四例：响应内容为xml

Ajax第五例：省市联动

阿里云Java学习路线 - Ajax快速入门笔记