实现Ajax的步骤
<script>
//点击按钮来触发AJAX的异步交互
//是否只有一个事件才能触发ajax的交互呢?
//不是,只是为了能让效果更加的清晰
var btn=
document.getElementById("btn");
btn.onclick=function(){
//实现AJAX步骤,总共是4步
//1.创建XMLHttpRequest对象
var xhr=getXhr();//定义变量调用函数
/*2.与服务器端建立连接
使用XMLHttpRequest对象的open(method,url,async)方法
*method-请求类型(GET或POST)
*url-请求地址
*async-(Boolean)是否异步
*true-异步(默认值)
*false-不异步(同步)
注意:
*新版本的XMLHttpRequest对象的w3c官网规范不建议使用同步方式
*/
xhr.open("GET","01.php?user=zhangwuji&pwd=12345",true);//open这个方法没有返回值,所以做到这一步还没有办法去测试它
/*3.向服务器端发送请求数据
send(data)方法
*data-请求的数据内容
注意
*请求数据的格式
name=value&name=value&....
请求类型
*GET方式下
*send()方法其实是失效的
*send()方法不能被省略
send(null)
*请求数据被添加在请求地址(url?)后
POST方法
*/
xhr.send(null);
/*4.接收服务器端的响应数据
*onreadystatechange事件-监听服务器端的通信状态
*readyState属性-表示服务器端的通信状态
*0-(服务器端)未初始化
*1-正在连接(服务器端)
*2-(服务器端)正在接收
*3-(服务器端)正在响应
*4-(服务器端)响应完毕
*status属性-表示服务器端的状态码
*responseText属性-用于接收服务器端响应的Text格式的数据
*真正关心的是4,因为只有为4时,才能接收到完整的内容
*/
xhr.onreadystatechange=
function(){
//判断服务器端的通信状态
if(xhr.readyState==4){
//判断当前请求一定是成功的
if(xhr.status==200){
//如何接收响应数据
var data=
xhr.responseText;
}
}
}
//定义创建XMLHttpRequest对象的函数
function getXhr(){
//总共3步
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{//IE浏览器
xhr=new
ActiveXObject("Microsoft.XMLHttp"
);
}
return xhr;
}
</script>
服务器端