澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

研究你对Ajax的接头

Ajax我们天天都在用,jquery库对Ajax的包装也很完美、很好用,上面大家看一下她的里边原理,并手动封装一个自身的Ajax库。

什么是Ajax

越多关于ajax封装及数量管理,请参照他事他说加以调查新加坡尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据管理》

Ajax是Asynchronous JavaScript and XML的缩写,这一本领能够向服务器供给额外的数据而不需求卸载整个页面,会带来出色的客商体验。守旧的HTTP央求流程大约是那般的,浏览器向服务器发送伏乞-〉服务器依照浏览器传来数据生成response-〉服务器把response再次来到给浏览器-〉浏览器刷新整个页面突显最新数据,那些历程是联合的,顺序实践。

一、原理

原生Ajax的发送须要四步:
1) 创建Ajax对象: XMLHttpRequest
2卡塔尔国 设置央求参数: open(诉求参数[get/post],url地址, 是或不是异步[true/false] )
3State of Qatar 设置回调函数: onreadystateChange 用于拍卖回来的数据
研究你对Ajax的接头。4State of Qatar 发送央求: send(卡塔尔国

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
 //TODO step2: 设置请求参数
xhr.open('get','01.php',true);
 //TODO step3: 设置回调
xhr.onreadystatechange = function () {
     //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
 //TODO step4: 发送请求
xhr.send();

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 供给)从服务器获取数据,这里的异步是指脱离当前浏览器页面包车型地铁恳求、加载等单独施行,那象征能够在不另行加载整个网页的情形下,通过JavaScript接收服务器传来的数码,然后操作DOM将新数据对网页的某部分举行立异,使用Ajax最直观的感触是向服务器获取新数据不须要刷新页面等待了。

二、封装

包装的主题理想便是把要求动态变化的局地当成参数,不变的片段就留在那,在地点的代码中倡议格局(get、post)、恳求地址url、央求参数data、成功的回调success、退步回调error等,那些参数都以动态变化的;而创制Ajax对象 XMLHttprequest、事件监听onreadystatechange等是平素的,所以率先步大家要规定好封装的参数:

ajax的理解(一)

一、封装

打包的核激情想就是把供给动态变化的大器晚成都部队分当成参数,不改变的生龙活虎对就留在此,在上头的代码中倡议形式(get、post)、央求地址url、央求参数data、成功的回调success、失利回调error等,那个参数都以动态变化的;而创办Ajax对象 XMLHttprequest、事件监听onreadystatechange等是定位的,所以率先步我们要规定好封装的参数:

#.  url  供给地址

#.  data 央求数据

#.  type 央求类型

#.  success 成功回调

#.  error 战败回调

#. beforeSend 发送前调用 return false 阻止发送

#.  complete ajax乞求成功的回调, 无论怎么时候都会实施

 

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

 

此处大家要注意的是get和post的传参方式地方不后生可畏致,get哀求须求直接拼接在url地址前边,post乞求必要在send方法里面传参,何况亟需那是恳求头setRequestHeader('content-type','application/x-www-

form-urlencoded'卡塔尔国,所以封装时要扩充区分。

鉴于参数过多,顾客无需每一趟都传开非常多参数,否则用起来会十分麻烦。所以大家运用暗中同意参数的情势,客户不传播正是用默许值,传入便是用客商的参数。

Ajax是Asynchronous Javascript And XML的缩写。 功能:通过Ajax能够使用Javascript语句来调用XMLHttpRequest对象,直接与服务器举行通讯,可以在不重载页面包车型大巴情事下与服务器沟通数据。 1、成立XML

三、使用示例

ajax({
    url: 'test.json',
    data:{test:123,age:456},
    //type:'post',
    success: function (res) {
        console.log(res);
    }
});

 

最新在线澳门娱乐官网 ,Ajax是Asynchronous Javascript And XML的缩写。

功能:通过Ajax能够应用Javascript语句来调用XMLHttpRequest对象,直接与服务器实行通信,能够在不重载页面包车型客车状态下与服务器交流数据。

1、创建XMLHttpRequest对象

var xhr =  new XMLHttpRequest()

对于IE开始的生龙活虎段时代版本(IE7及以下版本)使用,new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP"卡塔尔国等措施创造对象

2、XMLHttpRequest对象常用属性和常用方法

属性

readystate       再次来到XMLHTTP伏乞的当前状态码

state               重临当前恳请的HTTP状态码

statusText       再次回到HTTP状态码对应的文本

方法

onreadystatechange    监听readystate和state状态

ajax的理解(二)

ajax方法:通过 HTTP 诉求加载远程数据

get方法: 通过远程 HTTP GET 乞求载入信息

post方法:通过远程 HTTP POST 央求载入音讯

1、创建XMLHttpRequest对象

function createXHR() {

return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

}

2、将键值对调换来拼接串

function params(data) {

var a = [];

for (var i in data) {

a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));

}

return a.join("&");

}

3、封装ajax方法

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:研究你对Ajax的接头

相关阅读