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