AJAX &JSONP
Ajax : async javascript and xml
XML:可扩展的标记语言
运行在客户端的浏览器中的
AJAX四步:
1.var xhr = new XMLHttpRequest; // 创建一个ajax的对象
2.xhr.open("get","/data.txt",false);// 发送前的基本信息配置:配置请求的方式(GET,POST,PUT,DELET...),一个url, true代表异步, false同步,
[username], [userpass] 这两个一般不写,只有服务器做了安全限制
3这个是一个事件绑定的一个方法,监听状态的改变 状态改变就出发方法执行
.xhr.onreadystatechange=function(){
if(xhr.readyState=4 && /^2/d{2}$/.test(xhr.status)){
var val = xhr.respnseText;
}
};
4.xhr.send();
0 unsent
1 opened
2 hearers received
3 loading
4 done
2xx 成功
301 ---永久重新定向
302 --- 临时定向 服务器的负载均衡
304 ---本次获取的内容是读取缓存中的数据
400 ---客户端传递给服务器端参数出现错误
401 ---无权限访问
404 ---客户端访问的地址不存在
500 -- 未知的服务器错误
501 --服务器已经超负荷
兼容性问题
//js高阶编程技巧之“惰性思想” 能执行一次 不执行多次
var utils = (function(){
var flag = "getComputedSytle" in window
return{
getCss: function getCss(){
}
};
HTTP METHOD：
一下方式是没有任何的区别，post和get都能做，目前开发都是约定俗成的规范
GET:一般用于从服务器获取数据 给服务器少，从服务器拿
xhr.open("get","/getList?num=12) 一般用URL问号传参数的方法
POST:推送数据
一般都使用 请求主题的方式
xhr.open("post","/getList");
xhr.send('{"name":"aa","age":7}')
//get vs post
get 请求的内容存在大小的限制，而post没有
因为get通过URL传参给服务器，每个浏览器对于url的长度存在限制
GET请求会出现缓存（这个缓存不一定是304，POST是没有缓存 在心目中我们的GET一般不会让其出现缓存，清除缓存 后面加随机数请求 改变下地址 Math.random()
一般来说GET不安全，而POST相对安全一些
PUT:一般用于上传资源
DELETE:删除资源
HEAD:获取服务器的响应头信息
同步SYNC 异步ASYNC编程 JS是单线程的
定时器都是异步编程
事件绑定都是异步编程的
回调函数都可以理解为异步编程
在AJAX中可以使用异步编程
var count = 0
window.setTimeout(function(){
count++;
console.log(count);}),0)；
)varcount=0当多个定时器，如果执行完成循环都到达时间了 先执行时间短的
window.setTimeout(function() {
count++;
console.log(count);
},1000)；
AJAX的同步 异步编程
onreadystate =4 才进行其他 （同步）
只有异步才能 onreadystate =2 3 能接收到
function createXHR(){};
//ajax 实现请求的公共方法
function(){
var xhr = createXHR();
xhr.open("","",true);
xhr.onreadystatechange = function(){
}
}
JSONP 和AJAX 相同 都是客户端向服务器端发送请求 给服务器传递数据 从服务器端获取数据的方式
AJAX属于同源策略
JSONP属于非同源策略（跨域请求） 实现跨域的方式有很多种，终不过JSONP是最常用的
同源 非同源
1）协议
2）域名 IP
3）端口号
JSONP的原理
在SCRIPT的时间中，没有同源跨域这一说，只要是合法的SRC的属性中地址<script></script>
JSONP就是利用了SCRIPT的这个原理
1）我们首先把需求请求数据的，那个跨域的api数据接口的地址，赋值给SCRIPT的SRC 属性
2）把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器（URL问号传参）
3）服务器接收到请求后，需要进行特殊的处理：吧传递进来的函数名和他需要给你的数据拼接成一个字符串 ‘我传递的函数名（需要传给我们的数据）’ fn(data)
4）最后服务器把准备的数据通过HTTP协议返回给我们的客户端，我们的客户端发现 执行函数，而且还给函数传递了一堆的数据，那个数据就是我们想要的
function aaaa(data){
}
xxxxxx&callback=aaaa
服务器返回一个 text\JAVASCRIPT charset=utf-8 fn([........])
JQUERY中的ajax 和jsonp
AJAX
$.ajax({
url:"data.txt"
type:"get"
dataType:"json"
data:null,
async:true,
timeout:1000,
cache: false,(自动加随机数)
success:function(data){..}},
error:function(){}
);
JSONP 都是GET和异步请求
$.ajax({
url:"xxxxxxxxx"
type:"get"
dataType:"jsonp"
success:function(data){
});
优化 请求次数的减少 CSS 图片 CSS SPRITE 雪碧图(position图) JS合并
图片延迟加载 Ajax和资源文件请求原理是一样的
URI/URL/URN
ulr:统一资源定位符
http: 传输协议(理解为快递小哥) v.qq.com :域名 :80 :端口号 index.html:请求的资源文件名 ?name=xxx&age=x :URL问号传参 #bbs :URL的HASH (锚点定位)
传输协议 HTTP:超文本传输协议,除了传输文本外还可以传输其他的东西,例如:XML等 80
HTTPS:更加安全的HTTP (SSL) 443
FTP:文件传输协议 21
