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 以及是否异步处理请求。
将请求发送到服务器。
|
| onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
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> 相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo