《JavaScript DOM 编程艺术》读书笔记

最新推荐文章于 2024-07-12 14:10:05 发布

风醉流觞

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量298

点赞数

分类专栏： JavaScript 文章标签： javascript 读书笔记

本文链接：https://blog.csdn.net/flywaterfree/article/details/51694235

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

《JavaScript DOM 编程艺术》读书笔记——其六

Ajax

1、Ajax简介：用于概括异步加载页面内容的技术。使用它可以做到只更新页面的一小部分。它的主要优势在于对页面的请求以异步方式发送到服务器，而服务器不会用整个页面来响应请求（会在后台处理请求），与此同时用户还能继续浏览页面并与之交互。

2、XMLHttpRequest对象：Ajax技术的核心。它充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。JavaScript通过这个对象可以自己发送请求，也可以自己处理响应。

服务器在向XMLHttpRequest对象发回响应时，该对象有多个属性可用，浏览器在不同阶段更新readyState属性的值，它有五个可能的值：
      0表示未初始化
      1表示正在加载
      2表示加载完毕
      3表示正在交互
      4表示完成
只要readyState属性值变为4，即可访问服务器发送回来的数据。

访问服务器发送回来的数据需要通过两个属性完成：
（1）responseText属性：用于保存文本字符串形式的数据。
（2）responseXML属性：用于保存Content-Type头部中指定为"text/xml"的数据，即一个DocumentFragment对象。

3、举例：

test.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>  
        <div id="new"></div>    
        <script src="../js/addLoadEvent.js"></script>
        <script src="../js/getHTTPObject.js"></script>
        <script src="../js/getNewContent.js"></script>  
    </body>
</html>

addLoadEvent.js:

function addLoadEvent(func)//此函数参数为打算在页面加载完毕时执行的函数的名字
{
    var oldonload = window.onload;//网页加载完毕时会触发onload事件
    if(typeof window.onload != 'function')//如果这个处理函数还未绑定任何函数
    {
        window.onload = func;//把新函数添加给它
    }
    else//如果这个处理函数已经绑定了一些函数
    {
        window.onload = function()//把新函数追加到现有指令的末尾
        {
            oldonload();
            func();
        }
    }
}

getHTTPObject.js:

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

getNewContent.js:

function getNewContent()
{
    var request = getHTTPObject();
    if(request)
    {
        request.open("GET","example.txt",true);//指定请求类型（GET,POST,SEND），服务器上将要访问的文件，请求是否以异步方式发送和处理
        request.onreadystatechange = function()
        {
            if(request.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);

example.txt:

Hello world !

注：在使用Ajax时要注意同源策略，使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一域的数据，不能向其他域发送请求。此外，还有如Chrome浏览器会限制Ajax请求使用的协议。

风醉流觞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM 编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记——其六Ajax1、Ajax简介：用于概括异步加载页面内容的技术。使用它可以做到只更新页面的一小部分。它的主要优势在于对页面的请求以异步方式发送到服务器，而服务器不会用整个页面来响应请求（会在后台处理请求），与此同时用户还能继续浏览页面并与之交互。2、XMLHttpRequest对象：Ajax技术的核心。它充当着浏览器中的脚本（客户端）与服务器之间的
复制链接

扫一扫