原生ajax技术总结

什么是ajax

Ajax 是 Asynchronous JavaScript and XML 的首字母缩写,翻译成中文就是异步的JavaScript和XML,它是一种由多种技术组合在一起形成的技术,或者说是技巧。

ajax能干什么?

“浏览器的是从上往下逐条执行我们的代码。”,我想这句话大家学习前端技术的时候或多或少都会听到。这无不说明了一个重要的问题,那就是浏览器是单线程的,既然是单线程的,那么我们在页面上任何一次操作都需要浏览器刷新。这无形之间浪费了很多很多很多资源。
因此,英雄阿贾克斯(ajax)勇敢的站了出来,大喊:“不行,你不能刷新,我只需要更新一小部分数据,不要浪费我的流量。”.
所以我们可以这样理解ajax技术:

在不碰触大家伙(document)的情况下,改变小家伙(element)。从而实现了局部的页面操作,比如局部刷新(Google的搜索关键词提示)。

ajax 有什么限制

  • 出于安全考虑,ajax只能获取到当前应用同一服务器上的信息。

如何使用ajax

使用ajax,我们必须要借助浏览器的XMLHttpRequest对象(低版本IE为ActiveXObject(‘Microsoft.XMLHttp’))。

ajax执行只需要以下四个步骤即可:

  1. 创建XMLHttpRequest对象
  2. 打开请求连接
  3. 监听onreadystatechange函数
  4. 发送请求

创建XMLHttpRequest对象

    function getXhr(){  
        var xhr = null;  
        // 判断下是否是低版本IE  
        if(window.XMLHttpReqesut){  
            // 不是IE  
            xhr = new XMLHttpRequest();  
        }else{  
            // 是IE  
            xhr = new ActiveXObject('Microsoft.XMLHttp');  
        }  
        return xhr;  
    }  

打开请求连接

xhr.open(method, url, isAsynchronous);  
// method 代表请求方法,比如:get,POST等    
// url 请求连接,比如:hello.php?id=110   
// isAsynchronous 这是一个布尔值,TRUE代表异步执行,FALSE代表同步执行  

监听onreadystatechange函数

xhr.onreadystatechange = function(){  
    if(xhr.readyState === 4){  
        // xhr.readyState 属性表示请求的状态    
        if(xhr.status === 200){  
            // xhr.status 表示http协议的状态码    
            code..  
        }  
    }  
}  

发送请求

xhr.send(); //  发送请求。

ajax对象的属性和方法

属性/方法 说明
responseText 服务器返回的文本
responseXML 服务器返回的xml,可以当做dom来处理
status 服务器返回的http请求响应值,常用的有:
200 表示请求成功
202 请求被接受但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误,如php代码错误
abort() 取消请求
getAllResponseHeaders() 获取响应的所有http头
getResponseHeader() 获取指定的http头
open(method, url, isAsynchronous) 创建请求,method请求类型(get/post)
send() 发送请求
setRequestHeader() 指定请求的http头
onreadystatechange 发生任何状态变化时的事件控制对象
readyState 请求状态
0 尚未初始化
1 正在发送请求
2 请求完成
3 请求成功,正在接收数据
4 数据接收成功

如何突破限制

可以通过jsonp行为突破不能请求其他信息源的问题。(详情百度)

易错点

我们来看一段代码,如下代码段,在window.onload监听函数中执行了两个ajax请求。但是呢,最终只有第二个请求被执行。

var xhr = getXhr();// 获取到XMLHttpRequest对象  
var _head_url   = {name:'header',url:'../template/header.html'};  
// 请求header  
getAjax(xhr, _head_url, header);  
// 这个函数是一个完整的ajax请求.xhr是ajax对象,_head_url 是请求地址,     
//header是请求之后要处理的元素,到这里结束第一个请求,执行效果是在页面上显示“这是页头”.    
// 发起第二个请求  
xhr.open('post', '../template/raside.html', true);  
xhr.onreadystatechange = function(){  
    if (xhr.readyState === 4) {  
        if (xhr.status===200) {  
            alert('成功');// 最后只执行了这个  
        }  
    }  
}  
xhr.send();  

这是因为两个ajax都是异步的请求,他们同时执行,但是第二个请求最后执行完,所以覆盖了第一个请求,那么如何解决呢:

  • 在打开连接的时候第三个参数选择FALSE,变成同步请求。(这个比较容易犯错)
  • 在第一个请求执行成功的监听函数中直接执行第二个函数。代码如下:

    function getAjax(xhr, url, element) {    
      xhr.open('post', url.url, false);  
      xhr.onreadystatechange = function(){  
        if (xhr.readyState === 4) {  
            if (xhr.status === 200) {  
                // 请求成功,执行操作  
                if (url.name === 'header') {  
                    doHeader(xhr.responseText, element);  
                    // 请求raside  
                    xhr.open('post', '../template/raside.html', false);  
                    xhr.onreadystatechange = function(){  
                        if (xhr.readyState === 4) {  
                            if (xhr.status===200) {  
                                alert('成功');  
                            }  
                        }  
                    }  
                    xhr.send();  
                }else if (url.name === 'raside') {  
                    // 处理raside的方法  
                    doRaside(xhr.responseText, element);  
                }  
            }else{  
                alert('请求完成,但失败.');  
            }  
        }  
      }  
      xhr.send();  
    }  
    

发布者

iamorz

前端技术群:263240563

《原生ajax技术总结》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注