石家庄小学网站建设,证书在线制作生成器,建筑设计公司起名,资源专业网站优化排名Ajax复习
一、简介
AJAX 全称为 Asynchronous JavaScript And XML#xff0c;就是异步的 JS 和 XML。
一句话总结#xff1a;无刷新通信。
二、 特点
优点 无刷新通信 允许你根据用户事件来更新部分页面内容 缺点 没有浏览历史#xff0c;不能回退 存在跨域问题…Ajax复习
一、简介
AJAX 全称为 Asynchronous JavaScript And XML就是异步的 JS 和 XML。
一句话总结无刷新通信。
二、 特点
优点 无刷新通信 允许你根据用户事件来更新部分页面内容 缺点 没有浏览历史不能回退 存在跨域问题(同源) SEO 不友好 三、核心对象
XMLHttpRequestAJAX 的所有操作都是通过该对象进行的。
四、jQuery 中的 AJAX
get 请求
$.get(url, [data], [callback], [type])url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式xml, html, script, json, text, _default。post请求
$.post(url, [data], [callback], [type])url:请求的 URL 地址。 data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式xml, html, script, json, text, _default。五、跨域
同源策略 同源策略(Same-Origin Policy)最早由 Netscape 公司提出是浏览器的一种安全策略。同源 协议、域名、端口号 必须完全相同。 违背同源策略就是跨域 六、解决跨域
JSONP通过动态创建标签、从而实现跨域。CORS服务端解决跨域。
七、其他学习点
7.1、防止重复提交方案
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title重复请求问题/title
/head
bodybutton点击发送/buttonscript//获取元素对象const btns document.querySelectorAll(button);let x null;//标识变量let isSending false; // 是否正在发送AJAX请求btns[0].onclick function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x new XMLHttpRequest();//修改 标识变量的值isSending true;x.open(GET,http://127.0.0.1:8000/delay);x.send();x.onreadystatechange function(){if(x.readyState 4){//修改标识变量isSending false;}}}// abortbtns[1].onclick function(){x.abort();}/script
/body
/html7.1、缓存解决方案 加上时间戳作为参数。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleIE缓存问题/titlestyle#result{width:200px;height:100px;border:solid 1px #258;}/style
/head
bodybutton点击发送请求/buttondiv idresult/divscriptconst btn document.getElementsByTagName(button)[0];const result document.querySelector(#result);btn.addEventListener(click, function(){const xhr new XMLHttpRequest();xhr.open(GET,http://127.0.0.1:8000/ie?tDate.now());xhr.send();xhr.onreadystatechange function(){if(xhr.readyState 4){if(xhr.status 200 xhr.status 300){result.innerHTML xhr.response;}}}})/script
/body
/html
