五个实例，学会ajax

第一个实例:ajxa入门

有些刚接触ajax的人感觉ajax很神奇，其实他在javaScript中算是比较的简单的，应为他的方式比较固定，自己实际操作几次，绝对可以掌握。这个例子很简单，有时间我会把自己做的三级联动的省市县的例子粘出来，那个也不是很难，相互学习。

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），通常在web应用中,界面的请求无刷新，其实现在的js框架有很多，重量级的有EXTJS，轻量级的有jquery,他们封装的都很好，也许在实际的项目中手写js的地方不多，但是，原理还是必须学的，明白原理，一同百通。

第一步，建立一个web项目，具体怎么建就不再重复。然后在见几个文件，如图

第二步，编写servlet (当然也可以是action，随便你是什么项目，原理是一样的)相应的记过很简单，就是把你response相应的一句话话输出到页面中。代码如下：

package ajax.test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class HelloAjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {

		doPost(request,response);
	}

	public void doPost(HttpServletRequest request,IOException {
		System.out.println("hello ajax");
		response.getWriter().write("this is my first ajax");
	}

}

配置，web.xml文件；

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>HelloAjaxServlet</servlet-name>
    <servlet-class>ajax.test.HelloAjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>HelloAjaxServlet</servlet-name>
    <url-pattern>/HelloAjax.do</url-pattern>
  </servlet-mapping>	

</web-app>

第三步，编写html页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

window.onload = init;
function init(){
	var btn = document.getElementById("getData");
	btn.onclick = getData;
	
};

function getData(){
	
	//1.创建XMLhttpRequest对象
	var xhr = XMLHttpRequest();

	//2.通过open方法确定要访问的页面
	//第一个参数，请求的方法，第二个请求地址（即servlet），第三个，是否是异步
	xhr.open("GET","HelloAjax.do",true);
	//在onreadystatechang事件中处理请求
	xhr.onreadystatechange = function(){
	
		//readytstate是在状态为4（请求结束）并且status==200(请求没有错误)
		
		if(xhr.readyState==4&&xhr.status==200){
			//获取相应的文本，通过xhr的responseText可以获取文本信息，包括xml的标签
			//通过responseXML可以获取xml的信息 ，只能获取xml对象
			document.getElementById("data").innerHTML = xhr.responseText;
		}
	};
	//3.发送请求，send中传入相应参数，这个参数只有在POST请求的时候有效
	//GET的参数直接在请求的地址中通过问号（？）（多个参数用&f分隔）来传递。
	xhr.send();
	
};


</script>
</head>
<body>
<input type="button" value="获取数据" id="getData"/>

<div id ="data"></div>
</body>
</html>

第四步，执行后的返回结果

注意一点，GET方式提交后中文汉字会有问题，POST提交随后会继续写帖子。

第二个实例：将数据转换为Xml格式来通过ajax调到前台（目前通常使用的是json）其实当年java和xml才是一对“情侣”，可以后来被json撬了。

例子很简单，就是通过一个下拉选框传入不同的组号，获得与之对应的数据集合。然后界面无刷新显示到界面中的table或div中。

第一步：模拟数据用Map模拟三组数据。首先得创建一个model

model代码：

package ajax.emp;

public class Emp {
	
	private int id;
	private String name;
	private int age;
	private double salary;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public double getSalary() {
		return salary;
	}
	public void setSalary(double salary) {
		this.salary = salary;
	}
	public Emp() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Emp(int id,String name,int age,double salary) {
		super();
		this.id = id;
		this.name = name;
		this.age = age;
		this.salary = salary;
	}
}

第二步：编写一个servlet或struts.(这里用的是servlet，其原理是一样的，之后的例子会有)，操作步骤在注释中。servlet配置忽略不写。

servlet代码：

package ajax.test;

import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import ajax.emp.Emp;

@SuppressWarnings("serial")
public class EmpServlet extends HttpServlet {

