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)


相关推荐

  • PyCharm 占用过大 C 盘空间,system 配置文件迁移

    PyCharm 占用过大 C 盘空间,system 配置文件迁移

    2021年11月22日
  • 净推荐值(NPS)完整行动指南[通俗易懂]

    净推荐值(NPS)完整行动指南[通俗易懂]前言随着越来越多的SaaS公司想要提高客户忠诚度,使得衡量忠诚度的方法得到了发展,其中最受欢迎的方式之一就是净推荐值(NPS)。实际上,全球有55%的公司使用NPS来衡量客户满意度和忠诚度。净推荐值不是一个“虚荣指标”,当你与客户的工作发生交叉引用时,NPS可以用来推断客户实际上使用感到高兴的情况。你可以利用这些“行为模式”的见解来指导你的客户使用产品。因此,NPS可以指导新手入门和产品开发,帮助你减少客户流失并提高留存率。是否想知道如何衡量你的NPS?如何通过客户数据的交叉引用以指导产品.

  • Codeforces Round #274 (Div. 2) –A Expression

    Codeforces Round #274 (Div. 2) –A Expression

  • 安装MySQL8.0_mysql版本命令

    安装MySQL8.0_mysql版本命令第一步:下载下载地址:https://dev.mysql.com/downloads/file/?id=476233第二步:选择文件夹,将压缩包解压我这里放到了E盘第三步:创建my.ini配置文件[mysql]#设置mysql客户端默认字符集default-character-set=utf8[mysqld]#设置3306端口port=3306#…

  • windows7如何关闭445端口_win10重装win7的后果

    windows7如何关闭445端口_win10重装win7的后果勒索病毒最新变种2.0已导致我国的很多行业遭受袭击。勒索病毒是通过入侵端口传播,主要是445端口,用户可以通过关闭445端口可以有效预防勒索病毒。下面重点介绍如何关闭445端口。关闭445端口方法图文教程方法一:使用工具一键关闭使用一键关闭445端口软件,下载本工具可以查看计算机开放端口列表及一键关闭445端口方法二:注册表首先,来查看下系统当前都开放了什么端口,怎样查看呢?调出cmd命令行程序,…

    2022年10月16日
  • coreldraw怎么画表格_cdr怎么制作表格

    coreldraw怎么画表格_cdr怎么制作表格CorelDraw简称CDR,是加拿大Corel软件公司产品。它是一个绘图与排版的软件,它广泛地应用于商标设计、标志制作、模型绘制、插图描画、排版及分色输出等诸多领域。作为一个强大的绘图软件,自然广受设计师们喜爱,用作商业设计和美术设计的PC机几乎都安装了CorelDraw。本套教程是老师根据多年的平面设计工作与设计艺术培训方面的教学经验,通过命令讲解与实例结合的形式系统地介绍了…

发表回复

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

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