码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之Ajax

时间:2016-08-03 18:24:34      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

简介:AJax是在2005年被Adaptive Path的Jesse James Garrett发明的,用户概括异步加载页面内容的技术---说通俗点,Ajax就是实现局部页面通过JavaScript与后台服务器交互,并刷新页面的功能。

局限:AJax依赖于JavaScript,所以可能会有浏览器不支持(现在基本不用考虑这种情况),而且搜索引擎程序可能不会抓取到有关的内容。

下面就要开始说重点了:

1、Ajax的核心对象-XMLHttpRequest对象

这个对象充当着浏览器中的JS脚本(相当于客户端)与服务器之间的中间人的角色。以往的请求都由浏览器发出,而JavaScript通过这个对象可以自己发出请求,同时也自己处理服务器的响应。其相关的标准还比较新(参见HTML5),但这个对象的历史可谓久远,所以几乎得到了所有浏览器的支持,但问题是,不同浏览器实现XMLHttpRequest对象的方式都不太一样。为了保证跨浏览器,你不得不为同样的事情,写不同的代码分支。

这一点在IE中就很明显,不同的IE浏览器创建XMLHttpRequest对象的代码不同微软最早在IE5中以ActiveX名叫XMLHttp的对象,所以在IE中创建新的XMLHttp对象的代码就应该这样写:

var request=new ActiveXObject("Msxml2.XMLHTTP.3.0");

其他浏览器则基于XMLHttpRequest来创建对象:

var request=new XMLHttpRequest();

更麻烦的是不同的IE版本使用的XMLHTTP对象也完全不相同。为了兼容所有的浏览器,创建XMLHttpRequest对象的函数如下:

function getXMLHttpRequestObject() {
    if (typeof XMLHttpRequest == "undefined") {
        XMLHttpRequest = function () {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }
            catch (e) {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {

            }
            return false;
        }
    } else {
    return new XMLHttpRequest();
    }
}

获取玩XMLHttpRequest对象之后,下面来说下XMLHttpRequest的方法,他有很多的方法,其中最有用的是open()方法。

这个方法有三个参数:

(1)、第一个参数,用来指定讲要访问服务器上的文件

(2)、第二个参数,用来指定访问的请求类型:GET、POST、SEND。

(3)、请求的方式是否是已异步的方式请求

介绍完了,话不多说,上代码:

js代码:

//JS Ajax starting
function getNewContent() {
    var request = getXMLHttpRequestObject();
    if (request) {
        request.open("GET", "upload/Leaning Method.txt", true);
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementsByTagName("body")[0].appendChild(para);
            }
        };
        request.send(null);
    } else {
    alert("Sorry,your browser doesn‘t support XMLHttpRequest!");
    }
}
//JS Ajax Ending

 

html代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/utility.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

 

JavaScript之Ajax

标签:

原文地址:http://www.cnblogs.com/GreenLeaves/p/5733882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!