利用AJAX获取网页并输出的实现代码,实现类似facebook无刷新ajax更新

图片 1

看点:
1、file_get_contents超时控制。
2、页面编码判断。
3、键盘Enter键捕捉响应。
4、键盘event兼容处理。//event = event || window.event;
5、XMLHttpRequest 和 jQuery 两种实现方案。
6、页面及源码同时展示。
XMLHttpRequest版本 get_web.php

waterfall瀑布流网页实现方法我整理了两种常用的Masonry与KISSY方法,下面我来给大家介绍这两种瀑布流实现方法。

复制代码 代码如下:

复制代码 代码如下:

waterfall瀑布流网页实现的设计方案一:Masonry

<script type=”text/javascript”>
$(document).ready(function()
{

<?php
header(“Content-type: text/html; charset=utf-8”);
if(!empty($_POST[‘input_text’])) {
ini_set(‘default_socket_timeout’, 10);
if(!$data = file_get_contents($_POST[‘input_text’])) {
echo “Time out!”;
return ;
}
$charset_pos = stripos($data,’charset’);
if($charset_pos) {
if(stripos($data,’utf-8′,$charset_pos)) {
echo iconv(‘utf-8′,’utf-8’,$data);
}else if(stripos($data,’gb2312′,$charset_pos)) {
echo iconv(‘gb2312′,’utf-8’,$data);
}else if(stripos($data,’gbk’,$charset_pos)) {
echo iconv(‘gbk’,’utf-8′,$data);
}
return;
}
echo $data;
}else {
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title>Get Web Page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta http-equiv=”Content-Language” content=”zh-CN” />
<script type=”text/javascript”>
function createXMLHTTP()
{
try
{
var request = new XMLHttpRequest();
}
catch(e1)
{
var arrVersions = [“Microsoft.XMLHTTP”,”MSXML2.XMLHttp.4.0″,
“MSXML2.XMLHttp.3.0″,”MSXML2.XMLHttp.5.0”];
for(var i=0;i < arrVersions.length;i++){
try{
request = new ActiveXObject(arrVersions[i]);
}catch(e2){
request = false;
}
}
}
return request;
}
function ajax_post(url, params, target_id)
{
request = new createXMLHTTP();
request.onreadystatechange = function() {
if (this.readyState == 4)
if (this.status == 200)
if (this.responseText != null)
document.getElementById(target_id).innerHTML = this.responseText;
}
request.open(“POST”, url, true);
request.setRequestHeader(“Content-type”,
“application/x-www-form-urlencoded”);
request.setRequestHeader(“Content-length”, params.length);
request.setRequestHeader(“Connection”, “close”);
request.send(params);
}
var checked = false;
function check_(value) {
checked = value;
}
function get_key(event) {
event = event || window.event;
if(event.keyCode==13 && checked != false)
{
var url = document.getElementById(‘input_text’).value;
if(url != ”) {
get_page();
}else {
document.getElementById(‘input_text’).onfocus();
return false;
}
}
}
function get_page() {
var url = document.getElementById(‘input_text’).value;
if(!url) {
return false;
}else {
if(document.getElementById(‘output_page’).innerHTML != ”) {
document.getElementById(‘output_page’).innerHTML = ”;
}
}
if(url.indexOf(‘http://’) == -1) {
url = ‘;
}
ajax_post(
‘<?php echo $_SERVER[‘PHP_SELF’]; ?>’,
‘input_text=’+url,
‘output_page’
);
document.getElementById(‘click_show’).style.display = ‘block’;
document.getElementById(‘back_a’).href = document.location.href;
document.getElementById(‘origin_website’).href = url;
}
</script>
<style>
.div_box{
margin-top:10px;
}
.input_box{
border:1px solid;
margin-left:10px;
margin-top:2px;
height:15px;
float:left;
size:32
font-size: 14px;
}
.button_box{
float:left;
height:23px;
padding-bottom:3px;
}
.hide_box{
display:none;
}
.a_box{
margin-left:10px;
margin-top:3px;
height:15px;
float:left;
font-size: 14px;
}
.clear_box{
height:50px;
}
</style>
</head>
<body onkeydown=”get_key(event)”>
<div class=”div_box”>
<input id=”input_text” class=”input_box” type=”text” value=””
onclick=”check_(true)” onblur=”check_(false)”></input>
<input type=”button” class=”button_box” onclick=”get_page()”
value=”Get it!” ></input>
<div id=”click_show” class=”hide_box”>
<a id=”origin_website” class=”a_box” href=”#”
target=”_black”>访问原站</a>
<a id=”back_a” class=”a_box” href=”#”>后退</a>
</div>
</div>
<div class=”clear_box”></div>
<div id=”output_page”></div>
</body>
</html>
<?php
}
//End_php

waterfall 瀑布流网页实现的设计方案一:Masonry(含loading几次后出现分页)

$(‘.edit_link’).click(function()
{
$(‘.text_wrapper’).hide();
var data=$(‘.text_wrapper’).html();
$(‘.edit’).show();
$(‘.editbox’).html(data);
$(‘.editbox’).focus();
});

jQuery 版本 get_web.php

瀑布流设计早就不是什么新鲜的东西了,现在网上基于瀑布流的网页非常常见,这种设计能给浏览器者更直接更有效率的浏览体验。
那么我们可以如何从前端、后端配合去实现这种效果呢?

$(“.editbox”).mouseup(function()
{
return false
});

复制代码 代码如下:

其实目前已有很多基于jquery或原生态javascript的waterfall插件,我们只需要根据api进行运用,既可做到不错的瀑布流网页。
但是在这些插件中,做得兼容性好并且功能还不错的,首推下面两种:
1.Masonry
2.KISSY
下面一一解说下这两种瀑布流方式的实现方式。本文只说Masonry,KISSY将会在下一篇文章更新。

$(“.editbox”).change(function()
{
$(‘.edit’).hide();
var boxval = $(“.editbox”).val();
var dataString = ‘data=’+ boxval;
$.ajax({
type: “POST”,
url: “update_profile_ajax.php”,
data: dataString,
cache: false,
success: function(html)
{
$(‘.text_wrapper’).html(boxval);
$(‘.text_wrapper’).show();

<?php
header(“Content-type: text/html; charset=utf-8”);
if(!empty($_POST[‘input_text’])) {
ini_set(‘default_socket_timeout’, 10);
if(!$data = file_get_contents($_POST[‘input_text’])) {
echo “Time out!”;
return ;
}
$charset_pos = stripos($data,’charset’);
if($charset_pos) {
if(stripos($data,’utf-8′,$charset_pos)) {
echo iconv(‘utf-8′,’utf-8’,$data);
}else if(stripos($data,’gb2312′,$charset_pos)) {
echo iconv(‘gb2312′,’utf-8’,$data);
}else if(stripos($data,’gbk’,$charset_pos)) {
echo iconv(‘gbk’,’utf-8′,$data);
}
return;
}
echo $data;
}else {
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title>Get Web Page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta http-equiv=”Content-Language” content=”zh-CN” />
<script type=”text/javascript”
src=”;
<script type=”text/javascript”>
$(document).ready(function(){
$(document).keyup(function(e){
e = e || window.event;
if(e.keyCode == 13 && $(“#input_text”).val() != ”) {
$(“.button_box”).click();
}
});
$(“.button_box”).click(function(){
if($(“#input_text”).val() == ”) {
$(“#input_text”).addClass(‘errorTips’).focus();
return false;
}else {
$(“#input_text”).removeClass(‘errorTips’);
}
$.ajax({
url: ‘<?php echo $_SERVER[‘PHP_SELF’] ?>’,
data: ‘input_text=’+$(“#input_text”).val(),
type:’POST’,
success:function(msg){
$(“.html_tips”).show();
$(“#origin_website”).attr(‘href’,$(“#input_text”).val());
$(“#back_a”).attr(‘href’,document.location.href);
$(“#click_show”).show();
$(“#output_page_html”).empty().val(msg).css({height:parseInt($(document).height()-100)}).show();
$(“#output_page”).empty().html(msg).show();
}
});
});
});
</script>
<style>
.div_box{
margin-top:10px;
}
.input_box{
border:1px solid;
margin-left:10px;
margin-top:2px;
height:15px;
float:left;
size:32
font-size: 14px;
}
.button_box{
float:left;
height:23px;
padding-bottom:3px;
}
.hide_box{
display:none;
}
.a_box{
margin-left:10px;
margin-top:3px;
height:15px;
float:left;
font-size: 14px;
}
.clear_box{
height:50px;
}
.error_tips{
border:1px solid red;
}
#output_page_html{
width:960px;
margin:0 auto;
}
.html_tips{
float: left;
margin: 0 21px;
font-size:1.8em;
}
</style>
</head>
<body>
<div class=”div_box”>
<input id=”input_text” class=”input_box” type=”text”
value=””></input>
<input type=”button” class=”button_box” value=”Get it!”
></input>
<div id=”click_show” class=”hide_box”>
<a id=”origin_website” class=”a_box” href=”#”
target=”_black”>访问原站</a>
<a id=”back_a” class=”a_box” href=”#”>后退</a>
</div>
</div>
<div class=”clear_box”></div>
<div class=”html_tips hide_box”>站点</div>
<div id=”output_page”></div>
<div class=”html_tips hide_box”>站点源码</div>
<textarea id=”output_page_html”
class=”hide_box”></textarea>
</body>
</html>
<?php
}
//End_php

需求:瀑布流输出,loading 5 次后出现分页,每次loading 12个内容。

}
});

作者:Zjmainstay

jquery虽然不是必须的,但是为了方便,我们还是用上jquery吧。

});

您可能感兴趣的文章:

  • AJAX 动态获取当前时间(php)
  • ajax获取php页面的返回参数,控件赋值的方法
  • 用PHP获取Google AJAX Search API
    数据的代码
  • PHP Ajax JavaScript
    Json获取天气信息实现代码
  • php获取ajax的headers方法与内容实例
  • php+ajax实现无刷新动态加载数据技术
  • php基于jquery的ajax技术传递json数据简单实例
  • ajax处理php返回json数据的实例代码
  • Ajax+php数据交互并且局部刷新页面的实现详解
  • PHP+ajax实现获取新闻数据简单示例

下面的例子基于phpcms

$(document).mouseup(function()
{
$(‘.edit’).hide();
$(‘.text_wrapper’).show();
});

jquery.min.js 及 masonry.pkgd.min.js请自行下载。

});
</script>
<style type=”text/css”>
body
{
font-family:Arial, Helvetica, sans-serif;

一、html代码:

font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;

 代码如下

网站地图xml地图