Ajax的初步认识

1.背景

  2005年,JJG发表了一篇在线文章,介绍了AJAX(Asynchronous Javascript + XML),这项技术能够向服务器请求额外数据而无须卸载页面,说是改变了以前的“单击”,“等待”的交互模式。事实上,在JJG提出的这项技术,已经存在了很长一段时间,AJAX以前就叫远程脚本,功能也是能实现浏览器与服务器之间的远程通信,重命名为AJAX,在2005年底开始红极一时。

2.核心

  Ajax的核心,XMLHttpRequest对象(简称XHR),微软第一个引入此特性(IE5),它作用是:

    1)为服务器发送请求解析服务器响应提供流畅的接口

    2)以异步的方式向服务器取得更多信息(无须刷新界面,得到数据后,通过DOM将数据插入页面)

3.XHR的用法

  收到服务器响应数据之后,响应的数据会自动填充到XHR对象的属性当中,XHR对象的属性值如下:

  responseText:作为响应主题被返回的文本

  responseXML:如果想要内容为.XML文件,就会保存到XML DOM 文档当中,不为XML数据,则此字段为null

  status:响应的HTTP状态(HTTP状态代码为200作为成功的标志;304表示请求的资源并没有修改,所以可以直接在缓存中可读取,这两种状态如果其中一个存在,responseText都能被访问到)

  statusText:HTTP状态说明

  3.1 XHR对象的创建

    IE7+、Firefox、Opear、Chrome和Safari都支持原生的XHR对象,所以直接运用XHR对象的构造函数就能构造出xhr对象

var xhr = new XHRHttpRequest();

 

  3.2 XHR对象的使用

    1)同步状态下

// false代表取消异步,即现在为同步
// 调用open方法并不会真正发送请求,而是启动一个请求以备发送!!!!
xhr.open("get", "example.txt", false);
// send接受一个参数,即作为请求主体发送的数据,如果没有,就必须输入null
xhr.send(null);
// 得到服务器响应之后,http状态码status,不同浏览器各有差别,但是普遍认为【200,300)区间内,为请求成功
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
  console.log(xhr.responseText);
} else {
  console.log("请求不成功:" + xhr.status);
}

 

    2)异步状态下

      即把open的第三个参数由false改为true,为什么异步,因为此时可以检测到XHR对象的readState属性

      readState:可检测请求~响应的各个阶段

    0:未初始化

    1:启动

    2:发送

    3:接收

    4:完成 (我们一般只对4感兴趣,检测4就OK)

   怎么检测readState?可以使用readystatechange事件,因为radState每一次改变,都会触发该事件。值得注意的是,必须在调用open()之前调用onreadystatechange事件才能确保跨浏览器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readState === 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
          console.log(xhr.responseText);
        } else {
          console.log("请求不成功:" + xhr.status);
        }  
    }
}
xhr.open("get", "example.txt", true);
xhr.send(null);

 

    3)get方法使用技巧

xhr.open("get", "url", true);

   通常此url都会伴随参数,并且经常因为这些查询字符串的格式问题而保持,所以添加参数的时候要用到encodeURLComponent(string)来进行编码

   为了不使用那种直接手动在url添加?&这种很繁琐的步骤,我们可以封装一个好玩的函数,如下

function addURLParam(url, name, value) {
    url += (url.indexOf("?") === -1 ? "?" : "&");
    url += encodeURLComponent(name) + "=" + encodeURLComponent(value) ;
}
//下面就构建一个url,超级方便
var url = "example.php";
// 添加参数
url = addUrlParam(url, "name", "Psg");
url = addUrlParam(url, "age", 23);
// 初始化请求
xhr.open("get", url, true)

 

ps:

        encodeURLComponent的作用?

        作用:文本字符串编码为一个有效的统一资源标识符 (URL)

        假如我不用它来编码字符串,很有可能发发生下面的事情:

var username = "psg&age=23";
var url = "http://www.baidu.com?username=" + username; 

console.log(url) // 输出 http://www.baidu.com?username=psg&age=23

        看到没有,莫名奇妙变成了两个参数了。使用了encodeURLComponent就不会出现这种情况。

 

posted @ 2017-12-07 11:01  彭胜光  阅读(250)  评论(0编辑  收藏  举报