Ajax

最新推荐文章于 2024-10-06 16:18:14 发布

yanner_

最新推荐文章于 2024-10-06 16:18:14 发布

阅读量175

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/yanner_/article/details/79086590

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web应用都要涉及大量的页面刷新：用户点击了某链接，请求发送回服务器，然后服务器根据用户的操作再返回新页面。即便用户看到的只是页面中的一小部分有变化，也要刷新和重新加载整个页面。使用Ajax就可以做到只更新页面中的一小部分，而不必再加载整个页面。
Ajax：Ajax的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。

1.XMLHttpRequest对象
Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。
下面举例实现XMLHttpRequest，将以下代码保存为ajax.html

<!DOCTYPE html>
<html>
<head>
    <title>Ajax</title>
</head>
<body>

    <div id="new"></div>

    <script src="scripts/addLoadEvent.js"></script>
    <script src="scripts/getHTTPObject.js"></script>
    <script src="scripts/getNewContent.js"></script>
</body>
</html>

这个HTML文件包含了三个js文件，都在scripts文件夹中，为了模拟服务器的响应，在ajax.html文件的旁边创建一个example.txt文件，包含如下内容：This was loaded asynchronously！这个文件将充当服务器端脚本的输出。多数情况下，服务器端脚本在接到请求后，还会做一番处理再输出结果。

getHTTPObject.js文件：

function getHTTPObject(){
    if (typeof XMLHttpRequest=="undefined") 
        XMLHttpRequest=function(){  //IE浏览器创建新对象
            try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
                catch (e) {}
            try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
                catch (e) {}
            try{return new ActiveXObject("Msxml2.XMLHTTP");}
                catch (e) {}
            return false;
        }
    return new XMLHttpRequest();  //其他浏览器创建新对象
}

getNewContent.js文件：

function getNewContent() {
    var request=getHTTPObject();
    if (request) {
        request.open("GET","example.txt",true);  //open方法用来指定服务器上将要访问的文件，指定请求类型，第三个参数指定请求是否以异步方式发送和处理
        request.onreadystatechange=function(){
            if (request.readyState==4) {  服务器在发回响应时，该对象有很多属性，浏览器会在不同阶段更新readyState属性的值，4表示完成
                var para=document.createElement("p");
                var txt=document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.send(null);
    }else{
        alert('Sorry,your browser doesn\'t support XMLHttpRequest');
    }
}
addLoadEvent(getNewContent);

addLoadEvent.js文件：

function addLoadEvent(func) {
    var oldonload=window.onload; //把现有的window.onload事件处理函数的值存入变量
    if (typeof window.onload!='function') {
        window.onload=func;  //若事件处理函数还未绑定函数，将新函数添加给它
    }else{
        window.onload=function(){ //若已经绑定了，就将新函数添加到现有指令的末端
            oldonload();
            func();
        }
    }
}