ajax学习

第一 为了保证ie5.6和高级的浏览器能使用ajax 

<!doctype html>
<html>
<script type="text/javascript">
function showit(){
	var xmlhttp;
	if(window.XmlHttpRequest){
		xmlhttp = new XmlHttpRequest();		
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function (){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("txt").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("get","test1.txt",true);
	xmlhttp.send();
}
</script>
<body>
<button onclick="showit()">dianji</button>
<span id="txt"></span>
</body>
</html>

test1.txt 内容 随便写

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST 没有数据量限制)

发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据。

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

在使用responseXML遇到一个XML小问题

一开始写了一个错误的xml 里面包含了多个顶层元素

所以一直报错 也去不到xml

但修改后还是一直报错,折腾了半天是浏览器缓存了这个xml

重启下浏览器就ok了

responseXML例子

function showit1(){
    var xmlhttp;
    if(window.XmlHttpRequest){
        xmlhttp = new XmlHttpRequest();       
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function (){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var xmlDoc=xmlhttp.responseXML;
            var namews = xmlDoc.getElementsByTagName("title");
            var sel = document.getElementById("sel");
            var options="";
            for(var i=0;i<namews.length;i++){
                var option = new Option(namews[i].childNodes[0].nodeValue,namews[i].childNodes[0].nodeValue);
                sel.options[i] = option;
            }
        }
    }
    xmlhttp.open("get","/book.xml",true);
    xmlhttp.send();
}

<button onclick="showit1()">dianji1</button>
<select id="sel">

book.xml

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="COOKING">
  <title lang="en">Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>
<book category="CHILDREN">
  <title lang="en">Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>
<book category="WEB">
  <title lang="en">Learning XML</title>
  <author>Erik T. Ray</author>
  <year>2003</year>
  <price>39.95</price>
</book>
</bookstore>

rollback
如果ajax使用频繁 我们可以写一个公共方法针对上面的例子

<html>
<script type="text/javascript">
var xmlhttp;
function showit(){
    getDoAjax("get","test1.txt",true,function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("txt").innerHTML=xmlhttp.responseText;
        }
    });
}
function showit1(){
    getDoAjax("get","book.xml",true,function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var xmlDoc=xmlhttp.responseXML;
            var namews = xmlDoc.getElementsByTagName("title");
            var sel = document.getElementById("sel");
            var options="";
            for(var i=0;i<namews.length;i++){
                var option = new Option(namews[i].childNodes[0].nodeValue,namews[i].childNodes[0].nodeValue);
                sel.options[i] = option;
            }
        }
    });
}
function getDoAjax(method,url,async,func){
    if(window.XmlHttpRequest){
        xmlhttp = new XmlHttpRequest();       
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = func;
    xmlhttp.open(method,url,async);
    xmlhttp.send();
}
</script>
<body>
<button onclick="showit()">dianji</button>
<button onclick="showit1()">dianji1</button>
<span id="txt"></span>
<select id="sel">

</select>
</body>
</html>

 跟后台交互 还是上面2个例子

servlet代码

import java.io.IOException;
import java.io.PrintWriter;

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


public class AjaxServlet extends HttpServlet{
	private static final long serialVersionUID = -2908606144414412796L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("UTF-8");
		PrintWriter out = resp.getWriter();
		out.print("servlet发来贺电");
		out.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/xml;charset=utf-8");
		resp.setCharacterEncoding("UTF-8");
		PrintWriter out = resp.getWriter();
		out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		out.println("<bookstore>");
		out.println("<book>");
		out.println("<title>Everyday Italian</title>");
		out.println("</book>"); 
		out.println("<book>");
		out.println("<title>Harry Potter</title>");
		out.println("</book>"); 
		out.println("<book>");
		out.println("<title>Learning XML</title>");
		out.println("</book>"); 
		out.println("</bookstore>");
		out.close();
	}

}
 html代码
<!doctype html>
<html>
<script type="text/javascript">
var xmlhttp;
function showit(){
	getDoAjax("get","/ajaxtest",true,function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("txt").innerHTML=xmlhttp.responseText;
		}
	});
}
function showit1(){
	getDoAjax("post","/ajaxtest",true,function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			var xmlDoc=xmlhttp.responseXML;
			var namews = xmlDoc.getElementsByTagName("title");
			var sel = document.getElementById("sel");
			var options="";
			for(var i=0;i<namews.length;i++){
				var option = new Option(namews[i].childNodes[0].nodeValue,namews[i].childNodes[0].nodeValue);
				sel.options[i] = option;
			}
		}
	});
}
function getDoAjax(method,url,async,func){
	if(window.XmlHttpRequest){
		xmlhttp = new XmlHttpRequest();		
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = func;
	xmlhttp.open(method,url,async);
	xmlhttp.send();
}
</script>
<body>
<button onclick="showit()">dianji</button>
<button onclick="showit1()">dianji1</button>
<span id="txt"></span>
<select id="sel">

</select>
</body>
</html>

相关推荐