JavaScript系列(四):原生AJAX

下面这个方法如果使用不生效,那么需要更换支持ajax的浏览器:

// 支持浏览器的源码
function AjaxFunction(){
    var AjaxRequest;  // 缓存XHR对象便于 Ajax 使用
    try{
        // Opera 8.0+, Firefox, Safari
        AjaxRequest = new XMLHttpRequest();
    }catch (e){
        // Internet Explorer Browsers
        try{
            AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // 错误处理
                alert("Your browser broke!");
                return false;
            }
        }
    }
}
var xmlhttp;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// ===================GET 异步===================

xmlhttp.onreadystatechange = () => {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 业务处理
    }
}

xmlhttp.open('GET', '/user/get.do?name=' + '曾小晨', true);  // 异步 true, 同步false
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();


// ===================POST 同步===================
// xmlhttp.onreadystatechange = () => {
    // if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 业务处理 xmlhttp.responseText
    // }
// }

xmlhttp.open('POST', '/user/get.do', false);  // 异步 true, 同步false
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('name=曾小晨');
// 业务处理 xmlhttp.responseText

AJAX

三个方法

  • open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
  • send(string):将请求发送到服务器。
  • setRequestHeader(header,value):向请求添加 HTTP 头。
  • request.responseType:设置响应类型
request.responseType = "json";

三个属性

  • onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
  • readyState:存有 XMLHttpRequest 的状态。
  • status:存有响应状态码(200、404、500、...)

推荐

菜鸟教程 - AJAX

补充

responseType

允许我们开发者定义以下几个值:

  • "arraybuffer":表示通用的、固定长度的原始二进制数据缓冲区。
  • "blob":表示一个不可变、原始数据的类文件对象。
  • "document":接口描述了任何类型的文档的公共属性和方法。
  • "json"
  • "text":如果是空字符串,那么会被假设为"text"类型

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

Last modification:March 2nd, 2018 at 05:42 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment