[TimLinux] JavaScript 原生AJAX介绍

1. AJAX

异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术。

2. XMLHttpRequest对象

从IE7+,以及当前流行的Chrome,Firefox,Safri,Opera浏览器,提供用于AJAX操作的对象,均为XMLHttpRequest.

var xmlhttp = XMLHttpRequest();

3. 前端处理流程

流程包括以下几个步骤:

  1. 创建XMLHttpRequest对象;
  2. 注册onreadystatechange处理函数(用于异步操作,同步操作不需要注册该函数)
  3. 调用open(请求方法,请求url地址,是否为异步:true异步)
    1. 如果是get|GET,那么建议在调用open之前,把请求url地址构造好,对传递的name=value,其中name和value必须是encodeURIComponent函数返回后的值。
    2. 如果是post|POST,那么可以在调用send方法的时候,传递post数据
  4. 如果是post方法,则需要给发生给HTTP服务器的请求头部增加一个字段:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  5. 然后调用send方法,该方法接受一个参数,有name=value&name=value组成的长字符串,其中name,value都是经过encodeURIComponent()函数处理后端值,get请求的数据不在这里提供,直接在open方法的url内提供,此时传递给send的为null参数值。

4. 接收数据

异步的AJAX请求,处理数据的流程,都存在于onreadystatechange处理函数内,首先xhr对象存在有以下几个属性:

  • readyState属性:是一个int整数值,存在以下5个值,每当这个值发生变化,都会触发一次onreadystatechange事件,即:调用注册在该事件上的函数。
    • 0:只是创建了xhr, 没有调用open,没有调用send
    • 1:调用了open,没有调用send
    • 2:调用了send,还没有接收到数据
    • 3:接收到了数据,数据还不全
    • 4:接收到了全部数据,请求处理完成。
  • status属性:HTTP响应头部状态码,比如:200响应成功,对应的statusText值为OK,是一个 int 正数值。
  • statusText属性:HTTP响应头状态名,
  • responseText属性:响应返回的主体部分内容,类型为字符串,格式为Text。
  • responseXML属性:响应返回的主体部分内容,类型为字符串,格式为XML,

5. 示例

/* get */
function testGet() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myElement = document.getElementById('mydiv');
            myElement.innerHTML = xmlhttp.responseText;
        }
    };

    var url = "/my/ajax/url" + "?" + encodeURIComponent('name') + "=" + encodeURIComponent("Tim") + "&" + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
    xmlhttp.open('get', url, true);
    xmlhttp.send(null);
}

/* post */
function testPost() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myElement = document.getElementById('mydiv');
            myElement.innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open('post', '/my/ajax/url', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var dataStr = encodeURIComponent('name') + “=” + encodeURIComponent('Tim') + '&' + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
    xmlhttp.send(dataStr);    
}
View Code

 

posted @ 2018-06-11 23:15  TimLinux  阅读(186)  评论(0编辑  收藏  举报