ajax初探

发表于 更新于 分类于 阅读次数： 本文字数： 905 阅读时长 ≈ 3 分钟

如何向后端请求数据？

  • form表单提交，使用method指定提交方式,action为提交的地址。

  • a标签点击能发请求
    这两者都要刷新页面或者新开页面

  • img可以发请求，但请求的必须是图片 不需要增加到页面

  • script和link也可以发起请求，但link和script只能加载指定格式，但是需要加到页面

之后，ie5在js中引入ActiveX对象（api），使js可以直接发起http请求
随后其它浏览器也跟进，取名XMLHttpRequest
不到一年，谷歌推出gmail.com,这里可以说前端真正诞生了

ie6后来也成为了安装最多的浏览器60%,ie因此就膨胀了,随后微软拆开ie6的开发人员，只更新安全功能，让chrome也跟了上来

ajax

Jesse James Garrett 将一下技术取名AJAX（异步的javaScript和 XML

  1. 使用XMLHttpRequest发请求
  2. 服务器返回xml格式的字符串
  3. js解析xml，并更新局部页面(现在用JSON)

使用XMLHttpRequest的方法

1
2
3
4
5
6
7
8
9
10
myButton.addEventListener('click',()=>{
    let request = new XMLHttpRequest()
    request.open('GET','/XXX') //初始化配置  请求方式忽略大小写  默认异步
    request.onreadystatechange = ()=>{
        if (request.readyState === 4 && request.status === 200){
            console.log(request.responseText) //响应内容
        }
    }
    request.send() //发送
})

网络响应的时间会很长，这段时间已经够javaScript执行很多任务了，所以需要使用异步

readystate

值 描述
0 open()方法还没有被调用
1 send()方法还没有被调用
2 send()方法已被调用，响应头和响应状态码已经返回
3 正在下载响应体
4 请求全部完成

onreadystate 要注意放在前面

一般不用管300状态码. 浏览器会自动处理

解析数据

可以使用DOM api解析xml，但是很复杂，现在已经过时了。
1所以用什么更好的方法更好的表示数据呢？

后来道格拉斯·克罗克福发明了一种轻量的资料语言JSON

JSON语法

JSON支持object array两种数据组织方式，值支持string number object array true false null
没有undefined

json没有变量，不支持引用，没有原型链

  • string 必须具有""
    支持转义符\\

注意，永远返回的是字符串，只是将其解析为对象
解析:JSON.parse(string)

同源策略

同源策略要求协议+端口+域名一模一样才允许发起AJAX请求，保证安全

本质是禁止一个域名的js在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止向另一个域名发送请求。

不是同源的网页不能使用ajax发起请求（实际上发起了，只是不能读取内容），其他都可以

简单规避方法就是使用CORS,服务端设置Access-Control-Allow-Origin: xxx响应头 表示允许xxx跨域访问

设置header

必须在open()和send()之间调用。
send()可以为post 设置请求内容

getAllResponseHeader获得所有响应头

tcp进行分片传输，因此会先拿到先拿到最开始的状态包，就可以先判断是否需要继续接受等之后的逻辑

传多个变量很容易让别人不知道自己具体想传什么，这里可以采用传个对象的方式，这样就有名字了

设置header 接受多参数

析构赋值，把名字一样的赋到同名变量里

1
2
param = {a:'aga',b:'gag',c:'aga'}
let {a,b,c} = param

对于函数可以采用这个方式

1
2
3
function ({a,b,c}){//取得参数中的abc

}

还有很多方式比如对象键名为字符串，不可以调用变量，但是[x]: sss可以

自己写回调可能不同库不一样，回调函数名不统一，所以需要规范出来

Promise写法：

1
.then() //第一个是成功第二个是失败

具体写法

1
2
3
return new Promise(function (resolve,reject){
 xxx
})