Ajax技术应用速成

1.Ajax简介

1.1Ajax是什么?

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
传统Web应用中简易的同步模型分析，如图所示：

1.
基于Ajax技术的异步请求响应模型分析，如图所示：

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:
商品系统。
评价系统。
地图系统。
……
AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。

2.Ajax 快速入门

2.1Ajax 编程基本步骤分析

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

2.2 Ajax 请求响应编程操作实践

2.2.1Ajax GET 请求操作实现

基于ajax技术中的XMLHttpRequest对象，向服务端发起异步Get请求，关键代码分析如下：

*function doAjaxGet(url,params,callback){
      //1.创建XmlHttpRequest对象
       var xhr=new XMLHttpRequest();
      //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
       xhr.onreadystatechange=function(){//callback(回调函数)
        //基于xhr对象获取的通讯状态，对响应数据进行处理
        //readyState状态说明
        //0：未初始化，尚未调用open() 方法
        //1：启动。已经调用open() 方法，但尚未调用send() 方法
        //2：发送。已经调用send() 方法，但尚未接收到响应
        //3：接收。已经接收到部分响应
        //4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
        
             if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
        	   //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
        	   callback(xhr.responseText);
          }
      }
     //3.创建与服务端的连接
      xhr.open("GET",url+"?"+params,true);//true表示异步
      //4.发送请求
      xhr.send(null); //Get请求，send方法不传内容
    //5.对响应结果进行处理(在回调函数中处理)。*
 }

2.2.1Ajax POST 请求操作实现

基于ajax中XMLHttpRequest对象，向服务端发起异步Post请求。

function doAjaxPost(url,params,callback){
	 //1.创建XmlHttpRequest对象
	 var xhr=new XMLHttpRequest();
	 //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
	 xhr.onreadystatechange=function(){//callback(回调函数)
		 //基于xhr对象获取的通讯状态，对响应数据进行处理
		 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
			//服务端响应的结果会传递给XHR对象，
                  //我们可以借助xhr.responseText获取响应结果
			callback(xhr.responseText);
		 }
	 }
	 //3.创建与服务端的连接
	 xhr.open("POST",url,true);//true表示异步
	 xhr.setRequestHeader("Content-Type",
       "application/x-www-form-urlencoded");
	 //4.发送请求
	 xhr.send(params); //post请求将参数写到send方法
	 //5.对响应结果进行处理(在回调函数中处理)。
 }

2.3 Ajax 编程框架基本实现

我们在实际的js编程中经常会以面向对象的方式进行实现，例如2.2章节中doAjaxGet函数如何以对象方法进行应用呢？关键代码分析如下：

(function(){
	//定义一个函数，可以将其连接为java中的类
	var ajax=function(){}
	//在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
	ajax.prototype={
	   doAjaxGet:function(url,params,callback){
		      //创建XMLHttpRequest对象，基于此对象发送请求
		      var xhr=new XMLHttpRequest();
		      //设置状态监听(监听客户端与服务端通讯的状态)
		      xhr.onreadystatechange=function(){//回调函数，事件处理函数
		          if(xhr.readyState==4&&xhr.status==200){
		             //console.log(xhr.responseText);
		             callback(xhr.responseText);//jsonStr
		          }
		      };
		      //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
		      xhr.open("GET",url+"?"+params,true);
		      //发送请求
		      xhr.send(null);//GET请求send方法不写内容
		    },

	      doAjaxPost:function(url,params,callback){
		      //创建XMLHttpRequest对象，基于此对象发送请求
		      var xhr=new XMLHttpRequest();
		      //设置状态监听(监听客户端与服务端通讯的状态)
		      xhr.onreadystatechange=function(){//回调函数，事件处理函数
		          if(xhr.readyState==4&&xhr.status==200){
		             //console.log(xhr.responseText);
		             callback(xhr.responseText);//jsonStr
		          }
		      };
		      //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
		      xhr.open("POST",url,true);
		      //post请求传参时必须设置此请求头
		        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		      //发送请求
		      xhr.send(params);//post请求send方法中传递参数
	   }
	}
	window.Ajax=new ajax();
})()

3.Ajax 技术在Jquery中应用

3.1Jquery 简介

JQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

3.2Jquery 中常用Ajax 函数

jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：
ajax(…)
get(…)
getJSON(…)
post(…)
…
说明:jquery 中ajax相关函数的语法可参考官网(jquery.com).