Ajax原理

【理论级】1.Ajax原理通过4个步骤来完成：

a.创建一个xmlHttpRequest对象。(对象创建完毕后，我们需要判断浏览器的兼容问题（主要考虑是IE还是DOM对象）)

b.服务器在发送消息时会触发一个事件，需要调用一个onreadStateChange方法.(服务器在响应一个消息的时候必须满足readyState是完成的状态并且状态行的状态码也必须是成功的，因为这样才能去获取到数据)。

c.用open()方法打开连接，open()在传参数时需要根据情况考虑该用“post”提交还是“get”提交。如果是post提交就需要设置请求头的方法。

d.用send（）方法来发送请求。

【代码级】1.Ajax原理通过4个步骤来完成：

<script type="text/javascript">

function validateUser(){

var username=document.getElementById("username").value;

var xmlHttpRequest;

if(window.ActiveXObject){

xmlHttp=new ActiveXOBject("Microsoft.xmlHttp");

}else if(window.xmlHttpRequest){

xmlHttp=new xmlHttpRequest();

}

xmlHttp.onreadStateChange = function(){

if(xmlHttp.readystate == 4 && xmlHttp.Statues == 200){

var text = xmlHttp.responseText;

var label = document.getElementById("usernamelabel");

label.innerHtml=Text;

}

}

xmlHttp.open("post","ValidateUserServlet",true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.send("username="+username);

}

</script>

为什么要用Ajax呢？

当我们在浏览器上浏览网页时，我们不需要使用动态的网页模式来刷新页面，针对这一现象就有了Ajax技术的应用。所谓的Ajax就是指在刷新页面时，不改变当前页面的模式，也叫异步通讯。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!