从发请求到AJAX到同源政策
1 发请求的各种方法
- 使用form标签（会在当前页面刷新或者新开一个页面刷新）
<form action="" method=post/get> <input type="submit"> </form> - 使用a标签（会在当前页面刷新或者新开一个页面刷新）
<a id=x href="">click</a> //让浏览器帮你自动点击 <script>x.click</script>
- 使用image标签（只能以图片的形式展示）
- 使用link标签（只能以 CSS、favicon 的形式展示）
<script> var link = document.createElement('link') link.rel = 'stylesheet' link.href = ' ' //必须要放到head中 document.head.appendChild(link) </script> - 使用script标签（只能以脚本的形式运行）
<script> var script = document.createElement('script') script.src = ' ' //必须要放到head或者body中 document.head.appendChild(script) </script> - 等其他几种
2 新的请求方式AJAX
- AJAX的产生
- 以上发请求的各种方法都有缺点，那么有什么方式可以实现无论什么请求都行，想用什么形式展示就用什么形式展示？
- IE5在JS中引入activeX对象（API），使 JS 可以直接发起 HTTP 请求（IE从IE6就开始骄傲堕落了。。）
- 随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范（AJAX奠定了前端的基础）
- 什么是AJAX？
- AJAX（异步的JavaScript和XML）四个字母的含义（A：异步 J：JavaScript A：and X：XML）
- AJAX需要满足三个条件
- 使用 XMLHttpRequest 发请求
- 服务器返回 XML 格式的字符串
- JS 解析 XML，并更新局部页面（AJAX默认异步)
- 简单说就是用JS发请求用JS处理响应
-
XML格式的字符串太麻烦了，目前使用JSON
- 什么是JSON？
- JavaScript Object Notation, JS 对象简谱，是一种轻量级的数据交换格式（抄袭JS的一门语言，是一门数据格式化语言）
-
和JS相比数据结构中没有抄袭undefined、function、symbol
- 和JS相比，JSON的字符串的首尾必须是双引号，格式如{""}（⚠️：JSON中用的都是双引号，没有单引号）
- 写一个AJAX
myButton.addEventListener('onclick',function(){ let request = new XMLHttpRequest() request.open('GET','/xxx') //想怎么请求就怎么请求 request.send() request.onreadystatechange=function(){ if(request.readyState === 4){ console.log('请求响应完毕了') if(request.status >= 200 && request.status < 300){ //console.log('说明请求成功') //console.log(request.responseText) let string = request.responseText //把符合JSON语法的字符串，转化成JS对应的值 //JSON.parse是浏览器提供的。document.getElementById也是浏览器提供的(也有很久以前用js自己写过叫json3.js) let object = window.JSON.parse(string) //console.log(object) }else if(request.status >= 400){ //console.log('说明请求失败') } } } }) //题外话，怎么看一句执行用了多长的时间？ //console.time(); //var a=1; //console.timeEnd(); //readyState的五种状态是（0、1、2、3、4） //如果状态是4，表示整个请求过程已经完毕 - 用AJAX设置请求的四个部分
let request = new XMLHttpRequest() //第一部分：open('请求的方式'，'请求协议&Host') request.open('GET','/xxx') //想怎么请求就怎么请求 //第二部分：request.setRequestHeader('设置的类型','设置的内容') request.setRequestHeader('Content-Type','x-www-form-urlencoded') //第三部分是空格不用设置 //第四部分：request.send('第四部分内容') request.send('第四部分') request.onreadystatechange=function(){}
- 用AJAX获取响应的四个部分
request.onreadystatechange=function(){ if(request.readyState === 4){ console.log('请求响应完毕了') //响应的第一部分获取 console.log(request.status) //200 console.log(request.statusText) //OK if(request.status >= 200 && request.status < 300){ console.log('说明请求成功') //所有响应的Header获取 console.log(request.getAllResponseHeaders()) //响应的第二部分获取 console.log(request.getResponseHeader(Content-Type)) //响应的第三部分是空格 //响应的第四部分获取 console.log(request.responseText) } }
- 响应的四个部分是在服务器的node.js里设置的
//如下为server.js中的代码 //path==='你的路径' if(path === '/'){ //根据路径造一个字符串 let string = fs.readFileSync('./index.html', 'utf8') //设置响应的第一部分。statusCode，200/400 response.statusCode = 200 //设置响应的第二部分 response.setHeader('Content-Type', 'text/html;charset=utf-8') //设置响应的第四部分 response.write(string) //然后结束 response.end() }
3 同源政策
- 同源政策简单说就是：
- 是浏览器安全的基石（只要你不是不是某个页面的JS，就不能向这个页面发起AJAX请求（除了AJAX，其他的请求都可以））
- 起源：
- 1995年由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策
- 目的：
- 是为了保证用户信息的安全，防止恶意的网站窃取数据。（因为AJAX可以读取浏览器响应的内容，如果没有同源政策的限制，就可以随便get、post，则互联网即没有隐私可言）
-
同源政策的内容：
- 随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- AJAX 请求不能发送。
-
"同源"即"三个相同"，只有 协议+端口+域名 一模一样才允许发 AJAX 请求
-
如：http://baidu.com 不可以向 http://www.baidu.com 发请求
- 如http://baidu.com:80 不可以向 http://baidu.com:81 发请求）
-
- 随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
4 如何规避同源
- 向另一个协议+端口+域名不一样的网页发起请求
- 方法一：用JSONP （不能post）
- 方法二：用CORS（全称：跨源资源共享 Cross-Origin Resource sharing）
- 在后台加一句允许http://xxxx这个网站请求，如：response.setHeader('Access-Control-Allow-Origin','http://xxxx'）
