#### ajax和一个人名字读音差不多。#### 怎么发请求- form表单可以发各种请求，但是会刷新页面，新开页面- script可以发get请求- img可以发get请求，但是只能以图片的形式来展示- a标签可以发get请求，只要点了a标签，就会刷新当前页面，或者新开一个页面- link可以发get请求，只能以CSS,favicon的形式展示- - ## 在用开发者工具的时候，点一下view source``````#### 前端急需一个api- get，post，put，delete请求什么都行- 想以什么形式，就用什么形式展示- 微软的突破## AJAX起源- IE5率先在JS中引入ActiveX对象(API), 湿的JS可以直接发起HTTP请求。- 随后Mozilla、Safari、Opera也跟进抄袭了，取名XMLHttpRequest，并被纳入W3C规范> IE在早起，对浏览器的贡献是很大的。刚开始IE占了90%的市场份额。- IE6一看，也就是firefox占了10%，IE做了一个非常愚蠢的决定，IE觉得标准是什么，我才是老大。然后把做浏览器的高手，全都拆掉了，让这些高手到别的团队去了，浏览器天下无敌，没必要花钱再维护这个了。留下一两个人做安全更新，最后IE没落了。- chrome是2008年出来的，2年追平ie，占全球40%- 大部分人都不用IE了，IE是人人喊打。### IE刚开始是很先进的。- XMLHttpRequest，为什么要加XML呢？``````- XMLHttpRequest就是window的一个全局对象。## Gmail- 网页收发邮件- Gmail惊为天人的应用，可以做到和客户端同样的功能- 新时代网页可以玩游戏，可以发信息。- 有了ajax之后，JJG把下边的技术叫为AJAX，异步的JavaScript和XML1. 使用XMLHttpRequest发请求2. 服务器返回XML格式的字符串3. JS解析XML，并更新局部页面#### 面试题- 请使用原生js来发送ajax请求(必然会有)，写对就可以，写不出来就过不了面试``````## 对于http来说- 你的响应的第四部分，始终都是字符串- 返回一个html格式的字符串- 返回的是符合html语法的字符串。## XMLHttpRequest```myButton.addEventListener('click', (e) => { let request = new XMLHttpRequest(); request.open('GET', '/xxx'); //GET大小写无所谓，还可以fuck 配置request request.send();})```- 参数```request.open( DOMString method, DOMString url, optional boolean async, optional DOMString user, optional DOMString password)```- js测量时间的函数```console.time();var a = 1;console.timeEnd();```#### readyState- 一开始是1，后来是4- readyState1， 2， 3， 4响应有可能是分次返回的- 分次是无法获知的。- 在open之前打印readyState，那就是0#### 怎么样获取所有的readyStateChange```myButton.addEventListener('click', (e) => { let request = new XMLHttpRequest(); request.onreadystatechange = ()=>{ console.log(request.readyState); } request.open('GET', '/xxx'); request.send();) ```- xml已经过时了，不要去看。- DOM api是前端最讨厌的api，太麻烦了。所以出现了JSON- 那么就发起了提问，怎么简单的表示有结构的数据- Douglas发明了一个语言，叫做json，新的语言。json不是对象，是一门新的语言。- Douglas的著作就是蝴蝶书。## json的几个数据类型- object- number- string- true- false- null- array> 基本都在抄JS#### JSON没有抄袭function和undefined- JSON的字符串首位必须是 ""- JSON的字符串必须加双引号,不可以单引号```JS VS JSONundefined 没有null null['a', 'b'] ["a", "b"]undefined 没有function fn(){} 没有{name: 'frank'} "frank"var a = {} a.self = a 搞不定(没有变量){__proto__} 没有原型链```#### 面试题JSON和js的区别- 两门语言，是douglas抄袭JS之父的，因此有相似之处。- JSON没有变量，也没有对象## 问问题- "hi"是否符合json语法- null符合json语法吗？符合啊- 写一个json- json不是对象，符合json语法的字符串- 你才返回对象，你全家都返回对象，返回的就是字符串```{ "note": { "to": "小谷", "from": "方方", "heading": "打招呼", "content": "hi" }}```### JSON的api```let string = request.responseText;let object = window.JSON.parse(string);console.log(object);```- 用更加亲近js的语法- 提交方式的method随便大小写，最后都会变成大写- ajax的牛逼之处就是想发什么请求，就发什么请求。## 同源策略与CORS跨域- 为什么表单提交没有跨域问题，但是ajax有跨域问题- 你可以给跨域去发一个form表单 ，但是你不可以用ajax这么做。get也不行。- js，link，form，a，script都可以，ajax不可以跨域。状态码始终是0- 只有域名一毛一样，才可以发ajax请求。#### 面试题> 只有协议+端口+域名一模一样才可以发ajax请求- http://baidu.com 可以向www.baidu.com发AJAX请求吗？no- http://baidu.com:80 可以向http://baidu.com:81发ajax请求吗？ no- www.12306.cn和12306.cn是空白。12306只接受www, 有可能www和没有www是不同的两个网站- form表单因为刷新之后，原来的页面就挂掉了。- 但是ajax是可以读取响应内容的。你能读别的网站内容，那会造成很严重的后果。- 只有协议端口号域名一模一样，才允许发ajax请求- 如果实在想给其他网站的域名发请求，那唯一的办法，就是和他们联系，然后告诉浏览器可以访问。#### CORS可以允许异域访问Cross-Origin Resource Sharing ```setHeader(Access-Control-Allow-Origin, "http://frank.com:8001");```- 讲了半天ajax就是为了一次就搞定- CORS多还是JSONP多呢，如果什么都不懂，那就得你教他。- 如果是一个很老的，那就是jsonp，但是不可以post请求- 如果是一个现代的后台，那就是CORS，后台给你一个cors头。嘿嘿。不可以给全网站加，要一个接口，加一个接口。选择什么，主要看你们两个的水平。- 怎么设置两个Access-Control-Allow-Origin?``````#### ```
```
网友评论