AJAX：

A ：Asynchronous [eI`sinkrenes] 异步
J ：JavaScript    JavaScript脚本语言
A： And
X ：XML 可扩展标记语言

AJAX现在貌似已经无处不在了，其实自从web2.0的广泛发展带来了AJAX的发展。我们目前的客户端可以分为胖客户端（C/S）、廋客户端（B/S），

PS：胖客户泛指客户端承担一部分计算工作减轻服务器压力。典型应用 ：C / S架构的客户端。瘦客户泛指客户端不承担任何计算工作，完全依赖服务器端计算。典型应用：B / S 架构的浏览器。

Ajax技术是我们将浏览器发展为胖客户应用的一种最佳解决方案，使用 XmlHttpRequest对象进行异步刷新和提交，使用前台JavaScript代码进行解析服务器数据并呈现，大大减轻了服务器负担和大量数据提交造成的网络延时
 
知道为什么使用AJAX就来具体看看AJAX的属性跟方法：
 
XmlHttpRequest对象的方法:

    abort()    停止当前的请求

    open(string method,string url,boolean asynch,[string username],[string password])

    建立对服务器的远端调用，后两个参数是可选参数
　　　send(content) 向服务器发送请求
 
　　　setRequestHeader(“header”,”value”)   指定请求的首部，在制定首部之前必须先调用open()
 
     getRequestHeader(“header”)  返回指定首部的值
 
XmlHttpRequest对象的属性
　　onreadystatechage 事件 每当XmlHttpRequest对象状态改变都会触发这个事件
 
　　readyState 当前XmlHttpRequest请求服务器的状态(0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成)
 
　　responseText 服务器相应文本
 
　　responseXml 服务器相应的XmlDocument
 

AJAX交互图解，

步骤：1、发起AJAX事件,2、创建XMLHttpRequest对象，3、连接到服务器并发送参数，

4、执行AJAX需要的操作，5交互完成返回数据，6、处理数据

如果还看不明白可以先看看下面的代码实现，再回来看看

如上所述，AJAX方法没有多少，使用AJAX也比较简单：以下为原生态的AJAX使用方法，后面附JqueryAJAX实现方法
 

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">


<title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	    var xmlHttp;　　//声明XMLHttpRequest对象
		function createXmlHttp(){　　//创建XMLHttpRequest对象
            　　if(window.ActiveXObject){	//判断是否为IE
              　　　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		    　　}else if(window.XMLHttpRequest)	{		
			　　　　xmlHttp=new XMLHttpRequest();
			　　}		
		　　return xmlHttp;
        }


//触发AJAX事件
		function checkUs(){
			　　var user=document.logfrm.us.value;
		    　　xmlHttp=createXmlHttp();　　　　　　　　　　
			　　xmlHttp.onreadystatechange=handleStateChange;　　//调用回调函数，每当XmlHttpRequest对象状态改变都会触发这个事件


　　xmlHttp.open("get","/jsch6/checkUser.jsp?userName="+user,true); //打开访问路径
			　　xmlHttp.send(null);　　//发送参数


//如果使用post方法提交


//xmlhttp.open("POST", "/jsch6/checkUser.jsp", true);
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlhttp.send("userName="+user);//发送


}


//回调函数状态的改变判断AJAX交互状态
// 2 已加载 0 未初始化 1 正在加载 3 交互，中 4 完成 
		function handleStateChange(){
			if(xmlHttp.readyState==4){ //交互完成
				　　//判断Http状态码 200 OK 404 Not Found 500 Server errors 等等		
				　　if(xmlHttp.status==200){ //AJAX交互状态OK，解析数据
					　　　　//解析服务器数据呈现
					　　　　var msg=xmlHttp.responseText;
					　　　　var spob=document.getElementById("usmsg");
					　　　　spob.innerHTML=msg;
				　　　　}
			　　}
		}
	</script>
  </head>


<body>
    <div align="center">
    	<form name="logfrm" action=""> 
    		userName:<input type="text" name="us" value="" onblur="checkUs()"><span id="usmsg"></span><br/>
    		password:<input type="password" name="passwd" value=""><br/>


</form>
    </div>
  </body>
</html>




JQUery 对AJAX的几个常用封装方法：$.ajax，$.post， $.get， $.getJSON。


以下引用自：http://blog.csdn.net/liujiahan629629/article/details/22229669




  一， $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

 var configObj = {

       method   //数据的提交方式：get和post

       url   //数据的提交路劲

       async   //是否支持异步刷新，默认是true

       data    //需要提交的数据

       dataType   //服务器返回数据的类型，例如xml,String,Json等

       success    //请求成功后的回调函数

       error   //请求失败后的回调函数

    }

$.ajax(configObj);//通过$.ajax函数进行调用。

           好，看一个实际的例子吧，看一个进行异步删除的例子：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片

<span style="font-size:18px;">          // 删除

                $.ajax({

                    type : "POST",  //提交方式

                    url : "${pageContext.request.contextPath}/org/doDelete.action",//路径

                    data : {

                        "org.id" : "${org.id}"

                    },//数据，这里使用的是Json格式进行传输

                    success : function(result) {//返回数据根据结果进行相应的处理

                        if ( result.success ) {

                            $("#tipMsg").text("删除数据成功");

                            tree.deleteItem("${org.id}", true);

                        } else {

                            $("#tipMsg").text("删除数据失败");

                        }

                    }

                });

</span>  

           二，$.post，这个函数其实就是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。例子不再介绍。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text,_default。

        三，$.get，和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。这里不再演示。

        四， $.getJSON，这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]。

        其实会了$.ajax方法，其它的就都会使用了，都是一样的，其实非常简单。

        但是这里还有一个问题，比较麻烦，就是如果页面数据量比较大，该怎么办呢？在常规表单的处理中，我们使用框架Struts2可以通过域驱动模式进行自动获取封装，那么通过ajax,如何进行封装呢？这里JQuery有一个插件，Jquery Form，通过引入此js文件，我们可以模仿表单Form来支持Struts2的域驱动模式，进行自动数据的封装。用法和$.ajax类似，看一下实际的例子，这里写一个保存用户的前台代码：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片

<span style="font-size:18px;">  $(function(){

        var options = {

            beforeSubmit : function() {//处理以前需要做的功能

                $("tipMsg").text("数据正在保存，请稍候...");

                $("#insertBtn").attr("disabled", true);

            },

            success : function(result) {//返回成功以后需要的回调函数

                if ( result.success ) {

                    $("#tipMsg").text("机构保存成功");  

                                       //这里是对应的一棵树，后边会介绍到，

                    // 控制树形组件，增加新的节点

                    var tree = window.parent.treeFrame.tree;

                    tree.insertNewChild("${org.id}", result.id, result.name);

                } else {

                    $("#tipMsg").text("机构保存失败");

                }

                // 启用保存按钮

                $("#insertBtn").attr("disabled", false);

            },

            clearForm : true

        };  

        $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交

    });

</span>  




虽然有工具给我们封装好的AJAX方便我们的使用，但有时候我们还需要自己对AJAx进行封装，只有掌握了其中原理才能将AJAx技术运用自如，因为万变不离其宗。，其实不管对于任何技术，只有熟悉原理，才能运用自如，呵呵




												


											
原生态AJAX详解和jquery对AJAX的封装的更多相关文章
	

    
								
  1. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
		
    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
    
		
    2. 
						
  2. Ajax详解及使用Ajax时的返回值类型有哪些？
		
    Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...
    
		
    3. 
						
  3. jQuery中$.ajax()详解(转)
		
    JQuery中$.ajax()方法参数详解     url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get) ...
    
		
    4. 
						
  4. Jquery ajax 详解（Day_16）
		
    太在意别人的看法最后会有两种结局,要么自己累死,要么让别人整死. 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 简短地说,在不重载整个网页的情况下,A ...
    
		
    5. 
						
  5. $.ajax()详解
		
    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
    
		
    6. 
						
  6. ajax详解，以及异步JSOP的实现
		
    这里我使用的是jquery的ajax方法   包括三个方法 : get() , post(),   getJson() get() 和post()的格式我就使用一下格式,很方便: $.ajax({ u ...
    
		
    7. 
						
  7. Django中的Ajax详解
		
    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...
    
		
    8. 
						
  8. Ajax详解
		
    一:什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...
    
		
    9. 
						
  9. 简单租房子实例详解---（session、ajax、json前后台数据处理、分页）
		
    本次实例我们结合session.ajax.json前后台数据处理.分页技术做一个租房信息系统 一共有五个界面:包括 管理员和用户的登录界面 登录界面的后台 <?php session_start ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 注解的基本盘点 -- 《Java编程思想》
			
    注解(元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在之后的某一个时刻非常方便地使用这些数据. ---<Java编程思想> 其实注解可以理解为一个工具类,只要使用了这个工 ...
    
			
    2. 
						
  2. 模板 KMP
			
    [模板]KMP int next[N]; char str1[M],str2[N]; //str1 长,str2 短 //len1,len2,对应str1,str2的长 void get_next(i ...
    
			
    3. 
						
  3. 0525 Scrum 项目7.0
			
    一.sprint总结 本次sprint总结,本次合作每个人都完成了属于自己的任务,我觉得这是十分不错的,但是做出来的项目不够美观,内容可以更丰富一点,多样化一点,虽然每个人做出来的网页都各有各的区别, ...
    
			
    4. 
						
  4. opencv的学习笔记3
			
    CMake是一个比make更高级的编译配置工具,它可以根据不同平台.不同的编译器,生成相应的Makefile或者vcproj项目.通过编写CMakeLists.txt,可以控制生成的Makefile, ...
    
			
    5. 
						
  5. LINQ to SQL:Where、Select/Distinct
			
    Where 操作 适用场景:实现过滤,查询等功能. 简单说明:与 SQL 命令中的 Where 作用相似,都是起到范围限定也就是过滤作用的 ,而判断条件就是它后面所接的子句. Where 操作包括 3 ...
    
			
    6. 
						
  6. 鸟哥的linux私房菜学习记录之系统设定工具与硬件检测
			
    这部分没啥用,就不记录了,关于服务器的在服务器篇
    
			
    7. 
						
  7. maven、strutst版本号
			
    struts.2.3.15.3 :大版本号 struts1-->struts2 :分支版本号 增加新功能 :小版本号 修复bug beta:公测版release:发行版(已可以使用)Genera ...
    
			
    8. 
						
  8. python :  HTML+CSS  (定时器轮寻)
			
    定时器轮寻 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
    
			
    9. 
						
  9. viewport 详解
			
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale= ...
    
			
    10. 
						
  10. css回忆（一）
			
    1.css的引入方式: a) 在head部分加入<link  rel="stylesheet" type="text/css" href="my ...
    
			
    11.