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); })
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
