AJAX
XMLHttpRequest,是AJAX得以实现的基础
他是一个对象,有几个需要记住的方法和属性:
XMLHttpRequest方法
open(method, url, async, username, password)
method: post或get
url: 请求地址
async: boolean,默认为ture,是否异步?
后面的基本上没啥意思。。。
send(content)
xmlHttpRequest调用了open方法之后,并没有真正发生一个请求事件。
send执行的时候才真正意义上的发送了请求。
当open的method指定为get的时候,open参数为null;如果是post的时候, content需要是‘a=1&b=2‘这种形式的字符串。
XMLHttpRequest属性
onreadystatechange: 请求状态发生变化的时候,执行的程序
readyState: 有0,1,2,3,4四种状态值,其中4的意思是请求完成了
responseXML : 服务器端返回的XML
responseText : 服务器端返回的String
status : 200, 404等状态码
xmlHttpRequesst.onreadystatechange = function(){ if(xmlHttpRequesst == 4){ if (xmlHttpRequesst.status==200){ document.getElementById("some").innerHTML = xmlHttpRequesst.responseText; } } } xmlHttpRequest.open(‘GET‘, ‘/some/resource/url‘); xmlHttpRequest.send(null);
其实各个知名的浏览器都有自己的XMLHttpRequest对象,只不过存储的位置不同而已:
if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObjext) { xmlHttpRequest = new ActiveXObjext("Msxml2.XMLHTTP"); } else { // rubbish browser }
jQuery AJAX WAY
load(url, parameters, callback)
这个方法的调用者是一个包装集,会把服务器端返回的内容加载到指定的包装集元素上。。。
url : 服务器请求资源的地址
parameter : 请求参数,如果指定的话为post方法;不指定的话为get请求
callback : 服务器资源加载到页面上之后,调用的回调函数。这个函数的参数是相应的文本,状态吗,以及XHR实例。
serialize()
serializeArray()
$(function(){ $(‘someSelector‘).load( ‘url‘, { ‘name‘ : ‘voctrals‘, ‘age‘ : ‘11‘ }, function(){ alert(‘finished~‘); } ); });
如果从服务器端取回来的内容不应该直接放到浏览器上去显示,那么可以就需要其它的方式了,如下介绍的就是这种情况。
这些方法的调用者是jQuery,而不是一个包装集。
普通的get
$.get(url, parameters, callback)
通过get方法从服务器端取回需要的东西
url : 服务器端的地址
parameters : 字符串,‘a=1&b=2‘
对象,{a:1, b:2}
callback : 有两个参数,第一个是服务器端返回的内容,第二个参数是状态码
getJSON
跟get差不多,只不过如果知道服务器端返回的就是一个json对象的话,这个方法比较方便
普通的post
跟get基本一样
完全的ajax
$.ajax(options)
options : 对象
$.ajax( { url : ‘/voctrals‘, type : ‘POST‘, data : {name : ‘tla‘, age : ‘20‘}, dataType : ‘html‘, timeout : ‘3000‘, success : function(data, status){ }, error : function(){}, complete : function(){}, beforeSend : function(){}, async : false } );
$.ajaxSetup(properties)
可以为$.ajax的调用设置默认值。
$.ajaxSetup( { type : ‘POST‘, dataType : ‘html‘, timeout : ‘3000‘, error : function(){}, async : false } );
Programming In Scala Reading Note 8