Javascript Step by Step - 03

前言

ajax 即“Asynchronous JavaScript and XML”(异步的JavaScript和XML)。现在这个词的覆盖面有所扩展，把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内。

传统的Web应用遵循一种请求/响应模式。如果没有Ajax，对于每个请求都会重新加载整个页面（或者利用IFRAME，则是部分页面）。原来查看的页面会放到浏览器的历史栈中，而用XHR对象做出的请求则不会记录在浏览器的历史中。

XMLHttpRequest对象

XMLHttpRequest 对象用于在后台与服务器交换数据。所有现代的浏览器都支持XMLHttpRequest 对象。使用它可以不加载页面的情况下更新网页，并且可以在加载后从服务器请求或者获取数据等等。

创建XmlHttpRequest对象的方法很简单：

xmlhttp=new XMLHttpRequest();

老版本的Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

创建完成之后，可以使用XMLHttpRequest的若干方法来处理http请求：

• open(method,url,async,username,password) 初始化一个XMLHttpRequest对象

　　　　method代表发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD);

　　　　uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI;

　　　　async参数指定是否请求是异步的-缺省值为true;

　　　　对于要求认证的服务器，可以提供可选的用户名和口令参数。

• send([content]) 把请求发送到服务器。

　　　　content代表一个可选的参数，该参数可以包含可变类型的数据，是要发送到服务器的内容，通常在POST方法的时候使用。

• setRequestHeader(DOMString header，DOMString value) 设置请求的头部信息。
• getResponseHeader(DOMString header，value)检索响应的头部值。
• getAllResponseHeaders()以一个字符串形式返回所有的响应头部。

大概常用的就这么几个。它们之间是有调用顺序的，依据就是XMLHttpRequest对象的状态属性readyState，它共有5个状态：

0	已经创建一个XMLHttpRequest对象，但是还没有初始化。
1	已经调用了open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2	已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3	已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4	响应已经被完全接收。

因此顺序是 0--open--1--setRequestHeader--send--2--响应--3--完成--4。

readyState值的改变将会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器。

还有几个常用的属性：

• responseText  接收到的http响应的文本内容；
• responseXML  接收到的http响应的XML内容，它是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析，那么responseXML的值将为null。
• status  描述了HTTP状态代码
• statusText  描述了HTTP状态代码文本

下面是一个小例子：

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}
function showTab(){
    var request=createRequest();
    if(request==null){
        alert("Unable to create request");
        return;
    }
    request.onreadystatechange=showSchedule;
    request.open("GET",selectedTab+".html",true);
    request.send(null);

}

function showSchedule(){
    if(request.readyState==4 && request.status==200){
        var content=document.getElementById("content");
        content.innerHTML=request.responseText;
    }

}

JQuery Ajax

基本的内容都在这里了：http://api.jquery.com/category/ajax/

可以看出，总共有四个类别：全局ajax事件处理器，有用的帮助函数，相对底层的接口，通用的方法。

通用方法

首先最常用的就是第四种，这些函数的调用层次更高，更加通用。有以下几个函数：

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

参数很简单了：请求的url，携带的参数，请求成功的回调函数，期望得到的数据类型(xml, json, script, or html)

函数的返回值是一个jqXHR，也就是jquery的XMLHttpRequest，是jquery对XMLHttpRequest对象的封装，它实现了Promise接口，可以链式的绑定诸如done()、fail()、always()方法。

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

除了使用HTTP POST方法发送请求之外，和jQuery.get方法大致一样。

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

首先这里的调用者不是"JQuery”或者$了，而是jquery对象。之所以这样做就是将返回的HTML放到函数调用者的元素中。

回调函数complete是在获取到响应并把它插入到相应的元素中之后才开始执行的。

值得注意的是，可以通过url参数获取服务器上某个文档的某一个部分，例如：

$('#result').load('ajax/test.html #container');

jquery首先获取到服务器上的网页ajax/test.html，然后解析这个文档得到id为container的元素，然后将它插入到本地页面id为result的元素中，剩余的部分就弃之不用了。

还有一点，如果返回的是一段javascript脚本代码，那么若参数url不带选择表达式后缀，那么就会执行，如果带了后缀，则不会被执行。

load方法默认使用 GET 方式来传递的，如果data参数有传递数据进去，就会自动转换为POST方式。

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

相当于将dataType设置为了json而已。如果url中包含了类似于字符串callback=?，那么请求将会作为jsonp对待，jsonp是为了解决js跨域请求的问题。什么是跨域呢，说白了就是域名a下的js不能操作域名b下的对象。

跨域这个问题我也想了很久，我觉得主要有两点：1.发送http请求获取文件当然可以，比如在浏览器中输入域名b下的url，这当然无可厚非，如果不能访问那放到web服务器中还有什么用。但是你要用javascript操作，比如ajax请求域名b下的url，这就不行了，这是出于安全性的考虑。2.为什么不安全呢，比如你在用户X的主页上使用某种方法嵌入了一段js，这段js获取了cookie以及其他一些用户信息。然后当用户X登陆后，你的js采用ajax将cookie对象发送给了你的服务器。如果没有跨域限制，那么你的服务器就有了X的cookie了，然后你就可以模仿他登录了。但是有了跨域，js就不能发送cookie到你的服务器了。关于跨域的问题这里有两篇写的非常好的博客：http://zciii.com/blogwp/crossdomain/和http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html。

但是有时候非得跨域不可，就可以使用jsonp解决。js虽然不能直接访问其他域下的数据，但是script，img，iframe标签都可以引用不同域名下的文件。那么我们首先定义一个本地的回调函数callback好了，然后将上面某个标签的src设置为服务器的js，回调函数的名字作为其中的参数，接着服务器获取了数据data，然后调用callback(data)。这样就实现了跨域。哎，又找到一篇相当好的介绍jsonp博客，http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html，它怎么解释的那么透彻呢？

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

相当于把dataType设置为了script。

Event Handler

主要有这么几个：

.ajaxComplete()，.ajaxError()，.ajaxSend()，.ajaxStart()，.ajaxStop()，.ajaxSuccess()

看名字就知道是什么事件了，也就不多说了。

Helper Function

serialize() : 序列化表单内容为字符串。

序列化之后的字符串大概就是这个样子：single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

serializeArray() : 序列化表单元素返回 JSON 数组。

即返回一个[{name:”single”,value:”Single”},…]的形式。

jQuery.param( obj ) 将obj进行序列化

obj可以是一个json数组或者对象。

var myObject={ a: { b:1,c:2 }, d: [3,4,{ e:5 }] };
var recursiveEncoded = $.param(myObject); //"a%5Bb%5D=1&a%5Bc%5D=2&d%5B%5D=3&d%5B%5D=4&d%5B2%5D%5Be%5D=5"
var recursiveDecoded = decodeURIComponent($.param(myObject)); //"a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

Low-Level Interface

jQuery.ajax( url [, settings ] ) 和 jQuery.ajax( [settings ] )

settings这个参数的内容太多了，包括accepts，async，beforeSend，cache，complete，contents，contentType，context，converters，crossDomain，data，dataFilter，dataType，error，global，headers，ifModified，isLocal，jsonp，jsonpCallback，mimeType，password，processData，scriptCharset，statusCode，success，tiemout，traditional，type，url，username，xhr，xhrFields。

太多了，实际用的时候根本不可能同时用这么多，所以用的时候再查吧。