ajax请求步骤和封装

简介

首先带大家了解一下什么是ajax
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

那么如何使用ajax呢？

第一步创XMLHTTPRequest对象

 var xhr = new XMLHttpRequest();

第二步使用open方法设置和服务器的交互信息

//get请求方式

xhr.open('get','getStar.php);

//post请求方式

xhr.open('post','getStar.php);

第三步发送请求

xhr.send();

第四步注册事件

xhr.onreadystatechange = function () {
if (xhr.readyState4 &&xhr.status200) {
}

第五步跟新事件

xhr.onreadystatechange = function () {
if (xhr.readyState4 &&xhr.status200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(xhr.responseText);//输入相应的内容
}

完整版的get请求步骤

//步骤一:创建异步对象
varxhr = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
xhr.open('get','getStar.php?starName='+name);
//步骤三:发送请求
xhr.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function () {   if (xhr.readyState==4 &&xhr.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(xhr.responseText);//输入相应的内容  　　}
}

完整版的post请求步骤

//步骤一:创建异步对象
varxhr = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
xhr.open('post','getStar.php?starName='+name);
//步骤三:发送请求
xhr.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function () {   if (xhr.readyState==4 &&xhr.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　console.log(xhr.responseText);//输入相应的内容  　　}
}

为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了

 function ajax_method(url,data,method,success) {
    // 异步对象
    var xhr = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        xhr.open(method,url);

        // send即可
        xhr.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        xhr.open(method,url);

        // 需要设置请求报文
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            xhr.send(data);
        }else{
            // 木有值 直接发送即可
            xhr.send();
        }
    }

    // 注册事件
    xhr.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (xhr.readyState==4&&xhr.status==200) {
            // console.log(xhr.responseText);

            // 将 数据 让 外面可以使用
            // return xhr.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // xhr.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(xhr.responseText);
        }
    }

}