从发请求到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，表示整个请求过程已经完毕

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'）

从发请求到AJAX到同源政策

1 发请求的各种方法

2 新的请求方式AJAX

3 同源政策

4 如何规避同源

猜你喜欢