翼度科技»论坛 编程开发 JavaScript 查看内容

JavaScript全解析——Ajax是什么(上)

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
AJAX 是Asynchronous JavaScript And XML的缩写。
它不是一种编程语言。它是一种基于HTML、CSS、JavaScript 和 XML,让开发更好、更快和更有互动的 Web 应用的技术。
什么是ajax

认识前后端交互

前后端交互就是前端与后端的一种通讯方式,主要使用的技术栈就是ajax (async javascript and xml
ajax 特点

使用 ajax 技术网页应用能够快速的将新内容呈现在用户界面,并且不需要刷新整个页面, 也就是能够让页面有 "无刷更新" 的效果
注意点
前后端交互只能交互字符串,并且有自己的固定步骤
创建ajax 基本步骤的是什么

1.创建 ajax 对象
  1. const xhr = new XMLHttpRequest()
复制代码
2.配置 ajax 对象
  1. // xhr.open('请求的方式', '请求的地址', 是否异步)
  2. xhr.open('GET', 'http://localhost:8888/test/first', true)
复制代码
3.发送请求
  1. xhr.send()
复制代码
4.接收响应
  1. xhr.onload = function () {
  2.     console.log('请求回来了~~~~~~~~')
  3.     console.log(xhr.responseText)
  4. }
复制代码
ajax 状态码有哪些

简单来说其实就是用一个数字表明了当前 ajax 运行到哪一步了
语法: xhr.readyState
0:  创建 ajax 成功
1: 当前 ajax 配置成功
2: 当前 ajax 发送成功(响应已经回到浏览器了)
3: 表示浏览器当前正在解析本次响应, 但可能还没完成
4: 表示浏览器已经完成解析本次响应, 可以正常使用 responseText 了
0 和 1, 比较好打印, 2/3/4 这几个我们可以借助一个事件去打印
readyStatechange 事件

通过事件名其实就可以看出, 当 readyState 发生改变时就会执行
  1. const xhr = new XMLHttpRequest()
  2. console.log(xhr.readyState) // 0
  3. xhr.open('GET', 'http://localhost:8888/test/first', true) console.log(xhr.readyState) // 1
  4. xhr.onreadystatechange = function () {
  5.     if (xhr.readyState === 2) console.log(xhr.responseText)
  6.     if (xhr.readyState === 3) console.log(xhr.responseText)
  7.     if (xhr.readyState === 4) console.log(xhr.responseText)
  8. }
  9. xhr.send()
复制代码
ajax 常见请求方式有哪些

GET

○表示向服务器获取资源
POST

表示向服务器提交信息,通常用于产生新的数据,比如注册
PUT

表示希望修改服务器的数据, 通常用于修改某数据
DELETE

表示希望删除服务器的数据
OPTIONS

发生在跨域的预检请求中,表示客户端向服务器申请跨域提交
ajax 中 get 和 post 请求携带参数的方式

GET

直接拼接在请求路径后, 以 ? 间隔, 使用 key=value 的形式书写, 当有多个参数的时候用 & 连接
  1. const xhr = new XMLHttpRequest()
  2. xhr.open('GET', 'http://localhost:8888/test/third?name=QF666&age=18') xhr.send()
  3. xhr.onload = function () {
  4.     let res = JSON.parse(xhr.responseText)
  5.     console.log(res) }
复制代码
POST

在请求体内携带参数(其实就是 send 小括号内部)
并且需要设置请求头内部的 content-type
■ 如果参数为 查询字符串, 需要添加:
● 'xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')'
■ 如果参数为 JSON 字符串, 需要添加:
● 'xhr.setRequestHeader('content-type', 'application/json')'
  1. const xhr = new XMLHttpRequest()
  2. xhr.open('POST', 'http://localhost:8888/test/fourth')
  3. xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  4. xhr.send('name=QF666&age=18')
  5. xhr.onload = function () {
  6.     let res = JSON.parse(xhr.responseText)
  7.     console.log(res)
  8. }
复制代码
ajax 中 get 和 post 的区别有哪些

1.携带参数的位置

a.GET: 直接在地址后面书写
b.POST: 在请求体内书写
2.携带参数的大小

a.GET: 2kb(左右)
b.POST: 原则上不限制大小, 但是服务器可以做出限制
3.携带参数的格式

a.GET: 只能携带查询字符串格式
b.POST: 原则上不限制格式, 但是需要在请求报文的 content-type 做出配置
4.安全性(相对)

a.GET: 明文发送, 相对不安全
b.POST: 暗文发送, 相对安全
由于内容比较多,我们Ajax分为上下两部分内容,以上就是我们JavaScript讲解Ajax上部分的内容啦,下期精彩继续!大家可以持续关注~
更多技术类内容,点我主页查看

来源:https://www.cnblogs.com/qian-fen/p/17412184.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具