2018-01-28 AJAX是什么

如何发请求？

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行

有没有什么方式可以实现

get、post、put、delete 请求都行
想以什么形式展示就以什么形式展示

用form发
GET请求
http://js.jirengu.com/funix/1/edit
POST请求
http://js.jirengu.com/podod/2/edit

用a标签发请求 GET请求

image.png

image.png

用image发请求，只能以图片的形式展示

image.png

image.png

用link发请求

image.png

用script来发请求

image.png

image.png

请使用原生JS来发送AJAX请求

给浏览器返回了符合html语法的字符串

image.png

open配置

image.png

第3个参数一定要是异步，即async
一般后面3个参数可以不写，即采用默认的

image.png

image.png

搜xml mime type
结果是text/xml或者 application/xml

返回XML格式的数据

image.png

image.png

计算代码执行时间

image.png

image.png

请求执行的时间还是比较长的，即打印的第二行都打印完了，第一行打印还未执行完

readyState的值的含义

image.png

响应有可能是分次返回的

image.png

每1ms问下状态

状态为4表示请求已经把响应下载完毕了

image.png

js manipulate XML 如何用js操作XML 搜

image.png

image.png

image.png

最后获取XML数据

image.png

JSON是门语言

javascript语言精粹

JSON中没有undefined、symbol、function

image.png

XML的数据格式太麻烦了，换JSON格式

image.png

字符串
符合JSON对象语法的字符串

image.png

image.png

//////////////////////////////////////////////////////同源策略
问题：为什么form表单提交没有跨域问题，而AJAX有
试验：

image.png

image.png

向百度发一个GET请求是没有问题的

如果用AJAX来向百度来发请求

image.png

image.png

image.png

请求成功了，但是报了一个错误

request.status尽然是0

image.png

同源策略：如果你不是baidu.com页面里的JS，你就不能向baidu.com这个域名发起AJAX请求
只有AJAX是不允许的，其他的图片、iframe、form、css、js、a、link、script等都可以
只有协议+端口+域名一模一样，才允许发AJAX请求
1、http://baidu.com可以向http://www.baidu.com发AJAX请求吗？ no
2、http://baidu.com:80 可以向http://baidu.com:81发AJAX请求吗？ no

问题：为什么要有同源策略
比如form表单提交后，会刷新掉页面，原有的页面会挂掉，不会偷新页面的内容，浏览器认为是安全的
而AJAX是可以读取响应内容的，

image.png

比如如果可以读取另外一个网站的内容，比如钱，那么问题就大了

如果需要如何解决呢？
1、用JSONP（但是JSONP不能POST）
2、用CORS 方法，可以告诉浏览器，我俩一家的，不要阻止

image.png

8001要访问8002，后台写允许8001访问(后台加的一个响应头)

image.png

CORS跨源资源共享
Cross-Origin Resource Sharing

搜 cors multiple domains

突破同源策略就是跨域