ajax复习

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107728.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java list转set用法

    java list转set用法参考:https://blog.csdn.net/kye055947/article/details/80561633之前一直被这两list转set,set转list所烦恼,今天整理了下两者之间怎么转的初始化listList<Integer>list=newArrayList<>();list.add(11);list.add(22);list.add(33);方法一(直接放HashSet里面)Set<Integer>lis

  • 周鸿祎

    周鸿祎文/周鸿祎来自微信公共号:财经十一人在BAT的光芒下,在美团、小米构造的互联网第二阵营中,特别是在猎豹上市之后,360多次欲言又止,一反常态。360公关团队告诉财经十一人,老周在闭关思考3

  • noip2015_noip2021复赛

    noip2015_noip2021复赛扩展欧几里得模板题。注意取模。#include&lt;bits/stdc++.h&gt;usingnamespacestd;#definelllonglong#definein(x)scanf("%d",&amp;x)#definelin(x)scanf("%lld",&amp;x)#defineout(x)printf("%d",x)#defin…

  • python面试常见问题-Python面试中最常见的25个问题

    python面试常见问题-Python面试中最常见的25个问题Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。Python是一个面向对象的解释型的交互式高级脚本语言。Python被设计成一种高可读性的语言,因为它大量地使用了英语中的单词作为关键字,而且不像其他语言使用标点符号构成复杂的语法结构,Python的语法结构非常少。Python是一种解释型语言:即Python程序是在运行时由解释器解释执行的,因而不用事先编…

    2022年10月19日
  • 旁站C段探测_旁站平行检验还有什么

    旁站C段探测_旁站平行检验还有什么旁站查询什么是旁站?旁站是和目标网站在同一台服务器上的其它的网站。在线查询:https://www.webscan.cc/https://www.aizhan.com/C段查询什么是C段?C段服务器的本质是C类IP网段。C段资产是和目标服务器ip处在同一个C段的其它服务器。查询方式:北极熊扫描器Nmap…

    2022年10月22日
  • 最好用的mysql 管理工具_汽车行业质量管理五大工具

    最好用的mysql 管理工具_汽车行业质量管理五大工具对于数据库运维人员来说,想要保证数据库在高效平稳的运行就有点像杂技演员在转盘子,需要灵活、专注、能快速做出反应、并且拥有冷静的头脑。数据库几乎是所有能够成功运行系统的核心。而数据库运维人员对组织的数据… 对于数据库运维人员来说,想要保证数据库在高效平稳的运行就有点像杂技演员在转盘子,需要灵活、专注、能快速做出反应、并且拥有冷静的头脑。数据库几乎是所有能够成功运行系统的核心。而数据库运维人员对组织的数据负责,能找到可依靠的工具来更加高效的管理数据库,并且轻松的维护日常的工作就变得格外重要。数据库运维人

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号