什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
实现ajax:
1.比较传统的方式:隐藏帧布局 iframe
在form中,加入target,把iframe的name值写入target,实现把php页面内容传入框架中。
2.原生ajax的实现:
步骤:(1)创建xhr对象:
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject),所以要设置浏览器兼容性。
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft');
}
(2)准备发送 发送方式有get、post
get请求数据需要获取到url地址栏的数据添加在PHP路径之后,添加 ?
get: xhr.open('get','PHP路径 ?数据拼接',true);// true表示异步,false表示同步
post请求数据时,不是直接将数据添加在url之后,而是直接通过send发送请求
post:xhr.open('post','PHP路径',true);
(3)执行发送操作:
发送之前需要加入`xhr.setRequestHeader('Concent-Type','application/x-www-form-urlencoded'); 向请求添加http头,防止出错
get:`xhr.send(null);` get特定发送格式
post:`xhr.send(数据);`
(4)指定回调函数:onreadystatechange
每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
readystate:表示响应状态码(0-4);
0:请求未初始化
1:服务器链接已建立
2:请求已被服务器接收
3:正在解析请求...
4:解析完成,响应已就绪
status:状态;
200: "OK" 服务器返回数据正常;
301 - 资源(网页等)被永久转移到其它URL
404: 未找到页面
500 - 内部服务器错误
.............
response.Text 获得字符串形式的响应数据
response.XML 获取xml形式的响应数据
xhr.onreadystatechange=function(){
if(xhr.readystate==4){ //此时数据可以使用,但不一定正常,还需判断
if(xhr.status==200){ //数据正常
xhr.responseText;// 获得字符串形式的响应数据
}
}
}