1,局部刷新 、 异步记载
Ajax全程 Asynchronous And XML
2,Ajax 4个步骤
a,创建对象(兼容问题)
var xhr =null;
if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }
else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6 }
b,准备发送
//由于是get方法,url需要带上参数
xhr.open("get","check.php?userName=?",false);
第一个参数:请求方式(对应后太街口的访问方式)
第二个参数:URL
第三个参数:同步还是异步,false同步,true异步(默认) ,如果是false需要将回调函数删除
c,执行发送
xhr.send(null);
参数:get请求: null / post请求:发送时参数请求
var param = " username="+username;
//设置xhr 请求头信息,这个步骤只有post请求才有
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(param);
d,回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
if(xhr.status==200){
var result = xhr.resphonseText;
xhr.responseXML;
JSON.parse(result);
}
}
3,同步和异步原理
异步原理是单线程加事件队列实现的。
4,封装
function myAjax(type,url,params,datatype,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(type=="get"){
if(params&¶ms!=null){
url+="?"+params;
} }
xhr.open(type,url,true);
if(type=="get"){
xhr.send(null);
}else{
xhr.setRequestHeader("content-type,"application/x-www-form-urlencoded");
xhr.send(params);
}
xhr.onreadystatechange=function(){
if(xhr.readuState==4){
if(xhr.status==200){
var result = null;
if(datatype == "json"){
result = xhr.reponseText;
result = JSON.parse(result);
}else if(datatype=="xml"){
result = xhr.reponseXML;
}else{
result = xhr.reponseText;
}
if(callback){ callback(result); }
}
} } }
5,同源策略
使用ajax的页面和ajax的URL需要同源才能正常访问,非同源访问不到
同源:协议相同 、 域名相同、端口相同
6,跨域
本质:服务器返回了一个方法调用,这个方法是我们事先定义好的,而方法中的参数就是我们想要的数据.
动态创建script标签
动态指定回调函数
同在script标签中定义方法效果一致:
封装: