码迷,mamicode.com
首页 > 编程语言 > 详细

在JavaScript中使用json.js:Ajax项目之GET请求(同步)

时间:2015-01-23 00:38:06      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

1、用php编写一个提供数据的响应程序(phpdata.php)

<?php 
$arr=array(1,2,3,4);
//将数组编码为JSON格式的数据
$jsonarr=json_encode($arr);
//输出JSON格式的数据
echo $jsonarr;
?>

2、客户端(ajax.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <script type="text/javascript" src="json.js"></script>
        <script type="text/javascript">
            function getXHR(){//获取跨浏览器的XmlHttpRequest对象
                var req;
                if (window.XMLHttpRequest) {
                    req= new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    req= new ActiveXObject("Microsoft.XMLHTTP");
                }
                return req;
            }
            
            function getServerData(){
                //获取跨浏览器的XHR对象
                xhr = getXHR();
                //设置随机数,避免AjaxURL的HTTP缓存
                rand= Math.random(1);
                url="phpdata.php?id="+rand;
                //XmlHttpRequest对象的open()方法;
                //创建一个新的HTTP连接。
                //可以是GET或者POST这样的所有有效的请求类型。
                //URL应该是一个完整的路径地址。
                //false或者true参数控制send()方法是会阻塞(等待服务器返回数据)还是立即返回。
                xhr.open("GET",url,false);
                //XmlHttpRequest对象的send()方法;
                //向服务器发出请求。
                //基于open()方法的false(同步)或者true(异步)控制,或者等待服务器数据,或者立即返回
                //括号中content参数,在post类型中用到,它可以用来向服务器发送数据
                xhr.send();
                //XmlHttpRequest对象的responseText属性:以字符串形式表达服务器的响应内容
                json=xhr.responseText;
                //将json数据转为js数组
                jsArr=json.parseJSON();
                div=document.getElementById("jsonData");
                div.innerHTML=jsArr[1];
            }
        </script>
	</head>
	<body>
		<a href="#" onclick="getServerData()">Get Server Data</a>
        <div id="jsonData"></div>
	</body>
</html>

输出结果:2

在JavaScript中使用json.js:Ajax项目之GET请求(同步)

标签:

原文地址:http://www.cnblogs.com/andy9468/p/4242935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!