美文网首页我爱编程
AJAX发送请求、同源策略与CORS跨域

AJAX发送请求、同源策略与CORS跨域

作者: 王童孟 | 来源:发表于2018-04-09 21:22 被阅读0次

    1. 如何发请求?(ajax以前)

    用 form 可以发请求,但是会刷新页面或新开页面

    用 a 可以发 get 请求,但是也会刷新页面或新开页面

    用 img 可以发 get 请求,但是只能以图片的形式展示

    用 link 可以发 get 请求,但是只能以 CSS、favicon 的形式展示

    用 script 可以发 get 请求,但是只能以脚本的形式运行



    有没有什么方式可以实现(ajax出来之前的需求)



    get、post、put、delete 请求都行

    想以什么形式展示就以什么形式展示

    2. 微软的突破

    IE 5 率先在 JS 中引入 ActiveX 对象(API),使得 JS 可以直接发起 HTTP 请求。

    随后 Mozilla、 Safari、 Opera 也跟进(抄袭)了,取名 XMLHttpRequest,并被纳入 W3C 规范。

    3. AJAX

    Jesse James Garrett 讲如下技术取名叫做 AJAX:异步的 JavaScript 和 XML

        1.使用 XMLHttpRequest 发请求

        2.服务器返回 XML 格式的字符串 // 现在用JSON

        3.JS 解析 XML,并更新局部页面

    可以参考http://javascript.ruanyifeng.com/bom/ajax.html

    4. JSON

    JSON是一门新的语言,它抄袭了JavaScript

    可以参考https://www.json.org/json-zh.html

    5. js和JSON区别

    js JSON
    undefined null
    null 没有
    ['a','b'] ["a","b"]
    function fn(){} 没有
    {name: 'frank'} {"name":"frank"}
    var a = {};a.self = a 搞不定(没有变量)
    {proto} 没有原型链

    这是两门语言,JSON是道格拉斯抄袭布兰登艾克的,道sir还写了一门js语言精粹来怼布sir。

    js VS JSON

    js JSON
    undefined null
    null 没有
    ['a','b'] ["a","b"]
    function fn(){} 没有
    {name: 'frank'} {"name":"frank"}
    var a = {};a.self = a 搞不定(没有变量)
    {proto} 没有原型链
    1. JSON没有抄袭 undefined 和 function
    2. JSON 的字符串收尾必须是 ”

    服务器返回的永远是字符串,刚好返回符合json对象语法的字符串

    6. 原生JS发送AJAX请求

    let request = new XMLHttpRequest()
    request.open('method','路径')
    request.send()
    request.onreadystatechange = ()=>{
            if(request.readyState === 4) {
                    if(request.status >= 200 && request.status < 300) {
                            let string = request.responseText
                            let object = JSON.parse(string)
                    }
            }
    }
    

    method可以使 get,post,put,delete

    路径是你想访问的网站

    7. 同源策略

    只有 协议+域名+端口 一模一样才允许发 AJAX 请求

    1.http://baidu.com 可以向 http://www.baidu.com 发 AJAX 请求吗 no

    2.http://baidu.com:80 可以向 http://baidu.com:81 发 AJAX 请求吗 no

    也就是说ajax本来是不允许跨域的。如果原页面用form提交到另一个域名之后,也页面的脚本无法获取新页面中的内容,浏览器认为这是安全的。而AJAX是可以读取响应内容的,因此浏览器不能允许你这样做,请求还是能发的,只是拿不到内容;浏览器这个策略本质上是:一个域名的 JS,在未经允许的情况下,不得读取另一个域名的内容,但浏览器并不阻止你向另一个域名发送请求。

    8. CORS跨域

    CORS 可以告诉浏览器,我俩一家的,别阻止他 。

    举例:

    开两个服务器 命令行 node server 8001 , node server 8002(需改hosts 添加127.0.0.1 frank.com,jack另起一行)

    打开两个网站frank.com:8001和jack.com:8002。

    要从frank的前端页面访问jack的后端只需要在jack的后端响应接口加上以下这句话即可

    response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')<br>
    

        代码:cors跨域

    跨域请求,JSONP不能post,想要post就cors

    9. 注意

    (1)前后端通信使用的string,也就是我们发送请求,后端响应的是字符串,例如响应返回符合json对象语法的字符串。

    (2)JS 是一门语言,JSON 是另一门语言,JSON 这门语言抄袭了 JS这门语言。

    (3)AJAX 就是用 JS 发请求。

    (4)响应的第四部分是字符串,可以用 JSON 语法表示一个对象,也可以用 JSON 语法表示一个数组,还可以用 XML 语法,还可以用 HTML 语法,还可以用 CSS 语法,还可以用 JS 语法,还可以用自创的语法。

    相关文章

      网友评论

        本文标题:AJAX发送请求、同源策略与CORS跨域

        本文链接:https://www.haomeiwen.com/subject/igdwhftx.html