跨域ajax请求如何保持session状态

1.提出问题:

Ajax在跨域请求的时候,session会话会丢失,每请求一次都会生成一个新的session_id,即当成一个新的会话,无法跟踪用户的状态,这个问题该如何解决呢?

2.解决办法:

第一步:前端ajax部分:

$.ajax({
  url: 'http://my.test.com/server.php', //跨域 
  xhrFields:{withCredentials: true}, // 发送凭据,表示保持会话 
  dataType: 'json', 
  type: 'post', 
  data: {'name':'fdipzone'},          
  success:function(ret){ 
    if(ret['success']==true){ 
     alert('cookie:' + ret['cookie']); 
   } 
  } 
});

第二步:后端服务部分(server.php):

//允许跨域访问的来源域名,如:http://localhost:8080,只能设置一个,
//以下设置的是任意来源
header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
//允许跟踪会话,保持session或cookie
header('Access-Control-Allow-Credentials:true');
//允许请求的方式:GET和POST
header('Access-Control-Allow-Methods:GET,POST');
//允许的headers
header('Access-Control-Allow-Headers:x-requested-with,content-type');

第三步:到处前后端就实现了跨域访问,并且能够跟踪会话,大功告成!

注意事项:

1.当Access-Control-Allow-Credentials设为true时,不能如下这么设置,必须绑定一个具体的域名:
header('Access-Control-Allow-Origin:*');//不对
2.在vue.js框架下实现跨域时:在main.js中开启跨域配置即可:
Vue.http.options.emulateJSON = true
Vue.http.interceptors.push(function (request, next) {     
   request.credentials = true     
   next()
})

 

 

ajax图片上传:ajaxfileupload插件json格式返回问题

ajaxfileupload.js无刷新上传插件原理:通过iframe实现无刷新上传效果,因此其浏览器的兼容性很好,能兼容所有浏览器,包括ie7+,但是这个插件本身源码有一些问题:

1.在高版本的jquery中会提示找不到某一方法;

2.返回json格式时,执行的是error方法,而不是success方法。

经多方研究解决了这两个问题,修复后的ajaxfileupload.js下载地址:

https://pan.baidu.com/s/1jImLGF0

JS encodeURI和encodeURIComponent

一、最常用的encodeURI和encodeURIComponent

对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+’
encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!*()’
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说,encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

二、最重要的,什么场合应该用什么方法

1、如果只是编码字符串,不和URL有半毛钱关系,那么用escape。
2、如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
比如

encodeURI("http://www.cnblogs.com/season-huang/some other thing");

编码后会变为

"http://www.cnblogs.com/season-huang/some%20other%20thing";

其中,空格被编码成了%20。但是如果你用了encodeURIComponent,那么结果变为

"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

看到了区别吗,连 “/” 都被编码了,整个URL已经没法用了。

3、当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。

var param = "http://www.cnblogs.com/season-huang/"; //param为参数
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

看到了把,参数中的 “/” 可以编码,如果用encodeURI肯定要出问题,因为后面的/是需要编码的。

PHP和JS判断手机还是电脑访问

当用户使用手机等移动终端访问网站时,我们可以通过程序检测用户终端类型,如果是手机用户,则引导用户访问适配手机屏幕的移动站点。本文将介绍分别使用PHP和JAVASCRIPT代码判断用户终端类型。

PHP版

我们使用PHP的$_SERVER[‘HTTP_USER_AGENT’]来获取手机用户浏览器的用户代理,然后匹配已有的各种手机浏览器代理库,如果含有匹配的关键字,则判断为手机(移动终端)用户。

function is_mobile() { 
 $user_agent = $_SERVER['HTTP_USER_AGENT']; 
 $mobile_agents = array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi", 
 "android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio", 
 "au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu", 
 "cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ", 
 "fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi", 
 "htc","huawei","hutchison","inno","ipad","ipaq","iphone","ipod","jbrowser","kddi", 
 "kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo", 
 "mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-", 
 "moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia", 
 "nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-", 
 "playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo", 
 "samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank", 
 "sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit", 
 "tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin", 
 "vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce", 
 "wireless","xda","xde","zte"); 
 $is_mobile = false; 
 foreach ($mobile_agents as $device) { 
 if (stristr($user_agent, $device)) { 
 $is_mobile = true; 
 break; 
 } 
 } 
 return $is_mobile; 
}
Javascript版

