Ajax 的基本实现

                                                                   Ajax 的基本实现

Ajax概述

 

AJAX= Asynchronous JavaScript and XML（异步的JavaScript和 XML）。

AJAX是一种用于创建快速动态网页的技术。

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

传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX的应用程序案例：新浪微博、Google地图、开心网等等

 

这里展出两种实现方式

 

1.原生ajax实现：

 function hasUser(){
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest(); 
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
	}
	var username = $("[name='name']").val();
	xmlhttp.open("get", "http://127.0.0.1:8080/JavaWebTest/pages/testuser?name="+username+"&t="+Math.random(), true);
	xmlhttp.send();
	xmlhttp.onreadystatechange = function(){
		if(4 == xmlhttp.readyState && 200 == xmlhttp.status){
			if("has" == xmlhttp.responseText){
				alert("用户名已经存在");
				$("[name='name']").val("");
				return;
			}
		}
	}
}

 

其中window.XMLHttpRequest是判断浏览器是否支持XMLHttpRequest 兼容老的浏览器，这里的代码是用ajax判断用户名重复，XMLHttpRequest的 open（）方法有三个参数

 

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据

来自服务器的响应

 

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性

 

这样原生的ajax就基本完成了  下面是jquery的ajax实现：

function hasUser(){
	$.get("http://127.0.0.1:8080/JavaWebTest/pages/testuser",{name:$("[name='name']").val()},function(responseTxt,statusTxt,xhr){
		$("#u").remove();
		if(responseTxt == "has"){
			$("#name").after("<td><span id='u' style='color:red;font-size:15px;font-style:italic'>*用户名已存在*</span></td>");
			$("[name='rpsd']").val("");
			$("[name='name']").focus();
			return;
		}else{
			$("#u").remove();
		}
	});
}

功能与上面类似，简单说一下实现 $.get()方法它有四个参数

 

 

回调函数有三个参数，第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态可以这样使用：

if(statusTxt=="success") alert("外部内容加载成功！"); 

if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); 

。第三个是xmlHttpRequest对象

 

post方法与get方法类似就不在赘述了。

 

还有一个load方法

至此，jquery的ajax实现也基本展示出来了