相信包括在我的绝大多数人都用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(){}
未完
赞赏微信赞赏
支付宝赞赏