您也可以直接在前端页面上加入一段Javascript脚本来判断用户的终端类型。Javascript也是通过获取浏览器的user-agent信息,然后匹配已有的user-agent信息库。

if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry| 
WebOS|Symbian|Windows Phone|Phone)/i))) { 
    location.replace("http://m.helloweba.com") 
}else{ 
    document.write("请使用手机访问."); 
}

jquery常用数组函数

1.$.each(array, [callback]) 遍历
var arr = ['javascript', 'php', 'java', 'c++', 'c#', 'perl', 'vb', 'html', 'css', 'objective-c'];
$.each(arr, function(key, val) {
	// firebug console
	console.log('index in arr:' + key + ", corresponding value:" + val);
	// 如果想退出循环
	// return false;
});

2.$.inArray(val,array)判断值是否存在于数组中

确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了.

//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素
console.log($.inArray('javascript', arr));

js常用数组函数

定义:

var arrList = ['a','b','c','d'];

var arrOther = [1,2,3];

获取数组第一个元素:

arrList.shift();

获取数组最后一个元素:

arrList.pop();

在数组arrList最前面添加一个新元素:

arrList.unshift('e');

在数组arrList最后面添加一个新元素:

arrList.push('e');

将两个数组合并在一起:

arrList.concat(arrOther);

删除数组arrList中的b元素:

arrList.splice(1,1);//参数一表示要删除的键,参数二表示要删除的元素数量

参考:
http://www.w3school.com.cn/jsref/jsref_obj_array.asp

javascript iframe 操作(一)

[兼容所有浏览器 包括IE7/8/9]

1.父页面中获取IFRAME的WINDOW对象

获得了window对象后,就可以调用iframe页面中定义的方法等。

IE:可以通过iframeId、window.iframeId、window.iframeName、window.frames[iframeId]、window.frames[iframeName]、window.frames[iframeIndex]和iframeElement.contentWindow这6种方法来获取iframe的window对象。

FF:可以通过window.iframeName、window.frames[iframeName]和iframeElement.contentWindow这3种方法获取window对象。

总结:为了兼容大多数浏览器,应使用iframeElement.contentWindow来获取。见如下代码:

var iframe = document.getElementById('iframe1').contentWindow;

2.父页面中获取IFRAME的DOCUMENT对象

总结:应使用以下两方法来获取,见代码:

<iframe id="iframe1" src="frame1.html"></iframe>

<script type="text/javascript">

    //获取iframe的document对象

    //方法1:先获取window对象再通过window.docuemnt

    var iframe = document.getElementById('iframe1').contentWindow.document;

    //可以使用jquery操作

    $(iframe).find('#con').html('test');

    //方法2:分支判断

    function getIframeDom(iframeId) {

        return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;

    }

</script>
注:为了防止iframe没有加载完,建议将获取iframe元素的操作放在这个里面:等待iframe加载完[ifrm为iframe的id值]
    document.getElementById("ifrm").onload = function (){
        
    }

3.IFRAME页面获取父页面的WINDOW对象

parent:父页面window对象
window.parent
top:顶层页面window对象
window.top
self:始终指向当前页面的window对象(与window等价)

如果窗口是顶级窗口,那么parent==self==top
根据这个可以防止网页被嵌套:

if(window!=window.top){
    window.top.location.href=window.location.href:
}

 

兼容性:适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数。

注:chrome要求在服务器环境下进行iframe操作。

参考资料:http://mao.li/javascript/javascript-iframe/

js如何打印对象

js调试中经常会碰到输出的内容是对象而无法打印的时候,光靠alert只能打印出object标示,却不能打印出来里面的内容,甚是不方便,于是各方面整理总结了如下一个函数,能够将数组或者对象这类的结果一一打印出来,具体代码如下:

function writeObj(obj){ 
    var description = ""; 
    for(var i in obj){   
        var property=obj[i];   
        description+=i+" = "+property+"\n";  
    }   
    alert(description); 
}