AJAX(中)

106 阅读2分钟

关于发送请求

可以发送请求的有:
1. form表单 会刷新当前页面 post 或 get
2. a标签 (会刷新当前页面,或者会新开一个页面 get请求
3. img标签 要以图片的形式展示 get请求
4.

JSON vs JS(这是两门不同的语言)

JSON是一种新的语言,是道格拉斯抄袭了js,道格拉斯还写了一本书《Javascript语言精粹》来指出js语言不好的地方

1.JSON没有抄袭js的function 和 undefined两种数据类型
2.JSON的字符串首尾必须是双引号 obj ={"name": "frank"}

JS vs JSON
undefinde               没有
null                    null
['a','b','c']           ["a","b","c"]
function fn(){}         没有
{name: 'frannk'}        {"name":"frank"}
'frank'                 "frank"
                        没有变量
                        没有原型

同源策略与CORS跨域(Cross Origin Resource Sharing)

一个域名的Js,在未经允许的情况下,不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

同源政策:比如你的js不是https://www.baidu.com域名下的js文件,那么你就不能向https://www.baidu.com发送ajax请求。只有在协议+域名+端口一模一样的情况下才允许发送AJAX请求

如果没有同源策略的话,这个互联网也就没有隐私可言了。

CORS跨域就是告诉浏览器 我们两个是一家的,不需要阻止我们

比如http://frank.com:80 访问 http://jack.com:81的api想要获取数据,
这个时候域名不一致,端口不一致,那么浏览器就会阻止其访问。

这个时候,jack的后台只要在Response Headers 里写上 :Access-Control-Allow-Origin:http://frank.com:80 就可以另其访问了 ,意思就是后台允许这个域名访问,如果Access-Control-Allow-Origin:*,那就是允许所有人访问。

那么跨域是用cors还是JSONP 那就要看后端人员了,JSONP是无法post的,只能get

突破同源策略 === 跨域

手写AJAX

var request = new XMLHttpRequest();
request.open('GET','http://xxx.com');
request.send();
request.onreadystatechange = () => {
    if (request.readyState === 4) {
        //4的时候表示请求与响应都已经完成
        if (request.status >=200 && request.status < 300) {
            let string = request.responseText;(后端返回的都是string)
            let obj = JSON.parse(string)(将string转变成json,更利于前端处理数据)
        }
    }
}