• 注册
  • 查看作者
  • 使用XMLHttpRequest对象完成原生的AJAX请求

    1.Ajax简要说明

    说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了。Ajax最大的一个优势就是通过异步请求达到局部刷新的目的,这样就大大提高了用户体验。可是Ajax就是我们平时使用得最多的jQuery中的$.ajax()吗?答案肯定不是的,那我们就来一起看看原生的Ajax究竟长啥样把!

    2.获取XMLHttpRequest

    2.1 为什么要获取XMLHttpRequest对象

    Ajax技术的核心是XMLHttpRequest对象(简称XHR)

    2.2 如何获取XMLHttpRequest对象

    由于IE5是第一款引入XHR对象的浏览器,所以在IE7之前其实都不是叫XMLHttpRequest,具体要兼容IE7之前浏览器的话可以查阅一下《高级程序设计》本文重点是讨论如何实现Ajax请求,所以,默认在内置了XHR的IE7+和其他现代浏览器下,所以:
    function getXhr(){ if (typeof XMLHttpRequest != ‘undefined’) { return new XMLHttpRequest(); } }
    这样就得到了一个XHR的实例对象
    3.大体的流程

    3.1 初始化请求
    使用XHR对象时,使用的第一个方法就是open(),这个方法不会发送请求,但会初始化一个请求准备发送,第三个参数默认是true,也就是异步的
    xhr.open(‘get’, ‘example.php’, false);
    3.2 发送请求
    GET请求:发送的值为空,一般写上null,适配有些浏览器
    xhr.open(‘GET’, url); xhr.send(null);
    POST请求,要模拟表单提交请求的话就将Content-type头部信息设置为application/x-www-form-urlencoded,并且发送的是一个经过序列化之后的字符串
    xhr.open(‘POST’, url); xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhr.send(stringData);

    3.3 监控请求状态,处理请求数据
    xhr对象有且仅有一个事件onreadystatechange,注意所有字母都是小写的,javascript和Java一样都是区分大小写的。
    每一次xhr对象的readyState状态值改变都会触发该事件,但是该方法不能为单独的一个xhr对象绑定多个事件处理逻辑,即onreadystatechange只能绑定一个事件处理的function,如果你想处理多件事情,那么只能在绑定的function中进行多事件处理的逻辑调用。
    xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ document.getElementById(“unInfo”).innerHTML = xhr.responseText; } } }

    4.重要属性
    4.1 readyState属性,这个属性可能的取值如下:
    0:未初始化,尚未调用open()方法
    1:启动。已经调用open()方法,但尚未调用send()方法
    2:发送:已经调用send()方法,但尚未收到响应
    3:接收。已经接收到部分响应数据。
    4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
    4.2 响应的数据会自动填充XHR对象的属性,包含以下属性
    responseText:作为响应主题被放回的文本
    responseXML:如果响应的内容类型是”text/xml”或”application/xml”,这个属性中将保存包含着响应数据的XMLDOM文档
    status:响应的HTTP状态
    statusText:HTTP状态的说明

    5.一次完整的XHR请求

    GET
    function getXhr(){
    if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
    }
    }
    var xhr = getXhr();
    //GET请求
    xhr.open('GET', '/user/checkLogin');
    xhr.send(null);
    xhr.onreadystatechange = function(res) {
    if (xhr.readyState == 4) {
    if (xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText))
    }
    }
    }

    POST:

    function getXhr(){
    if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest();
    }
    }
    var xhr = getXhr();
    var stringData = {
    uname: '123',
    password: '123',
    code: ''
    }
    stringData = JSON.stringify(stringData);
    //POST请求
    xhr.open('POST', '/user/login');
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(stringData)
    xhr.onreadystatechange = function(res) {
    if (xhr.readyState == 4) {
    if (xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText))
    }
    }
    }
  • 0
  • 0
  • 0
  • 86
  • 请登录之后再进行评论

    登录

    捐助

    请在小工具里添加二维码

  • 任务
  • 发布
  • 单栏布局 侧栏位置: