ajax请求与http事务，阻塞IO - xiaojiandong/blogAndResourceCollect GitHub Wiki
1. jquery ajax请求：
* jquery ajax请求
*/
function ajaxServer( userInfoData ){ // userInfoData -> 存储用户提交的数据
$.ajax({
url: 'http://yslstaticcontent.6edigital.cn/moetphotoweb/web/index.php?r=card%2Fcreate',
type: 'post',
data: { // 需要返还给服务端的数据
username : userInfoData.username,
sex : userInfoData.sex, // 0 -> 男，1 -> 女
imgpath1 : userInfoData.uploadImgArr[0], // 第1张img 的信息 ( 必须保证至少一个不为空，照片未传，则显示"" )
imgpath2 : userInfoData.uploadImgArr[1], // 第2张img 的信息
imgpath3 : userInfoData.uploadImgArr[2] // 第3张img 的信息
},
dataType: 'json',
//timeout: 200000,
error: function(){
console.log('请求失败');
},
success: function( resData ){
console.log('请求成功');
console.log(resData);
// 请求成功后，页面跳转，并且在url后面带上用户id
location.href = 'thanksLetter.html?userid=' + resData.data.id;
}
});
}
2. H5 viewport
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
3. 跨域问题
2.1 什么是跨域问题：
js在不同的域之间进行数据传送或通信。只要域名，协议，端口号不同，都认为是跨域。
2.2 在php代码部分加上 header('Access-Control-Allow-Origin: *')//*也可改为允许访问的url
2.3 jsonp
dataType: "jsonp", // jquery里 $.ajax()里的写法
crossDomain: true, // 允许跨域
jsonp: "callback",
jsonpCallback:"flightHandler",
success : function(){},
error : function(){}
2.4 通过修改 document.domain来跨子域
2.5 使用window.name来进行跨域
2.6 H5的window.postMessage方法实现跨域
http://www.cnblogs.com/2050/p/3191744.html
2.7 http三次握手：http://blog.csdn.net/xubo_zhang/article/details/11900947
4. 一次完整的http请求(事务)
// 图片链接：http://blog.csdn.net/liudong8510/article/details/7908093
// 文字链接：http://blog.sina.com.cn/s/blog_65f387740102v87s.html
/*
*1. 建立 TCP(或TCP/IP)连接，http是比tcp协议更高层次的协议，所以要先建立tcp协议；tcp端口号为80
*2. WEB浏览器向WEB服务器发送请求命令（如：GET/sample/hello.jsp HTTP/1.1）
*3. WEB浏览器向WEB服务器发送请求头信息
*4. WEB服务器应答（HTTP/1.1 200 OK）
*5. WEB服务器向WEB浏览器发送应答头信息
*6. WEB服务器向WEB浏览器发送数据，以Content-Type应答头信息描述的格式发送数据
*7. 关闭TCP连接，若在浏览器的Response Headers中加入 Connection:keep-alive，
* TCP连接发送后仍保持打开状态，浏览器可以继续通过相同的连接发送请求
*/
5. 设置cookie的工具方法
var SUBJ = {};
//1. 设置cookie
SUBJ.setCookie = function(name,value,exdays){ // 设置cookie， key，value，过期时间
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
//document.cookie = name + "=" + value + "; " + expires; // 中文存cookie会乱码
document.cookie = name + "=" + escape(value)+ "; " + expires; // 将中文cookie编码escape
/*
* document.cookie = name + "=" + encodeURIComponent(value) + "; " + expires;
* encodeURIComponent(urlpath)编码，用于对url进行编码
* decodeURIComponent(urlpath)解码，用于对url解码
*/
};
//2. 获取cookie
SUBJ.getCookie = function(){ // 获取cookie
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]); // 取cookie时，解码，之前用decodeURIComponent无效
}else{
return null;
}
};
//3. 清除cookie
SUBJ.clearCookie = function(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
return SUBJ;
// 用法：
if(!SUBJ.getCookie('firstVistedPage')){ // 第一次为true，会执行下面逻辑；第二次不会执行下面逻辑
SUBJ.setCookie('firstVistedPage','1',20) //cookie名firstVistedPage，值1，过期时间20天
alert('这只是在第一次访问页面的时候才会出现弹窗');
}
6. 封装js原生的ajax
function ajax(url,fnSucc,fnFaild){ // 自定义的ajax方法
// 1. 创建ajax对象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject('Microsoft.XMLHTTP'); // 针对IE6即一下版本
}
// 2. 连接服务器
oAjax.open('GET',url,true); // 是否异步:true(open方法必须为true)
/* 2.1 POST请求：
* oAjax.open('POST',url,true); //url是服务器上存放文件的地址，如:.txt,.xml,.asp,.php
* oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 添加http头
* oAjax.send('name=lucky&age=20');
*/
// 3. 发送请求
oAjax.send();
// 4. 接受服务器的返回
oAjax.onreadystatechange = function(){
if(oAjax.readyState == 4 && oAjax.status == 200){ // 完成
alert('success'); // oAjax.responseText字符串形式的响应数据；oAjax.responseXML形式的响应数据
document.getElementById("msg").html(oAjax.responseText); // 获取服务器返回的数据
}else{
alert('fail');
}
}
}
阻塞IO(同步),与非阻塞IO(异步)
node.js 的优缺点：
优点：基于事件驱动，无阻塞，适合处理并发请求
缺点：新的开源项目，不稳定
http://www.cnblogs.com/Anker/p/3254269.html
angular内置服务->$watch
https://github.com/xiaojiandong/AngularJsNote/blob/master/app5/MyService1.js