`

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>

 

分享到：
| http协议
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax学习资料+实例

    【Ajax学习资料+实例】 Ajax，全称Asynchronous JavaScript And XML，是一种在2005年由Google推广的技术，它不是一种新的编程语言，而是一种利用已有标准（如JavaScript和HTTP请求）来创建交互性更强、运行更高效...

    .net中ajax学习解决方案

    "ajax学习"可能是一个包含教程、示例代码和讲解文档的文件或文件夹，而"ajaxѧϰ"可能是教学材料或练习项目，"ѧϰ"在拼音中代表"学习"，因此这很可能是针对AJAX技术的学习资料。 以下是一些关于.NET中AJAX技术的...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书，旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库，它极大地简化了DOM...

    Ajax 学习笔记，超详细的噢！不看后悔

    在这份超详细的Ajax学习笔记中，我们将深入探讨以下几个关键知识点： 1. **基础概念**：Ajax的核心是JavaScript对象XMLHttpRequest，它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    ajax学习文档 很好的学习文档 希望大家好好的利用哦

    【Ajax学习文档】深入解析 Ajax，全称Asynchronous JavaScript and XML，是一种在不刷新整个网页的情况下，能够更新部分网页内容的技术。它并不是一项新技术，而是由一系列已存在的技术组合而成，包括JavaScript、...

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    AJAX学习总结（一）--基于jQuery第一个实例

    在本篇“AJAX学习总结（一）--基于jQuery第一个实例”中，我们将探讨如何使用jQuery库实现异步JavaScript和XML（AJAX）技术。AJAX允许我们在不刷新整个页面的情况下，更新网页的部分内容，从而提供更流畅的用户体验...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    - **jQuery 和 Axios**：学习Ajax时，可以了解jQuery的$.ajax()方法和现代JavaScript库Axios，它们都提供了更方便的接口来处理Ajax请求。 在项目中，Ajax常用于实现动态加载、表单提交、实时通讯等功能。随着前端...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例，及JavaScript的ajax工具函数，可快速入门，也可当手册使用。个人精心整理，值得收藏。 更多：http://download.csdn.net/user/daillo/all

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...

    ajax学习经典源码

    **Ajax学习经典源码详解** Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现...

    ajax学习开发手册

    在《Ajax学习开发手册》中，通常会涵盖以下关键知识点： 1. **基础概念**： - **异步通信**：Ajax的核心是JavaScript的XMLHttpRequest对象，它允许浏览器在不刷新整个页面的情况下与服务器通信。 - **请求与响应*...

    Prototype Ajax学习范例

    这个"Prototype Ajax学习范例"提供了一系列实例，旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax，即异步JavaScript和XML（Asynchronous JavaScript and XML），是一种在无需刷新整个网页的情况下...

    javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip

    这份"Learn_JavaScript_and_Ajax_with_w3Schools.zip"压缩包包含了一个电子书和一个文本文件，旨在帮助学习者掌握这两种技术的核心概念。 JavaScript，全称ECMAScript，是一种轻量级的解释型编程语言，主要用于网页...

    Ajax学习——DWR的参考书和实用案例学习总结

    **Ajax学习——DWR的参考书和实用案例学习总结** DWR（Direct Web Remoting）是一种优秀的开源框架，专门用于简化Web应用程序中的Ajax（Asynchronous JavaScript and XML）开发。Ajax技术允许网页在不刷新整个页面...

    AJAX学习（包括WCF）

    标题"AJAX学习（包括WCF）"表明了这是一个关于AJAX技术的学习资源，其中还涵盖了WCF（Windows Communication Foundation）的相关内容。AJAX，即Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的...

    一些ajax例子,ajax学习例子

    在本案例中，“一些ajax例子,ajax学习例子”是一个学习和实践Ajax技术的资源集合。 Ajax的核心是JavaScript对象XMLHttpRequest，它允许开发者在后台与服务器进行通信，而不会打断用户的交互。以下是一些关键的Ajax...

    Ajax学习全攻略，很好很全面的学习资料

    Ajax，即Asynchronous JavaScript and XML（异步JavaScript与XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...通过深入学习和理解Ajax，开发者可以构建出更高效、更流畅的网页应用。

    ajax学习视频

    ajax学习视频，我自己学了感觉还不错，分享给大家一起学习！

Magicbox
Global site tag (gtag.js) - Google Analytics