AJAX 如何实现异步刷新?
1个回答
展开全部
这样给你解释。
首先,我们打开一个URL地址的时候是直接在浏览器地址栏里面输入,回车后,在浏览器里面就会显示出服务器相应的内容。也就是说,我们常规浏览器打开一个URL地址时,需要浏览器才行。
而Ajax是怎么一回事呢?它实际是通过JavaScript里XMLHttpRequest对象来打开一个URL地址,然后读URL地址相应回来的内容,换句话说,我们可以用另外打开一个窗口,而通过js就能打开一个URL地址并且获得响应的信息。这些信息被JS捕获到后,就可以通过JS把它们按照一个规则组合并显示在页面上。这一个过程就叫做Ajax的异步刷新。
你要真实感受这个过程,你得用js实际操作下才行。
我给你编写一个例子,你自己看看吧:
=====================================================
/**
* 创建XMLHttpRequest对象
* @return
* 创建成功返回该对象,否则返回null
*/
function createXMLHttpRequest() {
var xmlHttpReq=null;
if (window.XMLHttpRequest) {//IE7以及以上版本、FF等浏览器的window对象是有XMLHttpRequest子对象的
xmlHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {//IE6以及以下的版本没有XMLHttpRequest,但它可以通过ActiveXObject创建该对象
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Msxml12.XMLHTTP");
} catch (e) {
}
}
}
}
return xmlHttpReq;
}
/**
* 向指定地址发送请求
* @param url
* 要发送请求的URL地址
*/
function sendRequest(url) {
var xmlHttpReq=createXMLHttpRequest();
if(xmlHttpReq){
xmlHttpReq.open("GET", url, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseText;
alert("服务器响应的字符串:"+res);
}
}
};
xmlHttpReq.send(null);
}
}
/**
* 调用Ajax,向服务器发送请求,其中
* ./pages/userlist.jsp?sid=12
* 是要请求的URL地址
*/
function userCheck() {
sendRequest("./pages/userlist.jsp?sid=12");
}
首先,我们打开一个URL地址的时候是直接在浏览器地址栏里面输入,回车后,在浏览器里面就会显示出服务器相应的内容。也就是说,我们常规浏览器打开一个URL地址时,需要浏览器才行。
而Ajax是怎么一回事呢?它实际是通过JavaScript里XMLHttpRequest对象来打开一个URL地址,然后读URL地址相应回来的内容,换句话说,我们可以用另外打开一个窗口,而通过js就能打开一个URL地址并且获得响应的信息。这些信息被JS捕获到后,就可以通过JS把它们按照一个规则组合并显示在页面上。这一个过程就叫做Ajax的异步刷新。
你要真实感受这个过程,你得用js实际操作下才行。
我给你编写一个例子,你自己看看吧:
=====================================================
/**
* 创建XMLHttpRequest对象
* @return
* 创建成功返回该对象,否则返回null
*/
function createXMLHttpRequest() {
var xmlHttpReq=null;
if (window.XMLHttpRequest) {//IE7以及以上版本、FF等浏览器的window对象是有XMLHttpRequest子对象的
xmlHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {//IE6以及以下的版本没有XMLHttpRequest,但它可以通过ActiveXObject创建该对象
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Msxml12.XMLHTTP");
} catch (e) {
}
}
}
}
return xmlHttpReq;
}
/**
* 向指定地址发送请求
* @param url
* 要发送请求的URL地址
*/
function sendRequest(url) {
var xmlHttpReq=createXMLHttpRequest();
if(xmlHttpReq){
xmlHttpReq.open("GET", url, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseText;
alert("服务器响应的字符串:"+res);
}
}
};
xmlHttpReq.send(null);
}
}
/**
* 调用Ajax,向服务器发送请求,其中
* ./pages/userlist.jsp?sid=12
* 是要请求的URL地址
*/
function userCheck() {
sendRequest("./pages/userlist.jsp?sid=12");
}
追问
在jsp中这样调用:
刷新
还是不能实现刷新?
追答
刷新就是你页面内容更新,你需要用js来控制响应内容在页面上的具体展示。
建议你去看看js如何控制页面里面标签之类的知识。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询