Programming In Scala Reading Note 8

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
    }
);

 

posted @ 2014-08-16 14:57  VoctrALs  阅读(146)  评论(0编辑  收藏  举报