JavaScript全解析——Ajax(上)

本文介绍: ●认识前后端交互○就是前端与后端的一种通讯方式○主要使用的技术栈就是 ajax (async javascript and xml)●ajax 特点○使用 ajax 技术网页应用能够快速的将新内容呈现在用户界面○并且不需要刷新整个页面, 也就是能够让页面有 “无刷更新” 的效果●注意点:○前后端交互只能交互字符串○并且有自己的固定步骤创建 ajax 基本步骤的是什么1.创建 ajax 对象2.配置 ajax 对象3.发送请求 xhr.send()4.接收响应。

●认识前后端交互
○就是前端与后端的一种通讯方式
○主要使用的技术栈就是 ajax (async javascript and xml)
●ajax 特点
○使用 ajax 技术网页应用能够快速的将新内容呈现在用户界面
○并且不需要刷新整个页面, 也就是能够让页面有 “无刷更新” 的效果
●注意点:
○前后端交互只能交互字符串
○并且有自己的固定步骤
 创建 ajax 基本步骤的是什么
1.创建 ajax 对象

const xhr = new XMLHttpRequest()

2.配置 ajax 对象

// xhr.open('请求的方式', '请求的地址', 是否异步)
xhr.open('GET', 'http://localhost:8888/test/first', true)

3.发送请求

xhr.send()

4.接收响应

xhr.onload = function () {
    console.log('请求回来了~~~~~~~~')
    console.log(xhr.responseText)
}

const xhr = new XMLHttpRequest()
console.log(xhr.readyState) // 0

xhr.open('GET', 'http://localhost:8888/test/first', true)
console.log(xhr.readyState) // 1

xhr.onreadystatechange = function () {
    if (xhr.readyState === 2) console.log(xhr.responseText)
    if (xhr.readyState === 3) console.log(xhr.responseText)
    if (xhr.readyState === 4) console.log(xhr.responseText)
}

xhr.send()

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/test/third?name=QF666&amp;age=18')
xhr.send()
xhr.onload = function () {
    let res = JSON.parse(xhr.responseText)
    console.log(res)
}

const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:8888/test/fourth')
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name=QF666&amp;age=18')
xhr.onload = function () {
    let res = JSON.parse(xhr.responseText)
    console.log(res)
}