ajax请求图片_浏览器发送请求的前世今生

本文源码地址：wuliguaiguaia/node-demo

浏览器发送请求的历史与现状：

1.form发送请求,但是会刷新页面或新开页面

<

2. a 可以发 get 请求，但是也会刷新页面或新开页面

<

3. img 可以发 get 请求，但是只能以图片的形式展示

let 

4. link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示

let 

5. script 发送get请求（SRJ > Server Rendered JavaScript ），但是只能以脚本的形式运行

let 

6. jsonp方案发送请求

jsonp是什么？

1. 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callback=xxx
2. 响应方根据查询参数callback，构造形如
   1. xxx.call(undefined, '你要的数据')
   2. xxx('你要的数据')
3. 浏览器接收到响应，就会执行 xxx.call(undefined, '你要的数据')
4. 那么请求方就知道了他要的数据

这就是 JSONP。

let 

7.ajax发送请求

var 

8.promise升级ajax

function 

9.解决浏览器同源策略：CORS(Cross-origin resource sharing)

同源策略限制：协议，域名，端口

后台指定Access-Control-Allow-Origin，表示该网站允许访问资源

response

---

问题1：为什么jsonp只能发送get请求，不能发送post请求？

答：因为jsonp是通过动态创建script实现的，动态创建script只能用get。

问题2：为什么表单提交没有跨域问题，但是ajax有？

答：原页面用form提交到另一个域名后，原页面的脚本无法获取新页面的内容，所以浏览器认为是安全的。

ajax可以读取响应内容 xhr.response, 浏览器不允许这么做。

同源策略不允许不同的协议/域名/端口之间不得互相读取。其实请求已经发出去了。

一句话：form请求无法读取，ajax可以读取，但是同源策略不允许。

问题3：js和json的关系是什么？

答：JS 是一门语言，JSON 是另一门语言，JSON 这门语言抄袭了 JS这门语言，

1.json 没有抄袭 undefined，function

2.字符串首位必须是“”，所有的名字必须用双引号包起来

json支持如下：

问题4：ajax是什么？

答：Asynchronous JavaScript + XML（异步JavaScript和XML），如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分更新页面内容。

ajax核心在于XMLHttpRequest对象，AJAX 就是用 JS 发请求。

问题5：js 如何设置http请求和获取http响应？

请求头：

第一部分：xhr.open(method , url)

第二部分：xhr.setRequestHeader(key, value)

第四部分：xhr.send('发送的数据')

响应头：

第一部分：xhr.status, xhr.statusText

第二部分：xhr.getResponseHeader(key) , xhr.getAllResponseHeaders()

第四部分：xhr.responseText

Appendix:

1.浏览器同源政策及其规避方法（same-origin policy )

2.阮一峰ajax教程

拓展阅读：

10种跨域解决方案（附终极大招）

end!