ajax(全称:Asynchronous JavaScript And XML )
ajax是一门利用JS和XML与服务器交换数据的一门语言.
传统的web程序工作原理图：
Ajax工作原理图：
创建XMLHttpRequest对象有两种情况:
1.在IE浏览器下:
varxmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
2.在W3C模型浏览器下(google chrome/firefox/opera):
var xmlHttp = new XMLHttpRequest();
为了适应不同的浏览器,达到兼容性,可以创建一个公共JS文件,用来生成xmlHttpRequest对象
代码1-1,public.js:
function createXMLHttp(){
/* var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
catch(e){}
try{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
return xmlHttp;
}
catch(e){} */
var xmlHttp;
if(window.ActiveXObject){
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else{
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
Ajax相关方法:
1. open(method,url)
初始化ajax对象
method：请求方式post、get
url：请求资源地址
2.setRequestHeader(header,value)
设置请求头信息
Header：头信息
Value：值
3.send(content)
发送请求
Content：所传递的参数只有在post请求时才需要将参数放在这里
相关属性:
lreadyState
Ajax对象的状态码,这个状态码会随时改变
0：表示对象已建立，但未初始化
1：表示对象已初始化，但未发送
2：已调用send方法进行请求
3：正在接收数据（接收到一部分）
4：接收完成
2. onreadystatechange
当ajax对象的状态码发生改变时，所触发的回调函数
3. status
http响应状态码
4.statusText
http响应的文本
5. responseText
http响应内容的文本
6. responseXML
http响应内容的xml数据
ajax代码1-2,demo01.html:
<html>
<script lanuage="juavascript" src="public.js"></script>
<script>
var xmlHttp = createXMLHttp();
xmlHttp.open('get','demo01.PHP');
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
alert(xmlHttp.responseText);
}
};
xmlHttp.send(null);
</script>
</html>
代码1-3,demo01.PHP:
<?PHP echo 'Hello Ajax !'; ?>
结果如下: