您的位置：首页 > 其它

课件_48.第九章：Ajax技术[3]-初探浏览器原生Ajax接口(3)

2015-11-28 08:09 627 查看

ajax02.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课件_48.第九章：Ajax技术[3]-初探浏览器原生Ajax接口(3).rar	-->
<!--处理服务器响应的数据-->
<html id="html">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
//创建XHR对象,后面的Ajax操作都是基于这个对象的！
var xhr=new XMLHttpRequest();
xhr.addEventListener('readystatechange',function(){
if (xhr.readyState==4) {
//返回html格式的数据
//                         $('body').append(xhr.responseText);

//返回js格式的数据
//                         eval(xhr.responseText);

//返回JSON格式的数据,处理起来更加灵活！
var obj=JSON.parse(xhr.responseText);//eval也可以
var str='';
for (var i=0;i<obj.length;i++) {
str+="<p><a href='"+obj[i].url+"'>"+obj[i].title+"</a></p>";
}
$('body').append(str);

}
});
//启用一个http请求，以备发送,true表示发送异步（默认），flase发同步请求
xhr.open('get','ajax02.php');//在服务器端执行这个PHP文件，然后将输出的内容返回给客户端！
//                发送刚刚设置好的请求
xhr.send(null);
//                如果时间超过3秒，则取消请求
setTimeout(function(){
xhr.abort();//取消请求！
},3000);
});

});
</script>
</head>
<body>
<button>开始</button>
</body>
</html>

ajax02.php

服务器端

<?php
//服务器端
//可以执行各种PHP代码，各种判断，以及从数据库中获取到数据,返回给客户端
//sleep(5);
//echo "嘿嘿，这个数据返回给你";

//echo'<ul>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//</ul>';

//$str1=<<<A
//if(1>100){
//    alert(':))');
//}else{
//    alert(':((');
//}
//A;
//echo $str1;

$arr=array(
array('title'=>'这是一条文章的标题','url'=>'#'),
array('title'=>'这是一条文章的标题','url'=>'http://sifangku.com'),
array('title'=>'这是一条文章的标题','url'=>'#'),
array('title'=>'这是一条文章的标题','url'=>'#')
);
$str2=json_encode($arr);
echo $str2;

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航