乐趣区

关于ajax:AJAX总结一

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 总结到了这里就完结啦, 是不是很简略, 让咱们一起致力走向巅峰!

退出移动版