小天带你了解ajax

时间 2019-11-30

标签了解 ajax 栏目 Ajax 繁體版

原文原文链接

Ajax (asynchronous javascript and xml)

　　在没有ajax的时候，页面每次提交数据都必须销毁当前的页面，从新从服务器端得到一个页面。这样作不只影响用户体验，并且会致使流量的浪费（都是钱啊）。为了不这种状况，google在2005年经过其Goggle Suggest使AJAX变得流行起来。javascript

(1)ajax的定义

　　在小天看来，ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象，也能够称为AJAX对象，向服务器发送异步请求。服务器返回部分数据（一般不须要返回完整页面），这样的话，用户的操做就不会被打断，也就避免了多余流量的浪费。html

(2)获取ajax对象

　　首先，既然要利用XMLHttpRequest对象，固然要获取这个对象。可是，因为IE的一些黑历史，仗着本身当年的市场占有率高，就是莽 rua！它的ajax对象叫ActiveXObject。要区分浏览器来获取这个对象。可是jquery等js框架已经将这一步集成了。如今很难想象有人写js会不用jquery。因此这里只是大体了解一下就行了。辣鸡IE。壮哉我大chrome。java

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

　　很难想象当年的IE有多大的勇气才敢逆时代前进。这样不兼容的例子真的不少不少，致使开发者都想放弃IE，更不用说用户了。
　　弱小和无知不是生存的障碍，傲慢才是。jquery

（3）ajax对象的几个重要的属性

　　a.onreadystatechange:用来绑定一个事件处理函数，用来处理readystatechange事件。
　　注：当ajax对象的readyState属性值发生了任何改变（好比从0变成了1），就会产生readystatechange事件
　　b.readyState:有五个值（0，1，2，3，4），表示ajax对象与服务器通讯的状态。其中，当值为4时，表示AJAX对象已经得到了服务器返回的全部数据。
　　哈哈，小天以为，记住4就够啦。其余的不太懂。
　　c.responseText:得到服务器返回的文本数据。
　　d.responseXML:得到服务器返回的XML数据。
　　e.status:得到状态码。（好比说200表示成功，404啥的。。500啥的。。不想碰到啊又想到了被抢课支配的恐惧）web

（4）编程步骤

　　step1.得到ajax对象。（参见（2））
　　step2.发送请求。
　　有两种请求get或者post请求，其中区别优劣小天就不赘述了。
　　情形一发送get请求
　　a.调用ajax对象的open方法
　　xhr.open(请求类型,请求地址,同步/异步（true表示异步）);
　　ps: ajax也能够发送同步请求，通俗的说，就是浏览器会锁定这个页面，用户感受不到这个页面的刷新，可是在服务器作出响应以前，根本不能够对页面作出任何的操做。如今已经不多用ajax作同步处理了。拿一个异步的东西作同步，那不是傻吗。( ▼-▼ )。
　　eg:
　　　　xhr.open('get','check_uname.do?name=tom',true);
　　b.绑定事件处理函数
　　xhr.onreadystatechange=函数名;
　　eg:
　　xhr.onreadystatechange=f1;
　　c.发送请求
　　xhr.send(null);ajax

　　情形二发送post请求
　　a.xhr.open('post','请求地址',true);
　　b.xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
　　c.xhr.onreadystatechange=函数名;
　　d.xhr.send('name=tom');
　　
　　注：b步骤按照http协议规范，若是发送的是post请求，在请求数据包里面，应该有content-type消息头。默认状况下，ajax对象不带消息头，因此须要调setRequestHeader方法来设置这个消息头。

　　step3.编写服务器端的程序
　　serlvet的话就是经过PrintWriter来返回文本数据就能够了。也可使用json
　　至于SpringMVC和ajax的结合，会单开一篇随笔。

　　step4.编写事件处理函数chrome

function f1(){
	//先得到服务器返回的数据
	if(xhr.status == 200 && xhr.readyState == 4){
		var txt = xhr.responseText;
		//利用这些数据（txt）更新页面
		...
	}
}

（5）实战：注册页面（get请求）

　　这个算是很是经典的AJAX的案例了。
　　需求就是：当用户输入用户名以后，判断用户名是否为Sally，若是是，那么文本框以后出现提示用户名已存在，若是不是Sally提示可使用。编程

　　在写的时候，小天发现本身的jquery和javascript已经忘得差很少了( ╯□╰ )，不过仍是勉强完成了。以后看来须要复习一下了。这个小案例没有使用jquery，可是对javascript一些很复杂的语法进行了封装。json

//js工具类
function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else {
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}
//有种本身编写了jquery的感受( ▼-▼ )
function $(id){
	return document.getElementById(id);
}

function $F(id){
	return $(id).value;
}
		

//jsp页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>regist</title>
<script type="text/javascript" src="js/ajax.js">
</script>
<script type="text/javascript">
	function check(){
		var xhr = getXhr();
		xhr.open('get','check.do?uname='+ $F('uname'),true);
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && 
					xhr.status == 200){
				//得到服务器返回的数据
				var txt = xhr.responseText;
				
				$('uname_msg').innerHTML = txt;
			}
		};
		
		xhr.send(null);
	}
</script>
</head>
<body style="font-size:30px;">
	 <form action="" method="get">
	 	<fieldset>
	 		<legend>注册</legend>
	 		用户名：<input id="uname" type="text" name="uname" onblur="check();" />
	 		<span id= "uname_msg"></span><br/>
	 		密码：<input type="password" name="pwd"/><br/>
	 		<input type="submit" value="注册"/>
	 	</fieldset>
	 </form>
</body>
</html>


//servlet页面
public class ActionServlet extends 
	HttpServlet{
	public void service(
			HttpServletRequest request,
			HttpServletResponse response) 
	throws ServletException,IOException{
		System.out.println("service()");
		//得到请求资源路径
		// http://ip:port/ajax-day01/check.do
		String action = request.getServletPath();
		//设置编码类型。
		response.setContentType(
				"text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//依据分析的结果，进行不一样的处理
		if("/check.do".equals(action)){
			String uname = 
				request.getParameter(
						"uname");
			System.out.println("uname:"
						+ uname);
			if("Sally".equals(uname)){
				out.println("账号已经存在（╯－＿－）╯╧╧");
			}else{
				out.println("可使用( •̀ ω •́ )y");
			}
		}else if("/getLuck".equals(action)){
			Random r = new Random();
			int number = r.nextInt(8888);
			System.out.println("number:" + number);
			out.println(number);
		}
	}
}

　　注：这里没有把web.xml贴出来很简单的配置，就不在此赘述了。浏览器