JavaScript-ajax(附java遍历器回顾)

本文链接：https://blog.csdn.net/woyunowuyuda/article/details/38777333

ajax是异步JavaScript XML的简称，可以实现在不更新整个页面的情况下，局部更新数据。之前的ajax采用hack的方式实现，现在利用XMLHttpRequest技术实现。今天，我们初步探讨ajax的用法。由于ajax需要从服务器获取数据，本文采用jsp和ajax相结合的方式。

本节要点：

<span style="font-family:Microsoft YaHei;">//1.XMLHttpRequest的创建和使用
//2.ajax的同步和异步
//3.ajax的get和post方法
//4.对ajax进行封装
//5.复习java迭代器的知识
//6.for-in的用法
//7.回调函数callback的用法</span>

本节用到的jsp代码

<span style="font-family:Microsoft YaHei;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
 	<%
		out.println(new Date());
  	 %> 
  </body>
</html></span>

1.XMLHttpRequest的创建

<span style="font-family:Microsoft YaHei;">var xhr;
//这个函数创建一个兼容的XMLHttpRequest
function createXHR(){
	if(window.XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	}else{
		//兼容低版本IE
		return new ActiveXOject("Microsoft.XMLHTTP");
	}
}</span>

2.利用GET方式进行提交

<span style="font-family:Microsoft YaHei;">//用get方式提交
//实现在document上按鼠标左键即可更新服务器时间
document.addEventListener("click",function(){
	//创建HTR实例
	var htr;
	if(window.XMLHttpRequest != "undefined"){
		htr = new XMLHttpRequest();
	}else{
		//兼容低版本IE浏览器
		htr = new ActiveXObject("Microsoft.XMLHTTP");	
	}
	var bodyStr = document.getElementsByTagName("body")[0];//HTML DOM可以直接用document.body
	htr.onreadystatechange = function(){
		//htr.readyState表示XMLHttpRequest的状态
		//htr.status表示访问的状态，其中404代表URL不可达
		if(htr.readyState == 4 && htr.status == 200){
			bodyStr.innerHTML = htr.responseText;
		}
	};
	//利用GET方法提交请求,这里的GET不区分大小写
	//true表示异步，而且也是大多数情况下使用
	//false表示同步，而且htr.onreadystatechange()事件只能在异步中发生
	//得到的数据可能是缓存的结果，所以加一个随机值
	htr.open("GET","index.jsp?rand=" + Math.random() + "&t=efe",true);
	//send方法在get方法中不用传参数，而在post方法中需要
	htr.send();
	//htr.abort();     //取消异步
	
},false);</span>

3.利用POST方式进行提交

<span style="font-family:Microsoft YaHei;">//用post的方式提交
document.addEventListener("click",function(){
	var xhr;
	if(window.XMLHttpRequest != "undefined"){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhr.onreadystatechange = function(){
		var bodyStr = document.body;
		bodyStr.innerHTML = xhr.responseText;
	}
	xhr.open("POST", "index.jsp", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send("a=A&b=B&c=C");
},false);
</span>

4.对ajax方法进行封装

<span style="font-family:Microsoft YaHei;">//对ajax进行封装
var xhr;
//这个函数创建一个兼容的XMLHttpRequest
function createXHR(){
	if(window.XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	}else{
		//兼容低版本IE
		return new ActiveXOject("Microsoft.XMLHTTP");
	}
}
function ajax(obj){
	//获取XMLHttpRequest
	xhr = createXHR();
	//paramsStr为格式化后加载在get和post方法中的参数
	var paramsStr = null;
	//加入随机数避免缓存
	var url = obj.url + "rand=" +Math.random();
	//格式化参数
	if(obj.params){
		var paramsStrs = [];
		for(var i in obj.params){		//在不知道结构的情况下，遍历其key
			//避免特殊字符如&对结果的影响
			paramsStrs.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj.params[i]));
		}
		paramsStr =  paramsStrs.join("&");		//以&连接数组
	}
	//同步取消事件，利用回调函数在外部操控结果
	if(obj.async)
		xhr.onreadystatechange = obj.callback;
	//GET和POST方法
	if(obj.async == "GET"){
		if(paramsStr != null){
			xhr.open(obj.method,obj.url + "?rand=" + Math.random() + paramsStr,obj.async);
			xhr.send();
		}
	}
	else{
		xhr.open(obj.method,obj.url + "?rand=" + Math.random(),obj.async);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send(paramsStr);
	}
}

//将需要传入的参数集中赋值
var myObj = {
		method : "POST",
		url : "index.jsp",
		callback :function(){
			var bodyStr = document.body;
			bodyStr.innerHTML = xhr.responseText;
		},
		async : true,
		params : {
			name : "lee",
			age : 39
		}
};
//这个是等待监听的事件
function myFunc(){
	ajax(myObj);
}
//例如在文本上单击获取服务器的数据
document.addEventListener("click",myFunc,false);</span>

5.复习java迭代器(Iterator,Enumeration)

在jsp中对get和post请求的参数进行遍历，需要用到迭代器的知识，在此复习。

<span style="font-family:Microsoft YaHei;">        //第一种获取MAP值的方法,只能遍历MAP的值
 		Collection<String[]> params = request.getParameterMap().values();
 		Iterator<String[]> iterator = params.iterator();
 		while(iterator.hasNext()){
 			String[] strs = iterator.next();
 			System.out.println(strs[0]);
 		} 
 	
 	//第二种获取MAP值的方法，利用keyset可以获取键值对 
 		Set<String> set = request.getParameterMap().keySet();
 		for(Iterator<String> iterator = set.iterator();iterator.hasNext();){
 			String s = iterator.next();
 			String[] v = (String[])request.getParameterMap().get(s);
 			out.println(s + " = " + v[0]);
 		} 
 
 	//第三种获取MAP值的方法，利用entrySet可以获取键值对
 		Set<Map.Entry<String,String[]>> set = request.getParameterMap().entrySet();
 		for(Iterator<Map.Entry<String,String[]>> iterator = set.iterator();iterator.hasNext();){
 			Map.Entry<String,String[]> entry = iterator.next();
 			out.println(entry.getKey() + " = " + entry.getValue()[0]);
 		}
</span>

6.for-in的用法

在javascript中，可以通过for-in遍历其key。

<span style="font-family:Microsoft YaHei;">               for(var i in obj.params){		//在不知道结构的情况下，遍历其key
			console.log( i + "->" + obj.params[i]);
		}</span>