两种Ajax写法【ajax】

来杯Sherry

发布于 2023-05-25 06:35:48

53700

代码可运行

文章被收录于专栏：第一专栏第一专栏

运行总次数：0

代码可运行

一、原生 ajax

1、无特殊要求 2、实例代码

//没有用到jquery的Ajax
//将xmlHttpResquest对象方法封装起来，
var createXhr = function () {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHtTP");
    }
    return xhr;

};


function queryCity() {

    //获取省份 pid
    var pid = document.getElementById('province').value;
    var citySel = document.getElementById('city');
    alert('pid:' + pid);
    var xhr = createXhr();
    if (xhr) {
        xhr.open('POST', 'url');
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function (data) {
            //省份下的城市
            if (xhr.readyState == 4 && xhr.status == StatusOk) {
                alert(data);
                var arr = JSON.parse(xhr.responseText);
                for (var i = 0; i < arr.length; i++) {
                    var city = arr[i];
                    var id = city.id;
                    var name = city.name;
                    //创建下拉框中的<option></option>
                    var opt = new Option(name, id);
                    //加到<select>中
                    citySel.add(opt);
                }
            }
        }
    }
    //写入DataForm,并发送
    xhr.send('pid=', pid);
}

二、$.ajax

1、需要jquery,min.js 2、实例代码

$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});