AJAX的简单使用

ajax是什么

ajax的全称是Asynchronous Javascript And XML（异步传输+js+xml）
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。
xml只是一种数据格式，在这件事里并不重要，我们在更新一行字的时候理论上说不需要这个格式，但如果我们更新很多内容，那么格式化的数据可以使我们有条理地去实现更新。现在大部分人其实是用JSON这种格式来代替XML的，因为前者更加简洁，据说目前的解析速度也更快。多快好省，能省则省啊。
总结：只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程，那么我们用的方法就可算是AJAX。

 

ajax的作用

大概就是能使用异步通信，提高用户体验

 

ajax怎么用

数据请求 Get

1.创建对象

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;
 }

2.发送请求、获取数据

//执行get请求
function get() {
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	//2. 发送请求
	request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
	//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	request.onreadystatechange = function(){
		//前半段表示 已经能够正常处理。  再判断状态码是否是200
		if(request.readyState == 4 && request.status == 200){
			//弹出响应的信息
			alert(request.responseText);
		}
	}
	request.send();
}

如果想带数据，直接在路径加数据（和普通使用get方法一样）

 

数据请求 post

1.创建对象

同get方法，不再重复

2.发送请求、获取数据

function post() {
	//1. 创建对象
	var request = ajaxFunction();
	request.open( "POST", "/day16/DemoServlet01", true );
	//想获取服务器传送过来的数据， 加一个状态的监听。 
	request.onreadystatechange=function(){
		if(request.readyState==4 && request.status == 200){
			alert("post："+request.responseText);
		}
	}
	//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//带数据过去  ， 在send方法里面写表单数据。 
	request.send("name=aobama&age=19");
}

关于ajax的简化使用，可参考另一篇文章：AJAX结合jquery使用