	public void doGet(HttpServletRequest request,response);
	}
	public void doPost(HttpServletRequest request,IOException {
		//1.先模拟多组Emp的Map集合 
		Map<Integer,List<Emp>> empMap = new HashMap<Integer,List<Emp>>();
		
		List<Emp> emps1 = new ArrayList<Emp>();
		
		emps1.add(new Emp(1,"张三",10,11000));
		emps1.add(new Emp(2,"李四",11,12000));
		emps1.add(new Emp(3,"王五",12,13000));
		emps1.add(new Emp(4,"赵六",13,14000));
		
		empMap.put(1,emps1);
		
		List<Emp> emps2 = new ArrayList<Emp>();
		
		emps2.add(new Emp(21,"2张三",20,21000));
		emps2.add(new Emp(22,"2李四",21,22000));
		emps2.add(new Emp(23,"2王五",22,23000));
		emps2.add(new Emp(24,"2赵六",23,24000));
		
		empMap.put(2,emps2);
		
		List<Emp> emps3 = new ArrayList<Emp>();
		
		emps3.add(new Emp(31,"3张三",30,31000));
		emps3.add(new Emp(32,"3李四",31,32000));
		emps3.add(new Emp(33,"3王五",32,33000));
		emps3.add(new Emp(34,"3赵六",33,34000));
		
		empMap.put(3,emps3);
		//ok，数据模拟完毕。
		//1.设置返回格式为xml的contexttype（也可以返回json,先做xml的）
		response.setContentType("text/xml;charset=utf-8");
		//2.获取write对象
		Writer writerout = response.getWriter();
		//3.获取有页面传递进来的id
		int id = Integer.parseInt(request.getParameter("id"));
		//System.out.println(id);
		
		//4.获取emp列表对象
		List<Emp> emplist = empMap.get(id);
		
		//5.将emp对象转换成xml，然后传入html中。（只要是拼接字符串使之成为xml格式）
		
		StringBuffer stringBuffer = new StringBuffer();
		stringBuffer.append("<emps>");
		for(Emp e:emplist){
			stringBuffer.append("<emp>");
			stringBuffer.append("<id>").append(e.getId()).append("</id>");
			stringBuffer.append("<name>").append(e.getName()).append("</name>");
			stringBuffer.append("<age>").append(e.getAge()).append("</age>");
			stringBuffer.append("<salary>").append(e.getSalary()).append("</salary>");
			stringBuffer.append("</emp>");
		}
		
		stringBuffer.append("</emps>");
		
		//6.通过writerouts写入html
		//System.out.println(stringBuffer);
		writerout.write(stringBuffer.toString());
	}
}

第三步：编写页面的ajax代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = init;
function init(){
	//1.获取下拉菜单emp组的节点（注释是为了检测代码是否执行写的）
	var empNode = document.getElementById("empselect");
	//alert(emp); 
	//2.为节点创建onchange方法
	empNode.onchange = getEmp;
	//3.创建一个getEmp的方法来处理
};

//创建一个getEmp的方法
function getEmp(){

	var id = this.value;
	//alert(id);
	//1.获取xhr
	var xhr = new XMLHttpRequest();
	//alert(xhr);
	//通过POST方式提交，参数传递与GET不同
	xhr.open("POST","/ajax/getEmp",true);
	
	xhr.onreadystatechange = function(){
	
		if(xhr.readyState==4&&xhr.status==200){
			//获取返回xml的节点
			var xmlDoc = xhr.responseXML;
			//alert(xmlDoc);
			//获取所有的Emp节点(这个节点是传入得XML流的节点。并不是html页面的具体节点)
			var emps = xmlDoc.getElementsByTagName("emp");
			//遍历所有节点，获得id name age...等信息
			//alert(emps);
			var node = " ";
			
			for(var i=0;i<emps.length;i++){
			//alert((emps[i].getElementsByTagName("name"))[0].firstChild.nodeValue);
				node += "<tr><td>"+getValueByProp(emps[i],"id")+"</td>"+
						"<td>"+getValueByProp(emps[i],"name")+"</td>"+	
						"<td>"+getValueByProp(emps[i],"age")+"</td>"+
						"<td>"+getValueByProp(emps[i],"salary")+"</td></tr>";
			}	
			//写入到table中//当然也可以写到你自己定义的div中
			document.getElementById("empData").innerHTML = node;		
		}
	};
	//POST传入参数（可以参考w3c网站）
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send("id="+id);
};
//写一个方法来遍历传入的xml的数据
function getValueByProp(node,prop){
	return (node.getElementsByTagName(prop))[0].firstChild.nodeValue;
};

</script>
</head>
<body>
<h2>从后台获取Emp的分组数据</h2>
<hr>
<select id="empselect">
	<option value="1">第1组</option>
	<option value="2">第2组</option>
	<option value="3">第3组</option>
</select>

<div >
//将数据显示在表格中。
 <table id="empData" border="1"width="400">

</table>
</div>
</body>
</html>

第四步，结果截图：

第三个实例：将数据转换为Json格式来通过ajax调到前台页面

第一，准备数据，数据还是上面xml的数据，

第二，servlet中拼接的方式与上面不同，之前是拼xml，这次是拼json,还是就是放回数据的格式不同，这里是使用原声的javascript

早已有很多工具了，比较快的有xstream,jackson 和阿里巴巴的温少的fastjson(目前最快的转换工具)，其实就是将我们的拼接字符串打包起来，传入对象或集合就可以获得json字符串了，反之也可以。

response.setContentType("text/html;charset=utf-8");

package ajax.test;

import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import ajax.emp.Emp;

@SuppressWarnings("serial")
public class EmpJsonServlet extends HttpServlet {

	public void doGet(HttpServletRequest request,emps3);
		//ok，数据模拟完毕。
		//1.设置返回格式为json的contexttype（也可以返回json,先做xml的）这里与之前的不同。除了拼接不同，其余都一样，返回一个字符串。
		response.setContentType("text/html;charset=utf-8");
		//2.获取write对象
		Writer writerout = response.getWriter();
		//3.获取传递进来的id
		int id = Integer.parseInt(request.getParameter("id"));
		//System.out.println(id);
		
		//4.获取emp列表对象
		List<Emp> emplist = empMap.get(id);
		
		//5.将emp对象转换成json，然后传入html中。（只要是拼接字符串使之成为json格式）
		
		StringBuffer stringBuffer = new StringBuffer();
		stringBuffer.append("[");
		
		int index = 0;
		for(Emp e:emplist){
			if(index==0){

				stringBuffer.append("{");
				index++;
			}else{
				
				stringBuffer.append(",{");
			}
			stringBuffer.append("id:").append(e.getId()).append(",");
			stringBuffer.append("name:\"").append(e.getName()).append("\",");
			stringBuffer.append("age:").append(e.getAge()).append(",");
			stringBuffer.append("salary:").append(e.getSalary());
			stringBuffer.append("}");
		}
		
		stringBuffer.append("]");
		
		//6.通过writerouts写入html
		//System.out.println(stringBuffer);
		writerout.write(stringBuffer.toString());
	}
}

第三,html页面，变化也不太大，这里将传出的json字符串转化成对象数组，转化的方式就是eval()函数，

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = init;
function init(){
	//1.获取emp组的节点
	var empNode = document.getElementById("empselect");
	//alert(emp); 
	//2.为节点创建onchange方法
	empNode.onchange = getEmp;
	//3.创建一个getEmp的方法来处理
};

function getEmp(){

	var id = this.value;
	//alert(id);
	//1.获取xhr
	var xhr = new XMLHttpRequest();
	//alert(xhr);
	//通过POST方式提交，参数传递与GET不同
	xhr.open("POST","/ajax/getEmpJson",true);
	
	xhr.onreadystatechange = function(){
	
		if(xhr.readyState==4&&xhr.status==200){
			//获取返回json数据
			var xmlDoc = xhr.responseText;
			//这是返回的是一个json字符串，并不是对象，因此需要转换成对象。
			//可以用一个经典的函数eval();
			//eval()函数简单说来是一个运算函数或执行函数，这里可以叫一个字符串转换成对象数组，
			//alert(xmlDoc);
			
			var emps = eval(xmlDoc);
			//alert(emps);
			
			//遍历emps这个对象数组
			var node = " ";
			for(var i=0;i<emps.length;i++){
				//node += emps[i].id
				node += "<tr><td>"+emps[i].id+"</td>"+
						"<td>"+emps[i].name+"</td>"+	
						"<td>"+emps[i].age+"</td>"+
						"<td>"+emps[i].salary+"</td></tr>";
			}
			//写入到table中//当然也可以写到你自己定义的div中
			document.getElementById("empData").innerHTML = node;		
		}
	};
	//POST传入参数
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.send("id="+id);
};
</script>
</head>
<body>
<h2>从后台获取Emp的分组数据</h2>
<hr>
<select id="empselect">
	<option value="1">第1组</option>
	<option value="2">第2组</option>
	<option value="3">第3组</option>
</select>

<div >
<table id="empData" border="1"width="400">
</table>
</div>
</body>
</html>

第四，最后结果同第三是一样的，可以正常的显示在页面中，

第四，

原文链接：https://www.f2er.com/ajax/165110.html

五个实例，学会ajax

猜你在找的Ajax相关文章