共计 3326 个字符，预计需要花费 9 分钟才能阅读完成。
AJAX 总结
- 电脑系统 windows10 专业版
- 在开发的过程中, 咱们依据需要可能会应用到 ajax, 上面是我对 ajax 的一些总结, 心愿对大家有所帮忙!
作用：部分异步刷新网页
- 异步申请：申请数据的时候不会影响页面的其余操作
- 申请分两种
- 异步
- 同步
- 前后端交互的形式
1、form（表单提交）：
2、标签拜访（src href）
3、AJAX
AJAX 的同步申请步骤
1、创立申请对象
var xhr; if(window.XMLHttpRequst){xhr=new XMLHttpRequst(); }else{//IE 5 6 7 兼容 xhr=new ActiveXObject(‘Microsoft.XMLHTTP’); }
2、启动申请
open(参数一，参数二，参数三)：用于设置申请形式和地址
参数一：申请形式
参数二：申请的 url
参数三：是否异地发送，默认为 true(异地)，false 为同步
留神：open() 的办法只是设置相干的申请信息，并不会真正发动申请
// 同步申请 xhr.open(‘get’,”http://localhost/self/AJAX-1/server.php?un=” + $(“#user”)\[0\].value + “&ps=” + $(“#pass”)[0].value”,false); // 异步申请 xhr.open(‘post’,””,true)
3、发送申请
send() 发送申请
参数要传输给后盾的数据，如果是 get 申请参数为 null(不倡议省略该参数，低版本火狐浏览器会报错)
xhr.send(null);
4、申请胜利之后
status：http 申请状态码
1XX：信息类状态，收到申请，正在解决
2XX：胜利类状态，胜利解决实现
3XX：重定向类状态，求情地址发生变化 (304 代表读缓存文件)
4XX：客户端谬误，
5XX：服务器端谬误，服务器辨认不出信息，不能对申请作出解决
// 同步申请 if(xhr.status >= 200 && xhr.status < 300 || 304 == xhr.status){responseText// 作为响应主体反映 ( 后盾返给咱们的数据) responseXML// 如果响应的数据类型为 text/xml 或者 application/xml，此属性中保留 // 后盾传输进来的数据 }
异步申请
readyState: 申请的状态
属性值
1，代表申请建设，还没有收回去
2，代表申请曾经发送，正在解决中
3，代表申请解决中，曾经拿了局部数据
4，代表申请实现，拿到了全副数据
xhr.onreadystatechange = function(){ if(xhr.readyState == 4){if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304){// 申请胜利 console.log(xhr.responseText) }else{console.log(‘ 申请失败 ’); } } }
AJAX 的异步申请步骤
1、创立申请对象
var xhr; if(window.XMLHttpRequst){xhr=new XMLHttpRequst(); }else{//IE 5 6 7 兼容 xhr=new ActiveXObject(‘Microsoft.XMLHTTP’); }
2、设置申请
// 同步申请 xhr.open(‘get’,”http://localhost/self/AJAX-1/server.php”,false); // 异步申请 xhr.open(‘post’,”http://localhost/self/AJAX-1/server.php”)
3、设置申请头
xhr.setRequestHeader(‘CONTENT-TYPE’,’application/x-www-form-urlencoded’);
4、发动申请
var parms=”un”+$(“#user”)\[0\].value + “&ps=” + $(“#pass”)[0].value; //un=123&ps=123 xhr.send(parms);
5、解决数据
// 同步申请 if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){console.log(xhr.responseText); }else{console.log(‘ 申请失败 ’); }
异步申请
xhr.onreadystatechange = function() { if (4 == xhr.readyState) {if (xhr.status >= 200 && xhr.status < 300 || 304 == xhr.status) {// 申请胜利 $(“#showDiv”)\[0\].innerHTML = xhr.responseText; } else {// 申请失败 $(“#showDiv”)[0].innerHTML = “ 申请失败 ”; } } }
AJAX 跨域
同域：协定、域名、端口号 完全一致称为同域。
协定：http,https
域名：一级域名，二级域名，三级域名 (数字越大范畴越大)
端口号：8080,443 等
https://www.oa.liangzi.com:8080
https: 协定
oa：三级域名
liangzi：二级域名
com: 一级域名
同源策略：
JS 规定，协定，域名，端口号 统一即为同域 (同源)，能够互相拜访，即便前面的门路不雷同，也是同源
为什么要有同源策略？
避免黑客通过 JS 脚本，歹意获取用户的账户和明码 (例如：通过 iframe 仿造银行网页)
跨域：
前端通过 AJAX 向服务器申请数据时，都须要思考和留神跨域问题
留神：只有 JS 中的 AJAX 才须要思考跨域，像 <img>,<link>,<script>,<iframe>, 等标签不必跨域，然而浏览器限度了他们的权限 (例如：获取 iframe 中同源页面的内容，也会跨域)
有三种跨域的形式
第一种：前端拿不同域的后盾数据（jsonp）
第二种：前端拿不同域的前端的数据（postMessage）
jsonp:
1、创立 script 标签
2、批改标签的 src
3、增加到 body 中
4、从 body 中删除
btn.onclick=function(){ //jsonP // 1、创立标签 var scriptM=document.createElement(‘script’); // 2、批改 src scriptM.src=’http://localhost/self/AJAX-2/…’; // 3、增加标签 document.body.appendChild(scriptM); // 4、删除标签 document.body.removeChild(scriptM); } // 后盾来回调的内容 function sucFun(data){console.log(data); }
postMessage:
postMessage 形式进行跨域是 HTML 5 新增的跨域技术
应用场景：
A 页面中有 iframe,iframe 中援用的是非同源 B 页面. 此时想要 A 和 B 两个页面互相通信的话，就会引起跨域，可通过 postMessage 实现信息跨域
A 页面
oneBtn.onclick = function() { // postMessage oneiFrame.contentWindow.postMessage(“hello”, “http://localhost:8080”); }
B 页面
window.onmessage = function(event){var even=event || window.event; switch (even.data){case ‘hello’: document.body.style.background=’red’; break; default: break;} }
相互配合实现跨域
// 本期对 ajax 总结到了这里就完结啦, 是不是很简略, 让咱们一起致力走向巅峰!
