原生ajax笔记 – 随身笔记

_ajax笔记.txt

 //以下是同步
 var xhr=new XMLHttpRequest(); //用ajax就要创建一个XHR对象，这个不兼容IE6
 jQuery(document).click(function(){
  xhr.open('get','1.php?'+Math.random(),false); //get方式，请求地址1.php,同步。这步只是负责工作前的准备,没真正启动ajax。
  xhr.send(null);//如果有数据顺便发送给服务器就填写,如果没有也必须要写null,真正启动ajax
  if(xhr.status==200){ //要想获取服务器传过来的数据就要判断，是否请求成功
    document.title=xhr.responseText;//从服务器获取到的数据
  }else{
    document.title='出错';
  }
 });

//以下是异步
 var xhr=new XMLHttpRequest(); //用ajax就要创建一个XHR对象，这个不兼容IE6
 jQuery(document).click(function(){
  xhr.onreadystatechange=function(){
    if(xhr.status==200 && xhr.readyState==4){ //要想获取服务器传过来的数据就要判断，是否请求成功
      document.title=xhr.responseText;//从服务器获取到的数据
      // xhr.getAllResponseHeaders(); //获取到响应的全部信息
      // xhr.getResponseHeader('Content-Type'); //获取 Content-Type信息
    }else{
        document.title='出错';
    }
  }
  xhr.open('get','1.php?'+Math.random(),true);
  xhr.send(null);//如果有数据顺便发送给服务器就填写,如果没有也必须要写null,真正启动ajax
  //xhr.abort() //这里取消异步
 });

//异步，用post方式，向服务器传递数据
 var xhr=new XMLHttpRequest(); //用ajax就要创建一个XHR对象，这个不兼容IE6
 jQuery(document).click(function(){
   xhr.onreadystatechange=function(){
     if(xhr.status==200 && xhr.readyState==4){ //要想获取服务器传过来的数据就要判断，是否请求成功
          document.title=xhr.responseText;//从服务器获取到的数据
       // xhr.getAllResponseHeaders(); //获取到响应的全部信息
       // xhr.getResponseHeader('Content-Type'); //获取 Content-Type信息
     }else{
          document.title='出错';
     }
   }
   xhr.open('post','1.php?'+Math.random(),true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交，不然用post提交数据给服务器是接受不到数据的
   xhr.send('name=xgllseo&age=100');//这些写你要传递的数据,如果没有也必须要写null,真正启动ajax
 });

 //获取json数据
 var xhr=new XMLHttpRequest(); //用ajax就要创建一个XHR对象，这个不兼容IE6
 jQuery(document).click(function(){
     xhr.onreadystatechange=function(){
       if(xhr.status==200 && xhr.readyState==4){ //要想获取服务器传过来的数据就要判断，是否请求成功
          document.title=JSON.parse(xhr.responseText);//获取json数据
       }else{
          document.title='出错';
       }
      }
      xhr.open('get','1.json?'+Math.random(),true);
      xhr.send('name=xgllseo&age=100');//这些写你要传递的数据,如果没有也必须要写null,真正启动ajax
 });

//跨域 并发送数据给服务器
function ajax(params) { 
 params = params || {}; 
 params.data = params.data || {}; 
 var json = params.jsonp ? jsonp(params) : json(params); 
 // jsonp请求 
 function jsonp(params) { 
 //创建script标签并加入到页面中 
 var callbackName = params.jsonp; 
 var head = document.getElementsByTagName('head')[0]; 
 // 设置传递给后台的回调参数名 
 params.data['callback'] = callbackName; 
 var data = formatParams(params.data); 
 var script = document.createElement('script'); 
 head.appendChild(script); 
 //创建jsonp回调函数 
 window[callbackName] = function(json) { 
   head.removeChild(script); 
   clearTimeout(script.timer); 
   window[callbackName] = null; 
     params.success && params.success(json); 
   }; 
　　//发送请求 
 script.src = params.url + '?' + data; 
 //为了得知此次请求是否成功，设置超时处理 
  if(params.time) { 
    script.timer = setTimeout(function() { 
      window[callbackName] = null; 
      head.removeChild(script); 
      params.error && params.error({ 
        message: '超时' 
      }); 
    }, time); 
   } 
 }; 
 //格式化参数 
 function formatParams(data) { 
 var arr = []; 
 for(var name in data) { 
 arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); 
 }; 
 // 添加一个随机数，防止缓存 
 arr.push('v=' + random()); 
 return arr.join('&'); 
 } 
 // 获取随机数 
 function random() { 
   return Math.floor(Math.random() * 10000 + 500); 
 }
}



ajax({ 
 url: 'test', // 请求地址
 jsonp: 'jsonpCallback', // 采用jsonp请求，且回调函数名为"jsonpCallbak"，可以设置为合法的字符串
 data: {'b': '异步请求'}, // 传输数据
 success:function(res){ // 请求成功的回调函数
   console.log(res); 
 },
 error: function(error) {} // 请求失败的回调函数
});



服务器设置：
$data='[{name:"chenge"},{age:24}]'; //这里就是要返回给客户端的数据，必须还是json格式的，不然就出错。之前设置了也必须设置dataType:"jsonp"
$str=$_GET['callback'].'('.$data.')';
echo $str;