`

三个好用的ajax函数实现动态载入页面,可做为局部刷新页面用

    博客分类:
  • Ajax
阅读更多
    http://www.webshowme.com/04js/content.asp?id=933
1、函数一:
   function ajaxLoader2(id,url) {
        if (document.getElementById) {
            var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
            }
            if (x)
                {
            x.onreadystatechange = function()
                    {
                if (x.readyState == 4 && x.status == 200)
                        {
                        el = document.getElementById(id);
                        el.innerHTML = x.responseText;
                    }
                    }
                x.open("GET", url, true);
                x.send(null);
                }
        }

2、函数二、利用Iframe来完成
function ajaxLoader(id,url)  {  
    str="<iframe width=\"100%\" height=\"440\" frameborder=\"0\" src=\""+url+"\"></iframe>";
document.getElementById(id).innerHTML=str;
}


3、函数三:与一差不多但是更具体

/***********************************************
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com)
***********************************************/

var ajaxpagefetcher={
loadingmessage: "<center class=\"errmsg\">Loading Page, please wait...</center>",
exfilesadded: "",

connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ajaxfriendlyurl=pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
if (bustcache) //if bust caching of external page
bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
document.getElementById(containerid).innerHTML=decodeURIComponent(ajaxpagefetcher.loadingmessage) //Display "fetching page message"
page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
page_request.send(null)
},

loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).innerHTML=page_request.responseText
for (var i=0; i<jsfiles.length; i++)
this.loadjscssfile(jsfiles[i], "js")
for (var i=0; i<cssfiles.length; i++)
this.loadjscssfile(cssfiles[i], "css")
this.pageloadaction(pageurl) //invoke custom "onpageload" event
}
},

createjscssfile:function(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
},

loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
var newelement=this.createjscssfile(filename, filetype)
document.getElementsByTagName("head")[0].appendChild(newelement)
this.exfilesadded+="["+filename+"]" //remember this file as being added
}
else{ //if file has been loaded already (replace/ refresh it)
  var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
  var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
  var allsuspects=document.getElementsByTagName(targetelement)
  for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
   if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
    var newelement=this.createjscssfile(filename, filetype)
    allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
   }
}
}
},


pageloadaction:function(pageurl){
this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},

onpageload:function(pageurl){
//do nothing by default
},

load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}

} //End object

//Sample usage:
//jaxpagefetcher.load("container_id", "pageurl_or_path", bustcacheBool, [array_of_js_files], [array_of_css_files])
/*

The parameters in that order are:

container_id:    The ID attribute of the DIV or some other container on the page that the Ajax page should load inside
pageurl_or_path: The URL or relative path from the current page to the external page to load. For the URL, it must be from the same domain as the current!
bustcacheBool:A Boolean value (true or false) specifying whether the script should prevent the browser from caching the page after it's been fetched for the 1st time. Set to true if the external page is dynamic and likely changes within the same browser session.
[array_of_js_files]:An optional array that contains the paths to a list of external .js files you wish to load at the same time, each separated by a comma if multiple. For example: ["functions.js", "message.js"].
[array_of_css_files]: An optional array that contains the paths to a list of external .css files you wish to load at the same time, each separated by a comma if multiple. For example: ["pagestyle.js"]

*/
//1) ajaxpagefetcher.load("mydiv", "content.htm", true)
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"])
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"])
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"])
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])


/*

<body>
<div id="joe"></div>

<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>

<div id="bob"></div>

<script type="text/javascript">
<!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file-->
<a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a>
</script>

</body>

*/

注意:使用权用函数一和三的时候,有可能会出现乱码,请将ID对象所在页面的编码改为utf-8编码
分享到:
评论

相关推荐

    jQuery+ajax实现局部刷新的两种方法

    在实现局部刷新的过程中,开发者还需要考虑数据同步问题,例如当多个页面显示相同数据时,需要确保刷新后所有页面显示的数据是一致的。此外,在加载新内容时,还要考虑错误处理机制,如请求失败时如何给用户适当的...

    jquery实现Ajax定时局部页面刷新

    本知识点将重点介绍如何使用jQuery库配合AJAX技术来实现局部页面的定时刷新。主要涉及的技术包括: - **jQuery**:一个快速、简洁的JavaScript库,极大地简化了HTML文档的操作、事件处理、动画等任务。 - **AJAX**...

    ajax操作json数组,实现局部刷新

    在本文中,我们将深入探讨如何使用Ajax操作JSON数组来实现页面的局部刷新。Ajax,即Asynchronous JavaScript and XML,是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页...

    Ajax定时刷新局部页面

    局部刷新是指仅更新网页中的某个或某几个部分,而不是整个页面。这种方式可以显著提高用户体验,因为它避免了不必要的内容重新加载,减少了用户的等待时间。Ajax 局部刷新的基本原理是通过 JavaScript 发送 ...

    AJAX局部刷新案例

    这些事件触发函数会调用AJAX请求,从而实现局部刷新。 例如,在"Stock_log.ldf"这个文件名中,可能包含的是一个股票日志记录,我们可以构建一个AJAX应用,实时更新股票价格或交易记录,而无需刷新整个页面。用户...

    基于AdminLTE(bootstrap)用JS实现的局部刷新的案例

    7. **iframe局部刷新**:虽然在当前案例中没有直接提到,但有时也可以使用iframe来实现局部刷新。将需要刷新的部分放在一个iframe内,然后改变iframe的src属性即可。 通过以上步骤,你可以实现在AdminLTE和...

    ajax 局部刷新的例子

    6. **更新页面**:将处理后的数据插入到DOM中的相应位置,实现局部刷新。可以使用DOM操作方法如`innerHTML`、`appendChild`等。 在实际应用中,为了更好地组织代码和提高可复用性,通常会封装一个Ajax函数,接受URL...

    dwr ajax 局部刷新

    DWR (Direct Web Remoting) 是...通过配置CMT、使用Ajax调用以及设置回调函数,我们可以轻松地在客户端与服务器之间交换数据并更新页面的部分内容。在实际开发中,DWR的易用性和灵活性使其成为实现Ajax功能的理想选择。

    页面局部刷新

    $.ajax()方法提供了封装好的接口,使得异步请求更加方便,可以设置参数如URL、类型(GET或POST)、数据、回调函数等,实现局部刷新。 3. **Fetch API**:作为XMLHttpRequest的现代替代品,Fetch API提供了更简洁的...

    之AJAX实现局部刷新

    ### AJAX实现局部刷新的知识点详解 #### 一、引言 在现代Web开发中,提升用户体验是至关重要的。其中一种常见的技术就是通过AJAX(Asynchronous JavaScript and XML)实现页面的局部刷新,使得用户在与网页交互时...

    AJAX学习总结(六)---可收缩展开的级联菜单和局部刷新

    在本篇“AJAX学习总结(六)---可收缩展开的级联菜单和局部刷新”中,我们将深入探讨如何利用AJAX技术实现交互性更强的Web应用,特别是针对级联菜单和页面局部刷新这两个功能。AJAX(Asynchronous JavaScript and ...

    Ajax将数据发送到后台进行局部刷新操作

    5. **DOM操作**:接收到服务器响应后,Ajax会通过JavaScript操作DOM,动态更新页面中的特定部分,实现局部刷新。 下面是一个简单的Ajax请求示例: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', ...

    JQuery实现动态菜单以及刷新局部页面实例

    本实例将深入探讨如何使用jQuery来创建动态菜单并实现局部页面的刷新功能,这对于提升用户体验和优化网页性能至关重要。 一、jQuery动态菜单的实现 1. HTML结构:首先,我们需要构建一个基础的HTML菜单结构。通常...

    ajax 实现网页无闪自动局部刷新

    而Ajax技术则能够实现局部数据的异步刷新,无需重载整个页面,从而有效改善用户体验。 #### 二、基本原理 Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术组合,它利用了JavaScript、...

    Ajax局部刷新小实验

    在本文中,我们将深入探讨Ajax的基本概念、核心代码以及如何实现局部刷新。 首先,了解Ajax的核心——XMLHttpRequest对象。这个对象是Ajax技术的基础,它允许JavaScript在后台与服务器进行通信,而无需重新加载整个...

    静态页中利用AJAX.NET实现无刷新页面

    使用AJAX.NET,开发者可以在C#或VB.NET等.NET语言中编写代码,实现与JavaScript类似的异步功能。 要实现在静态页面中利用AJAX.NET实现无刷新页面,首先需要引入ASP.NET AJAX库,这通常通过在页面头部添加...

    ajaxAnyWhere局部刷新框架

    1. **易用性**:AjaxAnyWhere提供了一套简单的API,开发者可以通过几行代码轻松实现局部刷新功能。 2. **兼容性**:框架经过优化,支持多种主流浏览器,如Chrome、Firefox、Safari、IE等,确保在不同环境下稳定运行...

    ajax异步 网页无刷新

    10. **页面动态更新**:JavaScript可以使用DOM操作(如`innerHTML`属性或`insertAdjacentHTML`方法)将接收到的数据拼接成HTML字符串,然后将新内容添加到网页上,实现无刷新的页面更新。 通过以上步骤,我们可以...

    Ajax不刷新页面完成分页

    通过以上分析,我们了解到如何使用Ajax框架技术在JSP页面上实现无刷新的分页功能。这个程序的关键在于利用Ajax的异步特性,高效地获取和展示分页数据,从而提升用户的浏览体验。在实际开发中,还可以结合其他前端...

    用Jquery里面封装的Ajax方法实现无页面刷新效果

    标题中的“用Jquery里面封装的Ajax方法实现无页面刷新效果”意味着我们将讨论如何使用 jQuery 的 AJAX 功能来实现实时更新内容,避免用户感知到页面刷新。jQuery 的 AJAX 方法简化了原生 JavaScript 的 AJAX 编程,...

Global site tag (gtag.js) - Google Analytics