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

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 语法,还可以用自创的语法。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容