建站资讯

应用Ajax完成网页页面无更新详尽方式

作者:admin 发布时间:2021-04-03
创建对网络服务器的启用,在其中主要参数一表明HTTP协议书启用的方式,URL表明启用的网络服务器的详细地址,asynch表明是不是选用多线程方法


恳求情况 0表明未原始化 1表明open方式启用取得成功 2表明网络服务器早已回复顾客端的恳求 3表明互动中 4表明数据信息接受进行


 最先获得文字框中的內容;因为并不是在jQuery自然环境下,因此这时只有用DOM的方法取下连接点;

 建立XMLHttpRequest目标,该流程是更为繁杂的,必须对于不一样的访问器创建不一样的目标;

 申请注册回调函数涵数,当恳求情况更改时启用该涵数;

 设定与网络服务器的联接信息内容;
 推送数据信息;
 建立回调函数涵数,解决网络服务器回到的数据信息,将回到的数据信息动态性地显示信息在JSP网页页面上。

 

对于于第一步,因为是在DOM下,因此要用Javascript获得文字框中的內容,以下:

// 应用DOM的方法获得文字框中的值

 var userName = document.getElementById( uname ).value;

对于于第二步,因为访问器中间的差别,因此要各自为不一样访问器建立Ajax关键目标,以下:

// 建立XHR目标

 if (window.XMLHttpRequest)

 {

 // 对于Firefox、Opera、Safari、IE7.0 IE8.0

 var xmlHttp = new XMLHttpRequest();

 

 // 对于一些特殊版本号的Mozilla访问器Bug开展修补

 if (xmlHttp.overrideMimeType)

 {

 xmlHttp.overrideMimeType( text/xml );

 }

 }

 else if (window.ActiveXObject)

 {

 // 对于于IE6.0 IE5.0及下列版本号

 // 能够建立XMLHttpRequest目标的控制名字,储存在一个js数字能量数组中

 var activexName = [ MSXML2.XMLHTTP , Microsoft.XMLHTTP ];

 

 for (var i = 0; i activexName.length; i++)

 {

 try

 {

 // 取下一个控制开展建立,假如建立取得成功就停止循环系统

 xmlHttp = new ActiveXObject(activexName[i]);

 break;

 }

 catch (e)

 {

 

 }

 }

}

对于于第三步,当Ajax关键目标的恳求情况产生更改时要启用回调函数涵数,以下:

xmlHttp.onreadystatechange = callback;

对于于第四步,便是创建与网络服务器端的联接,提前准备与网络服务器开展互动,以下:

xmlHttp.open( GET , TestServlet?uname=  + userName,true);

对于于第五步,便是将提前准备好的数据信息推送给网络服务器端,以下:

xmlHttp.send(null);

对于于第六步,建立回调函数涵数,解决网络服务器端回到的数据信息,以下:

function callback()

 {

 if (xmlHttp.readyState == 4)

 {

 if (xmlHttp.status == 200)

 {

 var responseText = xmlHttp.responseText;

 // 将数据信息显示信息在DIV上

 var divNode = document.getElementById( result );

 divNode.innerHTML = responseText;

 }

 }

}

 

之上便是一个详细的以Ajax的方法,不依靠于一切架构、库来完成的Ajax无更新。

  !DOCTYPE html


收缩