ajax介绍

一、Ajax的概述

   AJAX（Asynchronous Javascript And Xml），综合运用Javascript、XHTML、CSS、DOM、XMLHttpRequest、XML和XSLT等技术来改善B/S结构客户体验效果的方法称为AJAX。
  （Ajax并不是新技术，而是对一些旧技术的重新整合应用而已。）
   传统B/S结构结构图：

Image:Example.jpg

   如图所示，每一个动作都要把请求发送到服务器，再由服务器端返回结果，用户体验效果差。

二、Ajax原理解析

   通过XMLHttpRequest对象异步发送数据请求，并在得到返回结果后自动激发JavaScript方法调用，实现页面无刷新或局部刷新来更新数据信息的目的。
   Ajax原理图：

Image:Example.jpg

  由图可见，Ajax很好的解决了传统B/S结构耗费大量带宽所造成的用户体验差的问题。

三、Ajax涉及技术简介

  Javascript — 属于动态解释型语言，灵活性很高，是Ajax技术的支架，协调各种技术的相互协作，完成良好的用户体验效果。
  DOM — 文档对象模型（Document Object Model）用来表达浏览器中的整个html 文档对象及其层次结构，使用Javascript 可以访问html文档对象中的任何节点元素。
  XML — 具有简单灵活和跨平台的特点，适合异构系统间的通信。使用规范的xml可以提高开发效率，但是由于传递xml时会带有大量的冗余数据，故很多人不愿意使用xml。
  CSS — 层叠样式表单（Cascading Style Sheet ）用于美化页面。
  XMLHttpRequest对象 — 由Javascript创建，是整个Ajax开发的基础，具有从服务器端异步发送http请求的能力，大部分浏览器都支持。
  支持XMLHttpRequest对象的主流浏览器：
  Microsoft IE5.0以上
  Apple Safari 1.2以上
  Firefox 1.0以上
  Netscape 7.1以上
  Opera 7.6以上

四、Ajax技术的应用 1、创建跨浏览器的异步对象：

function createXHR(){
   var xhr;
   try{ //IE5.0
   xhr = new ActiveXObject("Msxm12.XMLHTTP");
   }catch(e){
   try{  //IE5.5
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){
   xhr = false;
   }
   }
   if(!xhr && typeof XMLHttpRequest != 'undefined'){
   xhr = new XMLHttpRequest();
   }
   return xhr;
}

2、使用open方法创建一个请求：

open(method,url,asynchronous,user,password);
method:http 请求方式，get,post.
url:服务器端程序的url
asynchronous：定义request请求是否异步，true（send函数在发送request后马上返回，即异步请求），false（send必须收到回执后才返回，即同步请求），默认为true
user：有些url要求request带有用户名，一般不会用倒
password：密码，同user。

3、使用send方法发送一个请求：

send(body)
body 为字符串，是发送的内容，如果在open中设置了get请求，则为null。
如果在open中设置了post请求，需要在send提交前设置http头信息。例：
req.open(“post”,“http://localhost:8080/ajaxDemo/checkusername.jsp”);
req.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
req.send(“checkName=zhangsan”);

4、使用onreadystatechange事件捕获请求状态变化：

req.open…
req.onreadystatechange = handleRequest;
req.send…
function handleRequest(){
  if(req.readyState == 4){
    if(req.status == 200){
   …
   }else{
   …
   }
   }
}

readyState的属性： 0 Open方法还未开始调用 1 Open已经调用，但还未调用send方法 2 Send方法已经调用 3 请求已经发送成功，正在接收数据 4 应答已解析，数据接收成功常用status属性： 200 ： 请求成功 404 ： 请求资料未找到 500 ： 内部服务器错误其他见附件—XMLHttpRequest status属性 5、使用responseText获得返回的文本

req.responseText 可以获得由服务器返回来的文本信息。

五、Jquery 中对Ajax的应用（一）Jquery 中的Ajax 请求： 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

  url (String) : 请求的HTML页的URL地址。
  data (Map) : (可选) 发送至服务器的 key/value 数据。
  callback (Callback) : (可选) 请求完成时(不需要是success的)的回调函数。
  这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的

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

  url (String) : 请求的HTML页的URL地址。
  data (Map) : (可选) 发送至服务器的 key/value 数据。
  callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

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

  url (String) : 请求的HTML页的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) : 请求的HTML页的URL地址。
  url (String) : 待载入 JS 文件地址。
  callback (Function) : (可选) 成功载入后回调函数。
（二）Jquery 中的Ajax 事件：
局部事件
$.ajax({

beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...

});
全局事件
$("#loading").bind("ajaxSend",function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); });
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. （三）jQuery里面功能最强的Ajax请求方法 $.ajax();

  function doAjaxSend(ptype,purl,pdatas,pdataType,pcomplete){

var s =""; pdatas.each(function(key,value,index){ s += key+"="+value+"&"; }); s.substring(0,s.length-1); $.ajax({ type: ptype, //get/post; url: purl, data: s, dataType:pdataType, //xml/html/json; complete:doAjaxResponse //后面没有, });

}
function doAjaxResponse(originalRequest){

var objXml=originalRequest.responseText;

}

（四）其他

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。