ajax的核心,好好认识一下XMLHttpRequest

相信包括在我的绝大多数人都用jQuery的$.get(),$.post(),$.ajax()方法用的很爽了,关于其原生的请求却很少去发掘,很多时候(比如用html5开发app的时候),我并不再需要jQuery,弄明白XMLHttpRequest用原生的就能很好的处理ajax了。

首先,由于我的js是通过jQuery入门的,所以才会有这篇文章。

从new一个对象开始

var xmlhttp = new XMLHttpRequest();

之后的请求,读取,出错等等各种处理都在xmlhttp这个对象里面啦

第一个GET请求

get请求简单,最适合入门操作啦。之前new了一个xmlhttp对象,这次我们就要对它进行操作了。

var url = "http://localhost/";
xmlhttp.open( "GET", url, true );
xmlhttp.send( null );

使用get请求来请求一个url,受到同源策略的约束,请求的url必须是和你当前页面所在的主域是一样的(你在本地是不可能请求到imhuchao.com这个域名的内容的),否则你会什么也看不到。

好了,我们请求了一个操作,也send了,但是要怎样得到结果呢?

其结果是储存在xmlhttp.responseText,但是我们是不能直接去取的,因为上面的请求我们设定了是异步的呀!发送请求就完了,异步并不会等待结果返回。

xmlhttp有一个onreadystatechange事件,这个会根据请求状态的改变而触发。于是,我们需要做的是在请求完成之后,来获取这个responseText值,然后送给回调函数来处理啦!看看下面的代码吧!一个完整的get请求

function get(url,callback){
    var xmlhttp = new XMLHttpRequest()
    xmlhttp.open("GET",url, true);
    xmlhttp.send(null);
    xmlhttp.onreadystatechange = function(){
                if( xmlhttp.readyState == 4 ){
                    callback(xmlhttp.responseText);
                }
            };
}

上面的callback就是回调函数啦。使用的方法就是

get("http://localhost/",function(data){
    console.log(data)
});

2.第一个同步GET请求

虽然同步请求不是官方推荐的方式,但有时候,使用同步请求要比异步请求来的舒服。至少在代码上看的很舒服。(ps,我也不推荐同步请求,哈哈)

var url = "http://localhost/";
xmlhttp.open( "GET", url, false );
xmlhttp.send( null );

只要将open的第三个参数,改为false,就是同步请求啦。

上面代码将会阻塞js的运行,如果这个url迟迟不响应的话,那么页面将会出现“卡死的”状态,所以,一般用这个,当且仅当你能确定目标地址能够迅速响应的情况下!

获取相应文本,直接返回 xmlhttp.responseText 就可以!

3.第一个post请求

现在尝试一下使用XMLHttpRequest来发送post请求。主要使用

var url = "http://localhost/";
var data = "foo=bar&a=b";
xmlhttp.open( "POST", url, true );
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlhttp.send( data )

重点在data,这个data就是所需要post的数据。

一般情况下,我们肯定不喜欢将data直接写成url查询的模式,而是json格式,但是javascript并没有直接提供json转为url串的方法,不像php直接一个http_build_query搞定。这里就需要我们自己写函数来进行转换咯,不过这个并不是太难。

data的格式类似于这种

foo=bar&a=1

和url查询是一样的。

下面写一个buildQuery()方法

 

function buildQuery(){}

 

未完

赞赏

微信赞赏支付宝赞赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注