前端复习-网络(3-原生js封装一个ajax)

Ajax 对象方法

abort() – 停止当前请求
getAllResponseHeaders() – 把http请求的所有响应首部作为键/值对返回
getResponseHeader(‘server’) – 返回值指定首部的串值
open(“method”, “url”, true) – 建立对服务器的调用,method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数
send(content) – 向服务器发送请求
setRequestHeader(“label”, “value”) – 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

请大家注意,GET请求,有一个特点,当你第二次请求同一个地址内的内容的时候,它会将你第一次请求时缓存的内容返回给你,这样有一个弊端,就是这两次请求间隔内所更新的内容,你获取不到,所以我们需要想办法解决。

我们为了让每次请求的地址都不一样,我们给它加一个 时间戳

这是我用原生js给自己封装的ajax函数:

function ajax(method, url, callback, data, flag) {
    var xml = null;
    if (window.XMLHttpRequest) {
        xml = new XMLHttpRequest;
    } else {
        xml = new ActiveXObject('Microsoft.XMLHttp')
    }//兼容性写法
    xml.onreadystatechange = function () {
        if (xml.readyState == 4) {
            if (xml.status == 200) {
                callback(xml.responseText);
            }
        }
    }
    if (method == 'GET') {
        // xml.open('GET', 'getNews.php?' + data , true)
        var time = new Date().getTime();
        xml.open('GET', url + '?time' + time + '&' + data, flag);
        xml.send();
    } else if (method == 'POST') {
        // xml.open('POST', 'post.php', true)
        xml.open('POST', url, flag)
        xml.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xml.send(data);
        // xml.send('username=Aeimei&age=18');
    }
}

猜你喜欢

转载自blog.csdn.net/jbj6568839z/article/details/81413230