ajax
1.什么是ajax
asynchronous javascript and xml,是一种异步加载数据的方式，可以使用ajax实现页面的局部刷新。
2.如何使用ajax
ajax的核心对象是XMLHttpRequest
1.get:向服务器取得数据，根据服务器的实现不同，get，post也可以实现相同的功能，当然也都能向服务器传送取得数据，和rxe标准是有冲突的，不建议这样使用。
get数据放到了URL中，因为放在了URL中，get发送的数据是有限制的，2048个字节，会产生一个安全性的隐患。
2.post：向服务器发送数据，POST请求放到了请求体中，会用https对包进行加密，安全性比较好
1.创建AJAX
var xhr = new XMLHttpRequest();
4.监听请求
xhr.onreadystatechange = function(){ //当xhr的readystate属性发生了改变，则触发事件。 //readystate状态， //0表示=》xhr对象已经创建，但是没有初始化，相当于new了一个对象，但是没有open(); //1表示，xhr已经调用open(), //2表示，xhr已经发出了ajax请求，调用了send()的时候。 //3表示，数据已经返回了部分 //4表示，数据已经全部返回 if(xhr.readyState !== 4){ return; } if(xhr.status >= 200 && xhr.status <= 300){ //数据存放在了xhr.responseText的属性中(String) document.querySelector("h1").innerHTML = xhr.responseText; }else{ console.error("请求出错"); } }
2.打开这个对象
xhr.open("get","../js/test.txt",true);//true代表异步方式，false就是同步的方式发送
3.发送请求
xhr.send();
post方法
1.创建一个xhr的对象(post)
var xhr = new XMLHttpRequest();
5.监听数据是否返回。
xhr.onreadystatechange = function(){ if(xhr.readyState !== 4){ return; } if(xhr.status >= 200 && xhr.status <= 300){ //我们需要一个JOSN的对象， var resp = JSON.parse(xhr.responseText); if(resp.result){ console.log("ok"); }else{ console.log("error"); } }else{ console.error("请求出错"); } }
//2.配置这个对象。post的数据放入了body中，就如同传入一个参数被send当做一个body的内容发送。
xhr.open("post","../js/test.php",true);
//3.为了让服务器理解表单格式，设立表单头和方法
xhr.setRequestHeader("content","application/x-www-form-urlencoded");
//4.发送表单数据
xhr.send("user=gap&password=123456");
3.JSON
1.Javascript Object Natation,是一种轻量级的数据交换格式。是由ECMA定义的，function和undefined是不能作为值传递的。
数据格式： Object:{"name":"john","age":18};
arr:["john",18];
value:string,number,object,array,true false,null
2.JS的对象子集，于JS进行无缝对接。
3.JSON数据与JS对象的转换。
JSON:JS:JSON.parse(data);
JS:JSON:JSON.stringify(JSObj);
1.回调地狱，promise
1.回调地狱
x= getDate();
y = getMoreDate();
z = getMoreDate();
如果当x还在数据传输中，没有完成数据返回，就被y调用，就会出现错误。
如果使用一层一层的回调，会导致回调层级特别深，开发维护成本高，所以在es6中提出了promise对象。
getDate(function(x){
getMoreDate(x,function(y){
getMoreDate(y,function(z){
process z;
})
})
})
2.promise
1.可以通过promise构造函数创建一个对象，可以解决回调地狱，它不仅支持一个回调，还支持回调与回调之间的连续调用。
2.这个promise实际上有三种状态，pending等待，fulfill满足了条件的返回状态，reject延时对象，没有满足
3.promise的构造函数有一个参数，是一个回调，他接受两个参数，这两个参数都能改变promise的状态，第一个参数可以从pending切换到fulfill，第二个参数可以将pending切换到reject状态。
var prom = new Promise(function(resolve,reject){
setTimeout(function(){
var num = Math.floor(Math.random() * 100);
if(num % 2 === 0){
resolve(num);
}else{
reject(num);
}
},3000)
});
//使用promise的一个回调,成功的时候会调用then函数，失败的时候调用catch函数。
prom.then(function(num){
console.log("resolve:" + num);
}).catch(function(num){
console.log("reject:" + num);
});
3.Ajax的依赖调用。
1例子，有一篇文章，第一次取得第一段文章，第二张取得第二段文章，第三次取得第三段文章，第四次取得第四段文章。
意味着取得有顺序，第一次返回之前，不能运行第二次。这和回调地狱有点相似，可以用promise来解决这种链式调用，链式调用过深难以维护。
var article = "";
$.get("../para/p1.txt",function(p1){
article += p1 + "<br />";
$.get("../para/p2.txt",function(p2){
article += p2 + "<br />";
$.get("../para/p3.txt",function(p3){
article += p3 + "<br />";
$.get("../para/p4.txt",function(p4){
article += p4 + "<br />";
$("h1").html(article);
})
})
})
})
4.Promise解决Ajax的依赖调用。
function getDate1(){
return new Promise(function(resolve,reject){
$.get("../para/p1.txt",function(p1){
resolve(p1);
})
})
}
function getDate2(){
return new Promise(function(resolve,reject){
$.get("../para/p2.txt",function(p2){
resolve(p2);
})
})
}
function getDate3(){
return new Promise(function(resolve,reject){
$.get("../para/p3.txt",function(p3){
resolve(p3);
})
})
}
function getDate4(){
return new Promise(function(resolve,reject){
$.get("../para/p4.txt",function(p4){
resolve(p4);
})
})
}
var article = "";
//getDate返回了一个promise对象，所以可以调用then方法
getDate1().then(function(p1){
article += p1 + "<br />";
return getDate2();
}).then(function(p2){
article += p2 + "<br />";
return getDate3();
}).then(function(p3){
article += p3 + "<br />";
return getDate4();
}).then(function(p4){
article += p4 + "<br />";
$("h1").html(article);
});
2.Ajax同源策略
1.什么事同源策略，
浏览器的一种安全机制，源指，协议，域名，端口号，当我们脚本在运行时，浏览器会检测，它运行的脚本和取得数据与我们的html页面所在的源是否相同，相当于协议，域名，端口号是否和浏览器html的协议，域名，端口号是否一致。如果相同则是同源请求，如果不同就是跨域请求。默认情况下，浏览器不支持跨域请求。
2.解决跨域问题
1.JSONP
//这个方法不受同源策略的限制。也可以用js生成方法名，比较灵活
function getData(da1){
console.log(da1);
}
var script = document.createElement("script");
script.id = "JSONP";
script.src = "../js/JSONP.js";
document.body.appendChild(script);
运用百度取词练习
function getData(data){
var script = document.querySelector("#JSONP");//选择刚创建的jsonp
script.parentNode.removeChild(script);//因为input的keyup事件，所以每次输入都清除掉上一次的结果
$("ul").html("");//同时也清楚掉ul里面的结果。
for(var i = 0;i < data.g.length;i++){//因为返回的是对象，遍历对象
for(var index in data.g[i]){//用for in 方法遍历对象
var p1 = data.g[i][index]; //将对象的值写入p1
var p2 = index;}
$("<li>"+ p1 + "--" + p2 +"</li>").appendTo("ul");
}
}
function getList(wd){
var script = document.createElement("script");//创建一个script
script.id = "JSONP";//id
script.src = "https://www.baidu.com/sugrec?&prod=pc&cb=getData&wd=" + wd;
document.body.appendChild(script);//将jsonp文件放入树中；
}
$("input").keyup(function(){
var wd = $(this).val();
getList(wd);
});
2.CORS
跨域资源共享是一般浏览器都支持的功能(ie10以上)，由浏览器自动完成，cors的ajax和普通的ajax实现是一样的，cors关键在服务器端支持了跨域通信就行，普通ajax直接发出cors请求，在头信息中包含origin的字段，origin源是由浏览器自动追加的，指本次请求来自哪个源，服务器就根据这个值是否同意执行寻求，浏览器加了origin源之后，如果服务器发现origin不再它的许可范围内，就返回一个正常的http的响应，浏览器就发现这个回应的头里面没有包含跨域请求允许的信息，就知道出错，然后抛出一个异常，否则，浏览器允许跨域，返回对应的状态以及状态码200，
$.get("http://localhost/cors/cors.php",function(data){
console.log(data);
})