1、ajax是什么及其工作原理
Ajax 由 HTML、JavaScript™技术、DHTML和 DOM 组成,这一杰出的方法可以将笨拙的Web 界面转化成交互性的Ajax 应用程序。
2、创建XMLHttpRequest对象
对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作
首先我们来了解怎么在javascript中创建这个对象:
JS代码:
xmlHttp= new XMLHttpRequest();
这对于规范的Js支持的浏览器来讲是没错的恰恰相反IE却就不支持,所以没办法我们只能做个判断再创建一个IE支持的
xmlHttp= new ActiveXObject('Microsoft.XMLHTTP');
3、XMLHttpRequest对象相关方法
打开请求
XMLHttpRequest.open(传递方式,地址,是否异步请求)
准备就绪执行
XMLHttpRequest.onreadystatechange
获取执行结果
XMLHttpRequest.responseText
index.php文件
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<a href="#" οnclick="funphp100('a')">a</a>
<a href="#" οnclick="funphp100('b')">b</a>
<a href="#" οnclick="funphp100('c')">c</a>
<div id="php100"></div>
for.php 接收参数文件,用于参数处理
<?php
if($_GET[id]){
for($i;$i<10;$i++){
echo $_GET[id];
}
}
?>
ajax.js js文件用于ajax技术
var xmlHttp;
function xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function funphp100(url){
xmlhttprequest();
xmlHttp.open("GET","for.php?id="+url,true);
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(null);
}
function byphp(){
var byphp100=xmlHttp.responseText;
document.getElementById('php100').innerHTML=byphp100;
}