Ajax技术 （原生）

1.Ajax的操作流程

<!-- 
	Ajax学习：
		1、ajax的概念
			局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
		2、ajax的作用
			实现在当前结果页中显示其他请求的响应内容
		3、ajax的使用
			ajax的基本流程
		//创建ajax引擎对象
				//复写onreadystatement函数
					//判断ajax状态码
						//判断响应状态码
							//获取响应内容(响应内容的格式)
								//普通字符串：responseText
								//json(重点)：responseText
									其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法
									将接受的字符串数据直接转换为js的对象
									
									json格式：
										var 对象名={
												属性名:属性值,
												属性名:属性值,
												……
											}
									
								//XML数据：responseXML.返回document对象
									通过document对象将数据从xml中获取出来
							//处理响应内容(js操作文档结构)
				//发送请求
					//get请求
						get的请求实体拼接在URL后面，？隔开，键值对
						ajax.open("get","url");
						ajax.send(null);
					//post请求
						有单独的请求实体
						ajax.open("post", "url");
						ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
						ajax.send("name=张三&pwd=123");
			ajax的状态码
				ajax状态码:
					readyState：0,1,2,3,4
						4: 表示响应内容被成功接收
				响应状态码:
					status
					200:表示一切OK
					404:资源未找到
					500：内部服务器错误
			ajax的异步和同步
				ajax.open(method,urL,async)
				async：设置同步代码执行还是异步代码执行
					  true代表异步，默认是异步
					  false代表同步
 -->
<script type="text/javascript">
function getData(){		
	//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){//火狐
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){//ie
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
	
		//复写onreadystatement函数
		ajax.onreadystatechange=function(){
			//判断Ajax状态吗
			if(ajax.readyState==4){
				//判断响应状态吗
				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="服务器繁忙";
				}
			}else{
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
			}
		}
	//发送请求
	ajax.open("get","ajax",true);
	ajax.send(null);
	alert("哈哈");
}
</script>

2.请求方式

ajax.open(method,url,async) ajax.send("请求数据") 

解释:

   method：表示请求的方式，值为get/post

   url:表示请求地址，一般为要请求的servlet的别名。

   async:表示异步还是同步请求，true表示异步，false表示同步， 默认为异步。

注意：

  如果请求方式是get方式，则请求数据需要拼接在url的后面， 以？隔开，键值对。并且send中要写null

  如果是post请求方式，则在send方法中书写请求数据即可。并 且要声明数据的提交格式为键值对。

示例：

//使用get方式 
ajax.open("get","user?uname="+uname,true); 
ajax.send(null); 
//post方式 
ajax.open("post","user", true); 
    //设置请求数据的格式 
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded "); 
ajax.send("un="+uname);

3.响应格式

（1）普通文本： 后台在接收到ajax请求后，处理后直接响应普通字符串给ajax

（2）josn数据： 后台在接收到ajax请求后，处理后响应json格式的字符串给 ajax ajax处理代码中使用eval()方法将json数据转换为           js对的对象， 将对象中的数据通过js的dom操作显示到页面中。

        注意： json格式： var 对象名={ 键名:值, 键名:值, ........ }

（3）xml数据： 后台在接收到ajax请求后，处理后响应xml格式的字符串给 ajax。

        前台使用ajax.responseXML进行数据接收，返回的是xml文 档对象(document)。 使用document对象将xml中取出并显示到页面中即可 注意： 后台的响应数据格式必须设置成xml格式： resp.setContentType("text/xml;charset=utf-8");

实例（json）：

服务器端（使用Gjson的jar包可直接响应json数据到客户端）：

import java.io.IOException;
import java.util.List;

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

import com.bjsxt.service.UserSrevice;
import com.bjsxt.serviceImp.UserSeviceImp;
import com.bjsxt.vo.Area;
import com.google.gson.Gson;
@WebServlet("/data")
public class DataServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
			req.setCharacterEncoding("utf-8");
		//设置响应编码格式
			resp.setCharacterEncoding("utf-8");
			resp.setContentType("text/html;charset=utf-8");
		//获取请求数据
			String pid=req.getParameter("pid");
			System.out.println(pid);
		//处理请求数据
			UserSrevice us=new UserSeviceImp();
			List<Area> list=us.getAreaInfoService(pid);
			System.out.println(list);
		//响应处理结果
			resp.getWriter().write(new Gson().toJson(list));
		
		
	}
}

客户端（js的eval（）函数可直接将字符串当做js代码执行）：

<script type="text/javascript">
 	//获取数据
 		function getData(){
 			//获取用户请求信息
 			var name=document.getElementById("uname").value;
 			//创建ajax引擎对象
 				var ajax;
 				if(window.XMLHttpRequest){
 					ajax=new XMLHttpRequest();
 				}else if(window.ActiveXObject){
 					ajax=new ActiveXObject("Msxml2.XMLHTTP");
 				}
 			//复写onreadystatechange
 			ajax.onreadystatechange=function(){
 				//判断ajax状态码
 				if(ajax.readyState==4){
 					//判断响应状态码
 					if(ajax.status==200){
 						//获取响应数据
 						var result=ajax.responseText;
 						//通过eval函数将u变为json对象
 							eval("var u="+result);
 						//处理响应数据
 					}
 				}
 			};
 			//发送请求
 			ajax.open("get","user?name="+name);
 			ajax.send(null);
 		}
 </script>