Ajax使用的五步法

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' , 'Microsoft.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;

/*这个是使用GET方式的设置方式

----------------------------------------------------------------------------------------------------------------------

//第三步：设置和服务器交互的相应参数

//制定servlet页面是AJAX，由于使用的是GET方法，所以参数要自己拼出来，ture表示是“异步”

xmlhttp.open("GET","AJAX?name="+userName,true);

//第四步：设置向服务器发送的数据，启动和服务器端交互

xmlhttp.send(null);

//由于我们使用的是“GET”，所有数据斗拼在url中，这里的参数是null，如果使用“Post”就必须有参数了

----------------------------------------------------------------------------------------------------------------------

*/

//使用post方式

//第三步：设置和服务器交互的相应参数

xmlhttp.open( "POST" , "AJAX" , true );

//使用POST方式需要多加的代码，[url=http://www.woyinwose2.com.cn]我淫我色[/url]手动添加一个Http请求的头信息。这段代码的工作本来是由浏览器帮助完成的

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

//第四步：设置向服务器发送的数据，启动和服务器端交互

xmlhttp.send( "name=" + userName);

}

function callback(){

//alert('------------');

//第五步：判断和服务器交互是否完成，还要判断服务器端是否正确返回数据

if (xmlhttp.readyState==4){

//表示和服务器的交互已经完成

if (xmlhttp.status==200){

//服务器端响应代码是200，正确返回了数据

//纯文本数据的接受方法

var message = xmlhttp.responseText;

//xml对应的DOM对象接受方法，

//[url=http://www.yuputuan.org]玉蒲团[/url]接受这个需要服务器端设置content-type为text/xml

//var docXml = xmlhttp.responseXML;

//把从服务器端返回的数据动态填充到div标签中

//记忆向div中填充文本的方法

var div = document.getElementById( "message" );

div.innerHTML = message;

}

</script>

Ajax使用的五步法相关推荐

TensorFlow快餐教程：程序员快速入门深度学习五步法
作者简介:刘子瑛,阿里巴巴操作系统框架专家:CSDN 博客专家.工作十余年,一直对数学与人工智能算法相关.新编程语言.新开发方法等相关领域保持浓厚的兴趣.乐于通过技术分享促进新技术进步. 作为一个程序 ...
TensorFlow教程：快速入门深度学习五步法（附Keras实例）
授权自AI科技大本营(ID:rgznai100) 作者:刘子瑛本文约1300字,建议阅读6分钟. 本文教你如何利用5 步+4 种基本元素+9 种基本层结构进行深度学习模型开发. 作为一个程序员,我们 ...
ajax请求的五个步骤_监控整个页面，非AJAX，需要通知
ajax请求的五个步骤最近,在JSF中开发新图表和图表"导出服务"时,我遇到了一个非常普遍的问题. 当您执行长时间运行的任务(操作)时,您希望在开始时显示状态"请稍候- ...
ajax请求的步骤,ajax请求的五个步骤
ajax请求的五个步骤第一步,创建XMLHttpRequest对象第二步,注册回调函数第三步,配置请求信息,open(),get 第四步,发送请求,post请求下,要传递的参数放这第五步,创建 ...
决胜B端第2版（4）：需求分析的十三要素五步法
本文由作者杨堃发布于社区需求挖掘和分析是产品设计中挑战最大的工作之一,如何洞察需求的本质,识别出真实的意图,并通过优雅的产品设计,解决需求背后的痛点,是所有产品经理都应该持续提升的核心能力. 需 ...
numa节点_鲲鹏性能优化十板斧之前言 | 鲲鹏处理器NUMA简介与性能调优五步法
鲲鹏处理器NUMA简介随着现代社会信息化.智能化的飞速发展,越来越多的设备接入互联网.物联网.车联网,从而催生了庞大的计算需求.但是功耗墙问题以功耗和冷却两大限制极大的影响了单核算力的发展.为了满足 ...
万字长文精华之数据中台构建五步法
陈新宇罗家鹰江威邓通读完需要 24 分钟速读仅需 8 分钟陈新宇云徙科技联合创始人兼首席架构师,中国软件行业协会应用软件产品云服务分会"数字企业中台应用专家顾问团"副 ...
数据中台建设五步法（文末赠书）
点击▲关注 "中生代技术" 给公众号标星置顶更多精彩第一时间直达数据中台是当下非常热门的话题,可以解决企业重复造轮子的问题.虽然数据中台在互联网企业中已经有了多年的实践, ...
鲲鹏性能优化十板斧——鲲鹏处理器NUMA简介与性能调优五步法
TaiShan特战队六月底成立,至今百日有余,恰逢1024程序员节,遂整理此文,献礼致敬!希望能为广大在鲲鹏处理器上开发软件.性能调优的程序员们,提供一点帮助.从今天开始,将陆续推出性能调优专题文章. ...

Ajax使用的五步法

Ajax使用的五步法相关推荐

最新文章

热门文章