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实现也基本展示出来了