ajax的使用方法

ajax(异步交互) 的作用

ajax是使用javascript完成的，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

异步交互和同步交互的区别

同步交互：当浏览器发出一个请求后，必须要等服务器响应完成才能发第二个请求。
异步交互：当浏览器发出一个请求后，不需要等服务器完成响应就可以发第二个请求。

js中ajax开发步骤

1. 获取核心对象

<script type="text/javascript">
	function ajaxFunction(){
	    var xmlHttp;
	    try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
</script>

2. 确定请求方式和请求路径
3. 发送请求
4. 编写回调函数

function XXX(){
		var xmlhttp = ajaxFunction();
		
		//确定请求方式和请求路径
		var username = document.getElementById("name").value;
		xmlhttp.open("POST" , "/ajaxdemo/user2.action" , true);
		
		//编写回调函数
		xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
		       。。。。
				  }
			}
		}
		
		//这里要注意，如果不加这个这个请求头的话，那么服务器就拿不到这个username;
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("username="+username);
	}

注意：这里POST和GET请求的区别在于，POST请求需要加请求头（这里是HTTP协议里面的知识点），因为POST请求的时候表单默认一个属性会将参数放入请求体中，所有这里需要这个请求头，请求参数设置在send()方法中。

jquery中ajax开发步骤（重点）

1. 导入jquery的包

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>

2. 生成事件（这里以点击事件为例）

. $.get(url,params,function(obj){},type);发送get请求

	function save(){
		$.get("${pageContext.request.contextPath}/demo5.action","username=张三",function(obj){
			alert(obj);
		});
	} 

. $.post(url,params,function(obj){},type);发送post请求（同上）

. $.ajax(选项)

	function save(){
		$.ajax({
			url:"${pageContext.request.contextPath}/demo5.action",
			type:"post",
			data:"username=王五",
			success:function(obj){
				alert(obj);
			},
		})
	}

这里出现一个问题 ：一开始我是使用jquery绑定事件，${" #id"}.click(function(){})，可是这样不知道为啥jquery绑定不上这个事件，于是我改成在按钮上增加οnclick=" save()"属性，才生效。