ajax复习

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和XML

1. 使用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    JSON
undefined        没有
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?

复制代码

<form action="http://www.baidu.com" method> 
    <input type="">
    <input type="">
</form>
复制代码

转载于:https://juejin.im/post/5a6da7bf518825735300db8e