AJAX请求步骤

AJAX请求步骤

什么是AJAX

1. 异步的JavaScript和XML

AJAX的使用步骤：

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.

   // 不兼容IE8以下浏览器
    let  xmlHttpRequest = XMLHTTPRequest（）
    
    // 兼容IE8以下浏览器
    var  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

　  xmlhttp.open(method,url,async);  
　  //method：请求的类型；GET 或 POST，一共有get、post、head、put、delete五种方  法，常用的方法为get和post。
　  //url：文件在服务器上的位置，相对位置或绝对位置
　  //async：true（异步）或 false（同步）

3. 监听对象状态的改变

   xhr.onReadyState()

4. 发送HTTP请求.

　　xhr.send()

5. 获取异步调用返回的数据.

　 xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

6. 使用JavaScript和DOM实现局部刷新.

AJAX请求实例

1. js实现AJAX

function ajax(url,fnSucc,fnFaild){
    // 参数;1.连接服务器的地址 2.成功时函数 3，失败时函数
    // 1. 创建xmlhttprequest对象
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();//ie6及以下不兼容，针对主流浏览器
    }else{                             // 针对ie5, ie6
        xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
    }
    //2. 连接服务器
    xmlHttp.open('GET',url,true);  //xmlhttp.open(method,url,async)
    // method 包含 get 和 post两种方法 url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
    //3.向服务器端发送请求
    xmlHttp.send();
    //4.接受服务器的返回
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){   // 判断交互是否成功
            if(xmlHttp.status == 200){      //获取服务器返回的数据  获取纯文本数据
                //alert('成功：'+xmlHttp.responseText);
                fnSucc(xmlHttp.responseText);
            }else{
                //alert('失败');
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    }
}

2. jquery请求AJAX

     // 这里写的是异步代码；发请求是个异步；
                $.ajax({
                    url:'./data',
                    dataType:'post',
                    success: (data)=>{
                        // 请求成功
                        // 告诉外界异步执行完毕;执行下一步
                        resolve(data)
                    },
                    error:(errorData)=>{
                    //请求失败，
                   // 告诉外界异步执行完毕了；可以执行下一步
                      reject(errorDatar) 
                    }
                })