AJAX就是异步的javascript和XML。
在ajax出现以前,浏览器发起请求只有3种方式。
1.浏览器地址栏
2.a标签(a href)
3.img标签
可是以上三种方式有的会导致整个页面刷新,有的只能请求部分文件(img、css、js)
后来微软提供在ie5.0 6.0提供了一个接口ActiveXObject,这个接口用于在后台与服务器交换数据,这意味可以在不刷新整个页面的情况下,对网页的某部分进行更新。后来的浏览器都提供XMLHttpRequest这个新的接口。他们功能是一样的。
ActiveXObject,这个接口用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。后来的浏览器都提供XMLHttpRequest这个新的接口。
ajax的核心就是XHR这个对象,我们可以通过实例化XHR,然后调用实例的open方法来确定请求方式和内容(GET,POST),调用send()方法来发送请求。
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
用responseText或responseHTML来获取响应,并写入HTML文档。
responseText:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseHTML:xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange事件:
请求发送到服务器时,我们需要执行一些操作。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
当readystate为4 ,status为200时候,说明服务器已经准备响应。我们在事件中写入处理响应的方法。
回调函数
存在多个ajax时,我们将可重用部分封装为主要函数,使用新的函数(参数含有回调函数)来实现不同功能,避免代码之间的干扰。
function myFunction()//调用这个函数来实现不同功能
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()//loadXMLDoc为主要函数(可重用部分代码),参数中的回调函数来实现不同功能
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
ajax向服务器发送请求的过程:
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行所创建的函数
- 把请求发送到服务器上的文件
请求数据库上的数据时:url指向的是node管理数据库的.js数据库
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
url增加?.q=来指向所需要访问的“主键”
一个简单的ajax例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>
<script>
function loadXMLDoc(){
var XHR = new XMLHttpRequest()
XHR.onreadystatechange = function(){
if(XHR.readyState ==4 && XHR.status == 200){
document.getElementById('myDiv').innerHTML == XHR.responseText
}
}
XHR.open('GET','./test.txt',true)
XHR.send()
}
</script>
</body>
</html>