大家好,又见面了,我是全栈君。
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
- 使用XMLHttpRequest发请求
- 服务器返回XML格式的字符串
- 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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107728.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...