首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript之Ajax

JavaScript之Ajax

作者头像
郑小超.
发布2018-01-24 15:05:40
7590
发布2018-01-24 15:05:40
举报
文章被收录于专栏:GreenLeavesGreenLeaves

简介: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

下面就来介绍下,这个Ajax方法中,一些相关的方法:

1、onreadystatechange---这是一个事件处理函数,它会在服务器给XMLHttpRequest对象送回响应的时候触发执行    ---服务器对客户端的响应一开始就触发

注意:在为onreadystatechange指定引用时,不要在函数后面加括号,如request.onreadystatechange()因为加括号表示立即调用该函数,而我们只想把我们自定义的函数的引用(不是函数结果)赋值给onreadystate-change属性;

2、send()---在指定了请求的目标,明确了处理完成后的响应之后,就可以用send方法来发送请求了

3、readystate---服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可以用           ---在触发onreadystatechange事件处理函数后(服务端对客户端开始响应),XMLHttpRequest对象将被赋予很多的属性和属性值下面来简单说下:

readyStates属性:浏览器会在不同阶段更新readyState属性的值,它有5个可能的值:

0表示未初始化

1表示正在加载

2表示加载完毕

3表示正在交互

4表示完成

只要readyState属性值变成了4,就可以访问服务器发送回来的数据了;

4、访问服务器发送回来的数据要通过两个属性来完成。

(1)responseText属性---这个属性用于保存文本字符串形式的数据。

(2)responseXML属性---这个属性用于保存Content-Type头部中指定位text/xml的数据,其实是一个DocumentFragment对象。你可以使用各种DOM方法来处理这个对象。而这个是真是XMLHttpRequest这个名称里有XML的原因。

下面就要说一下关于Ajax技术,新手不得不注意并且重试的几个点,这几个点我们在平时开发中会经常遇到,如果我们在不清楚知道这几个点的情况下,我们的程序很可能会遇到问题:

1、Ajax同源策略,使用XMLHttpRequest对象发送的请求只能访问与其所在的html同一个域中的数据,不能向其他域发送请求。

2、有些浏览器会限制Ajax请求使用的协议。比如在Chrome中,如果你使用file://从自己的硬盘里加载example.txt ,浏览器就会报(跨域请求只支持HTTP协议)的错误消息。

3、重点:就是异步请求有一个容易会被忽略的问题,就是异步性,就是脚本在发送XMLHttpRequest请求之后,仍然会继续执行,不会等待响应返回。如果脚本依赖于服务器的响应结果,那么就应该把脚本代码都转移到指定给onreadystatechange的那个函数中去; 

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-08-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档