AJAX三种数据格式的读取实例
2011-05-20 16:35
302 查看
每次写AJAX都要重新定义XMLHTTP， -_-!这次在网上找到一个格式很规范的三个例子，记下来，留着COPY+PASTE.
AJAX三种数据格式的读取实例
一、用Ajax读取Text格式的数据
用Ajax读取Text格式的数据，只需要读取XMLHttpRequest对象返回的responseText属性即可。代码如下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.txt”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 显示返回结果
alert(”responseText’s value: ” + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax responseText’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.txt
hello world!
二、用Ajax读取XML格式的数据
用Ajax读取XML格式的数据，只需要读取XMLHttpRequest对象返回的responseXML属性即可。代码如下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.xml”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得XML的DOM对象
var xmlDOM = xmlHttp.responseXML;
// 取得XML文档的根
var root = xmlDOM.documentElement;
try
{
// 取得<info>结果
var info = root.getElementsByTagName(’info’);
// 显示返回结果
alert(”responseXML’s value: ” + info[0].firstChild.data);
}catch(exception)
{
}
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax responseXML’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.xml
<?xml version=”1.0″ encoding=”GB2312″ ?>
<root>
<info>hello world!</info>
</root>
三、用Ajax读取JSON格式的数据
用Ajax读取JSON格式的数据，也需要先用XMLHttpRequest对象的responseText属性读取，然后再用Function构造返回JSON对象的方法，能过方法创建JSON对象。代码如
下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.txt”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得返回字符串
var resp = xmlHttp.responseText;
// 构造返回JSON对象的方法
var func = new Function(”return “+resp);
// 得到JSON对象
var json = func( );
// 显示返回结果
alert(”JSON’s value: ” + json.info + “(” + json.version + “v)”);
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax JSON’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.txt
{
info: “hello world!”,
version: “2.0″
}
AJAX三种数据格式的读取实例
一、用Ajax读取Text格式的数据
用Ajax读取Text格式的数据，只需要读取XMLHttpRequest对象返回的responseText属性即可。代码如下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.txt”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 显示返回结果
alert(”responseText’s value: ” + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax responseText’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.txt
hello world!
二、用Ajax读取XML格式的数据
用Ajax读取XML格式的数据，只需要读取XMLHttpRequest对象返回的responseXML属性即可。代码如下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.xml”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得XML的DOM对象
var xmlDOM = xmlHttp.responseXML;
// 取得XML文档的根
var root = xmlDOM.documentElement;
try
{
// 取得<info>结果
var info = root.getElementsByTagName(’info’);
// 显示返回结果
alert(”responseXML’s value: ” + info[0].firstChild.data);
}catch(exception)
{
}
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax responseXML’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.xml
<?xml version=”1.0″ encoding=”GB2312″ ?>
<root>
<info>hello world!</info>
</root>
三、用Ajax读取JSON格式的数据
用Ajax读取JSON格式的数据，也需要先用XMLHttpRequest对象的responseText属性读取，然后再用Function构造返回JSON对象的方法，能过方法创建JSON对象。代码如
下：
1、Client - helloworld.htm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<head>
<title>Ajax Hello World</title>
<script type=”text/javascript”>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(”GET”, “data.txt”, true);
xmlHttp.send(null);
}catch(exception){
alert(”您要访问的资源不存在!”);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得返回字符串
var resp = xmlHttp.responseText;
// 构造返回JSON对象的方法
var func = new Function(”return “+resp);
// 得到JSON对象
var json = func( );
// 显示返回结果
alert(”JSON’s value: ” + json.info + “(” + json.version + “v)”);
}
}
}
</script>
</head>
<body>
<div>
<input type=”button” value=”return ajax JSON’s value”
onclick=”startRequest();” />
</div>
</body>
</html>
2、Server - data.txt
{
info: “hello world!”,
version: “2.0″
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [专题] Ajax三种数据格式的读取实例
- [专题] Ajax三种数据格式的读取实例
- javascript解析ajax返回的xml和json格式数据实例详解
- Ajax之三种数据传输格式
- ajax实现的二级联动_读取的是json格式数据
- 在后台流中读取的数据如果是字节,请确认在ajax中传入的data数据是Json格式
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- jquery datatable 通过ajax读取数据实例
- 通过ajax读取json格式数据字符串出现回车时出错问题解决
- Java学习-013-文本文件读取实例源代码（两种数据返回格式）
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- 用Ajax读取Text格式的数据
- 原生ajax处理json格式数据的实例代码
- AJAX返回的三种数据格式
- json格式数据取得1- 直接从client读取 （jquery+ajax实现）
- Ajax处理XML、HTML、JSON三种数据格式的方法
- ajax入门之XMLHttpRequest和三种数据格式
- AJAX中的三种数据格式对比小结
- Ajax实现异步操作实例_针对JSON格式的请求数据
- PHP读取目录下所有文件，并通过ajax返回json格式的数据