AJAX的使用

Ajax的介绍

Ajax(asynchronous javascript and xml)异步的javascript and xml
ajax技术是七种技术的综合
(xml javascript xmlhttprequest(核心) css dom xstl dhtml)

Ajax引擎是内嵌到浏览器
该ajax引擎可以理解成就是xmlhttprequest。

Ajax应用场景

1.动态加载数据，按需获取数据（树形菜单、联动菜单）
2.改善用户体验（输入内容钱提示，带进度条文件上传）
3.电子商务应用（购物车，邮件订阅）
4.访问第三方服务（访问搜索服务，rss阅读器）

①验证用户名是否可用

创建一个XmlHttpRequest对象

	//该函数用于获得一个XmlHttpRequest对象
	function getXmlHttpRequest(){
		var http_request;
		//创建http_request对象 (XMLHttpRequest)不同的浏览器创建的方法不一样
		if(window.ActiveXObject){
			//ie内核
			http_request=new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			//非ie内核
			http_request=new XMLHttpRequest();
		}
		//可以验证(js中非null为真,null就为假)
		if(http_request){
			return http_request;
		}else{
			return null;			
		}
		
	}

使用open函数打开请求

//先打开一个请求
	//GET表示请求的方式是GET,也可以是POST
	//第二个参数是:向哪个资源(Servlet/Action/jsp)发请求
	//第三个参数:true支持异步,false表示不支持异步	
	//得到用户输入的用户名
	var username=document.getElementById("username").value;		
	//window.alert("/ajax/MyServlet?name="+username);	
	myHttpRequest.open("GET","/ajax/MyServlet?name="+username,true);

指定由哪个函数处理服务器回送的结果(指定由哪个函数处理xmlhttprequest对象发生)

//指定处理服务器返回的结果的函数是谁
		//chuli表示一个函数名
		myHttpRequest.onreadystatechange=chuli;

发送

		//发送到请求,如果是GET请求,则send函数不能发送内容提
		//如果是POST请求,则send函数要发送内容提
		myHttpRequest.send();

写servlet的代码

Servlet代码主要是用于去相应ajax的请求,这里我们需要注意的是
①返回的数据格式可以是text,

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

②如果返回的数据格式是xml的

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

③为了防止浏览器读缓存，最好加上

response.setHeader("Cache-Control", "no-cache");

servlet代码的基本模板是

response.setCharacterEncoding("UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out=response.getWriter();
		//1.先看看能否接收到ajax发送的请求
		String username=request.getParameter("name");
		out.write(“结果文本”);
		out.close();

②省市联动

使用ajax技术

POST发送 XML传递

function showCity(){
		myHttpRequest=getXmlHttpRequest();
		if(myHttpRequest==null){
			window.alert("创建xmlhttprequest对象失败");
			return ;
		}
		
		
		var url="/ajaxcity/ShowCityC1";//使用POST方式提交
		myHttpRequest.open("POST",url,true);
		//告诉服务器，这次提交时POST方法，http请求有内容体
		myHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		myHttpRequest.onreadystatechange=chuli;
		//得到用户选择的省份
		var province=document.getElementById("province").value;
		//window.alert(province);
		myHttpRequest.send("province="+province);
		
		
	}

处理数据

if(myHttpRequest.readyState==4){
			//成功完成
			if(myHttpRequest.status==200){
				var cities=myHttpRequest.responseXML.getElementsByTagName("city");
				//得到city元素节点
				var mycity=document.getElementById("city");
				//每次应该清空一下city元素下的option
				//①
				mycity.options.length=1;
				//②Element.childNodes得到节点树下的节点数组
				//如果不好理解就得到mycity所有子元素，然后删除
				//window.alert(cities.length);
				//js中把cities[i]
				for(var i=0;i<cities.length;i++){
					//js中把cities[i]称为node
					//window.alert(cities[i].firstChild.nodeValue);
					
					
					
					//创建一个option元素
					var cityoption=document.createElement("option");
					//给cityoption设置属性值
					cityoption.setAttribute("value",cities[i].firstChild.nodeValue);
					//再创建一个文本节点
					var cityoptiontext=document.createTextNode(cities[i].firstChild.nodeValue);
					//把该文件节点挂在到cityoption元素节点下
					cityoption.appendChild(cityoptiontext);
					//把cityoptiontext添加到city元素节点
					mycity.appendChild(cityoption);
					
				}
				//window.alert("服务器返回的是"+res);
			}
		}

讨论细节问题

①如果是GET提交

中文乱码

//转换中文乱码
	public static String changeEncoding(String str) {
		try {
			str=new String(str.getBytes("iso-8859-1"),"utf=8");
		} catch (Exception e) {
			// TODO: handle exception
		}
		return str;
	}

②使用POST方式提交

Post提交和get提交区别主要是体现在jsp页面,open方法不一样

myHttpRequest.open("POST","/ajax/MyServlet?name="+username,true);
		//添加指定格式的话,主要作用是告诉服务器，我提交内容是经过Url编码
		myHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//指定处理服务器返回的结果的函数是谁
		//chuli表示一个函数名
		myHttpRequest.onreadystatechange=chuli;
		//发送到请求,如果是GET请求,则send函数不能发送内容体
		//如果是POST请求,则send函数要发送内容体
		myHttpRequest.send("intro=我是一个好人&mail=hyf@qq.com");

如何选择使用Gei或post

如果数据量比较小，可以使用get
如果数据量比较大，又要保证安全，则使用post方法