【理论级】1.Ajax原理通过4个步骤来完成:
a.创建一个xmlHttpRequest对象。(对象创建完毕后,我们需要判断浏览器的兼容问题(主要考虑是IE还是DOM对象))
b.服务器在发送消息时会触发一个事件,需要调用一个onreadStateChange方法.(服务器在响应一个消息的时候必须满足readyState是完成的状态并且状态行的状态码也必须是成功的,因为这样才能去获取到数据)。
c.用open()方法打开连接,open()在传参数时需要根据情况考虑该用“post”提交还是“get”提交。如果是post提交就需要设置请求头的方法。
d.用send()方法来发送请求。
【代码级】1.Ajax原理通过4个步骤来完成:
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);
}
为什么要用Ajax呢?
当我们在浏览器上浏览网页时,我们不需要使用动态的网页模式来刷新页面,针对这一现象就有了Ajax技术的应用。所谓的Ajax就是指在刷新页面时,不改变当前页面的模式,也叫异步通讯。
总结
以上是编程之家为你收集整理的Ajax原理全部内容,希望文章能够帮你解决Ajax原理所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。