ajax请求原理及jquery $.ajax封装全解析

1、ajax原理：


Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  　因此咱们先从XMLHttpRequest讲起，来看看它的工做原理。

  　首先，咱们先来看看XMLHttpRequest这个对象的属性。

  　　它的属性有：

  　　onreadystatechange  每次状态改变所触发事件的事件处理程序。

  　　responseText     从服务器进程返回数据的字符串形式。

  　　responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  　　status           从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）

  　　status Text       伴随状态码的字符串信息

  　　readyState       对象状态值

　　　　 0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）

　　　　 1 (初始化) 对象已创建，还没有调用send方法

　　　　 2 (发送数据) send方法已调用，可是当前的状态及http头未知

　　　　 3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误，

　　　　 4 (完成) 数据接收完毕,此时能够经过经过responseXml和responseText获取完整的回应数据

 XMLHttpRequest 请求参数及state status


　　可是，因为各浏览器之间存在差别，因此建立一个XMLHttpRequest对象可能须要不一样的方法。这个差别主要体如今IE和其它浏览器之间。下面是一个比较标准的建立XMLHttpRequest对象的方法。

如上所示，函数首先检查XMLHttpRequest的总体状态而且保证它已经完成（readyStatus= 4），即数据已经发送完毕。而后根据服务器的设定询问请求状态，若是一切已经就绪（status= 200），那么就执行下面须要的操做。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post仍是get。

b、请求的url地址和传递的参数。

      c、传输方式，false为同步，true为异步。默认为true。若是是异步通讯方式( true)，客户机就不等待服务器的响应；若是是同步方式( false)，客户机就要等到服务器返回消息后才去执行其余操做。咱们须要根据实际须要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，然后一个是会覆盖前一个的，这个时候固然要指定同步方式。

    Send方法用来发送请求。

 

　　知道了XMLHttpRequest的工做流程，咱们能够看出，XMLHttpRequest是彻底用来向服务器发出一个请求的，它的做用也局限于此，但它的做用是整个ajax实现的关键，由于ajax无非是两个过程，发出请求和响应请求。而且它彻底是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通讯的问题因此才会如此的重要。

　　如今，咱们对ajax的原理大概能够有一个了解了。咱们能够把服务器端当作一个数据接口，它返回的是一个纯文本流，固然，这个文本流能够是XML格式，能够是Html，能够是Javascript代码，也能够只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是同样的，不一样的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，而后再显示在页面。至于如今流行的不少ajax控件，好比magicajax等，能够返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并无什么太大的区别。



标准的封装方法：这个方法通常不用了

function CreateXmlHttp() {
     // 非IE浏览器建立XmlHttpRequest对象
     if (window.XmlHttpRequest) {
        xmlhttp =  new XmlHttpRequest();
    }
     // IE浏览器建立XmlHttpRequest对象
     if (window.ActiveXObject) {
         try {
            xmlhttp =  new ActiveXObject( " Microsoft.XMLHTTP ");
        }
         catch (e) {
             try {
                xmlhttp =  new ActiveXObject( " msxml2.XMLHTTP ");
            }
             catch (ex) { }
        }
    }
}
2、jquery $.ajax 封装

jQuery确实是一个挺好的轻量级的JS框架，能帮助咱们快速的开发JS应用，并在必定程度上改变了咱们写JavaScript代码的习惯。jQuery.ajax()进行封装更是方便咱们使用。


1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不须要是success的)的回调函数。


2. jQuery. get( url, [data], [callback] )：使用GET方式来进行异步请求

参数：

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会作为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。


3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求



参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)


4. jQuery.getScript( url, [callback] ) : 经过 GET 方式请求载入并执行一个 JavaScript 文件。

参数
url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。


jquery ajax 事件

Ajax请求会产生若干不一样的事件，咱们能够订阅这些事件并在其中处理咱们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

 $.ajax({
   beforeSend: function(){      //  Handle the beforeSend event
   },
   complete: function(){      //  Handle the complete event
   }    //  ...
 });
全局事件是每次的Ajax请求都会触发的，它会向DOM中的全部元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件能够以下定义：

 $( " #loading ").bind( " ajaxSend ", function(){
   $( this).show();
 }).bind( " ajaxComplete ", function(){
   $( this).hide();
 });
或者：

 $( " #loading ").ajaxStart(function(){
   $( this).show();
 });
咱们能够在特定的请求将全局事件禁用，只要设置下  global 选项就能够了：

 $.ajax({
   url:  " test.html ",
    global:  false, //  禁用全局Ajax事件.
    //  ...
 });
下面是jQuery官方给出的完整的Ajax事件列表：

ajaxStart (Global Event)
This  event  is broadcast  if an Ajax request  is started and no other Ajax requests are currently running.

beforeSend (Local Event)
This  event, which  is triggered before an Ajax request  is started, allows you to modify the XMLHttpRequest  object (setting additional headers,  if need be.)

ajaxSend (Global Event)
This  global  event  is also triggered before the request  is run.

success (Local Event)
This  event  is only called  if the request was successful (no errors  from the server, no errors with the data).

ajaxSuccess (Global Event)
This  event  is also only called  if the request was successful.

error (Local Event)
This  event  is only called  if an error occurred with the request (you can never have both an error and a success callback with a request).

ajaxError (Global Event)
This  global  event behaves the same  as the local error  event.

complete (Local Event)
This  event  is called regardless of  if the request was successful, or not. You will always receive a complete callback, even  for synchronous requests.

ajaxComplete (Global Event)
This  event behaves the same  as the complete  event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)
This  global  event  is triggered  if there are no more Ajax requests being processed.