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(){}

 

未完

赞赏

微信赞赏支付宝赞赏