Ajax使用的五步法
<script type="text/javascript">
//用于保存XMLHttpRequest对象的变量,由于整个过程中必须使用同一个XMLHttpRequest对象,所以要定义成全局的
var xmlhttp;
function submit()
{
//第一步:创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//对于IE7,IE8,firefox,Mozilla,Safari浏览器都能满足这个条件
xmlhttp=new XMLHttpRequest();
//这段代码是为了解决某些版本的mozilla浏览器在XMLHttpRequest对象接收服务器返回的xml数据会出问题的一个bug而添加的,目前来说属于一个小众事件,所以只需要知道这是个修复小众bug的代码段
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//上面的浏览器也能满足这个条件,但是上面的自带了XMLHttpRequest对象,所以没有必要再利用这个来创建。
//IE6和IE5的判断条件
//由于不同浏览器所支持的Activex版本不同,为了对不同版本的浏览器都能定义出XMLHttpRequest对象,创建的时候遍历所有版本的Activex控件版本,总有一个当前浏览器支持
var activexName=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP',
'Micro soft.XMLHTTP'];
for(var i=0;i<activexName.length;i++){
try{
xmlhttp=new ActiveXObject();
break;
}
catch(e){
}
}
}
//alert(xmlhttp);
if(xmlhttp==undefined||xmlhttp==null){
alert("您的浏览器太老,请更换版本。");
return;
}
//第二部:注册回调方法,当服务器处理结束返回数据以后利用回调方法实现局部的页面刷新数据
//这个回调方法实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用,但是我们实际上只关心
//readyState==4(与服务器交互结束)这一种情况。
xmlhttp.onreadystatechange=callback;
//获得文本框输入内容
var userName=document.getElementById("UserName").value;
//使用post方式
//第三步:设置和服务器交互的相应参数
xmlhttp.open("POST","AJAX",true);
//使用POST方式需要多加的代码,手动添加一个Http请求的头信息。这段代码的工作本来是由浏览器帮助完成的
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第四步:设置向服务器发送的数据,启动和服务器端交互
xmlhttp.send("name="+ userName);
}
function callback(){
//第五步:判断和服务器交互是否完成,还要判断服务器端是否正确返回数据
if(xmlhttp.readyState==4){
//表示和服务器的交互已经完成
if(xmlhttp.status==200){
//服务器端响应代码是200,正确返回了数据
//纯文本数据的接受方法
var message = xmlhttp.responseText;
//xml对应的DOM对象接受方法,
//接受这个需要服务器端设置content-type为text/xml
//var docXml = xmlhttp.responseXML;
//把从服务器端返回的数据动态填充到div标签中
//记忆向div中填充文本的方法
var div = document.getElementById("message");
div.innerHTML = message;
}
}
}
</script
分享到:
相关推荐
王兴魁ajax五步,代码加注释详细说明,相信会有帮助的。
ajax五步法,主要讲述ajax方法的应用
ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解
AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
ajax ajax原理 ajax代码 ajax编程 ajax学习
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
关于Ajax的常见面试题 1,Ajax和javascript的区别? javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包
ajax上传ajax上传ajax上传ajax上传ajax上传
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 国 [使用ajax 构建应用程序] 使用ajax 构建应用程序 内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和...
php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax...
three ajax ajax ajaxthreethree ajax ajax ajax ajax ajax ajax three ajax ajax ajax
ajax 分页ajax 分页ajax 分页
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
学习的网上的一个ajax版注册程序,对界面进行了改变!是适合学习ajax的朋友的一个好的例子!