AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
AJAX - 创建 XMLHttpRequest 对象
xmlhttp=newXMLHttpRequest();
AJAX - 向服务器发送请求请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
描述
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。
string:仅用于 POST 请求
AJAX - 服务器 响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
描述
responseText
获得字符串形式的响应数据。
responseXML
获得 XML 形式的响应数据。
AJAX - onreadystatechange 事件
请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
描述
onreadystatechange
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时,表示响应已就绪
例子:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6,IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
使用 AJAX 修改该文本内容
修改内容
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。(黄色部分应该为回调函数)
(wiki上的解释:In callback is any executable code that is passed as an argument to other code,which is expected to call back (execute) the argument at a given time. This execution may be immediate as in asynchronous callback,or it might happen at a later time as in anasynchronous callback.)
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)
因为可以把调用者与被调用者分开,所以调用者不关心谁是被调用者。它只需知道存在一个具有特定原型和限制条件的被调用函数。(在这里调用的是myFunction,被调用的是loadXMLDoc)
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+,Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6,IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",153);">function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } });
}
使用 AJAX 修改文本内容
修改内容
总结
以上是编程之家为你收集整理的AJAX和回调函数全部内容,希望文章能够帮你解决AJAX和回调函数所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。