欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生ajax封装、ajax

程序员文章站 2022-07-12 19:03:14
...

AJAX(Asynchronous Javascript And XML) = 异步 JavaScript + XML 在后台与服务器进行异步数据交换,不用重载整个网页,实现局部刷新。

创建 ajax 步骤:

1.创建 XMLHttpRequest 对象
2.创建一个新的 HTTP 请求,并指定该 HTTP 请求的类型、验证信息
3.设置响应 HTTP 请求状态变化的回调函数
4.发送 HTTP 请求
5.获取异步调用返回的数据
6.使用 JavaScript 和 DOM 实现局部刷新

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
    }
};
xhr.send(data);
//完整封装
function ajax(method, url, data, callback, flag) {
    //创建一个ajax对象  但是要兼容IE
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Micro soft.XMLHttp');
    }

    //请求方式不同时的兼容性写法
    method = method.toUpperCase(); //兼容大小写,避免传入小写不显示
    if (method == 'GET') {
        xhr.open(method, url + '?' + data, flag);
        xhr.send();
    } else if (method == 'POST') {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText);
            } else {
                console.log('error');
            }
        }
    }
}    
// jQuery $.ajax()
// 两种写法
// 写法一
$('#input_box').on('input', function () {
    var value = this.value;
    $.ajax({
        type: 'GET', //请求类型
        url: 'http://wuzhe128520.xicp.net:40038',
        // url:' https://api.douban.com/v2/music/search',
        success: function (res) {
            console.log(res)
        }
    })
})

 // 写法二:GET请求,jq提供的简化版
  $(function (){
    S.get('http://wuzhe128520.xicp.net:40038',function(res){
        console.log(res)
    })
})

上一篇: 原生ajax-异步交互

下一篇: linux pmap