Ajax初探

Ajax

Ajax概述

• 中文音译：阿贾克斯
• 它是游览器提供的一套方法，可以实现页面无刷新更新数据，提高用户游览网站应用的体验

Ajax运行原理

• Ajax相当于游览器发送请求与接受相应的代理人，以实现在不影响用户游览页面的情况下，局部更新页面数据，从而提高用户体验
  

Ajax的实现步骤

1. 创建Ajax对象

var xhr = new XMLHttpRequest()

2. 告诉Ajax请求地址以及请求方式

• url = '本地端口号'+'路由'

url = 'http://localhost:5600/first'
xhr.open('get', url)

3. 发送请求

xhr.send()

4. 获取服务端给与客户端的相应数据

xhr.onload = function() {
    console.log(xhr.responseText)
}

• 当Ajax接受了服务器的响应之后会触发onload事件
• xhr.responseText保存的是服务器端给客户端返回的数据

Ajax的运行环境

• Ajax技术需要运行在网站环境中才能生效

  • 我使用的是Node创建的服务器作为网站服务器

• 安装express指令

  • npm install express --save

• 终端执行命令 node + 文件名

• 在根目录创建了个app.js文件夹

// 引入express框架
const express = require('express')
//路径处理模块
const path = require('path')
//创建web服务器
const app = express()

//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')))
//所有public文件夹静态文件可以被访问，将html文件放入public文件夹

app.get('/first', (req, res) => { 
    res.send('Hello Ajax')
})
// /first 第一个参数时路由
//req:请求数据 //res:响应数据

//监听端口
app.listen(5500)//事件监听

// 控制台提示输出
console.log('服务器启动成功')

• 然后再node环境下终端执行命令 node + 文件名
  

服务端相应的数据格式

• 服务器端大多情况下会以JSON对象作为相应数据的格式

app.get('/first', (req, res) => {
    res.send({'Hello':'Ajax'})
})

• 客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中
• 在http请求与响应的过程中，无论是请求还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行输出
  • JSON.parse将JSON字符串转换成JSON对象

xhr.onload = function() {
    console.log(xhr.responseText)
    console.log(JSON.parse(xhr.responseText))
    var responseText = JSON.parse(xhr.responseText)
    var str = '<p>' + responseText.name + '</p>'
    document.write(str)
}

请求参数的传递

get 请求方式

xhr.open('get', 'http://www.example.com?name=lazy&age=18')

• get请求参数格式:参数名称等于参数值
• get请求多个参数用&符号连接
• get请求参数放在请求地址后面，并且用?符号分割
• get请求是不能提交json对象数据格式的

post 请求方式

xhr.setRequestHeader('Content-Type', 'application/x-www-from-yrlencoded')
xhr.send('name=lazy&age=18')

• post请求不放在地址栏后面，而是放在请求体当中(把请求方式放在send里)
• post请求必须在请求报文中明确设置请求参数内容的类型()
  • xhr.setRequestHeader('Content-Type', 'application/x-www-from-yrlencoded')
    • Content-Type报文属性名称
    • application/x-www-from-yrlencoded键值对类型值

请求参数的格式

• application/x-www-from-yrlencoded

  • name=lazy&age=18

• application/json告诉服务端当前请求参数的格式是json

  • {name: 'lazy', age: 18}
  • get请求是不能提交json对象数据格式的
  • 传统网站的表单提交也是不支持json对象数据格式的

• 参数必须以字符串形式进行传递

  • JSON.stringify()将json对象转换成json字符串

获取服务端的响应

Ajax 状态码

• 在创建ajax对象，配置ajax对象，发送请求，以及接受完服务器响应数据，这个过程中的每一个步骤都会对应一个数值

  • 0 请求未初始化(还没有调用open())
  • 1 请求已经建立，但是还没有发送(还没有调用send())
  • 2 请求已经发送
  • 3 请求正在处理中，通常响应中已经有部分数据可以用了
  • 4 响应已经完成，可以获取并使用服务端的响应

• 获取Ajax状态码的方法

  • xhr.readyState

• 当Ajax状态码发送变化的时候触发的方法

  • xhr.onreadystatechange

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)//0
var url = 'http://localhost:5500/first'
xhr.open('get', url)
console.log(xhr.readyState)//1
xhr.onreadystatechange = function() {
    console.log(xhr.readyState)//2,3,4
}
xhr.
xhr.send()
xhr.onload = function() {}

Ajax 错误处理

• 网络通畅，服务器端能接受到请求，服务端返回的结果不是预期结果

  • 可以判断服务器端返回的状态码，分别进行处理
  • xhr.status可以获取http状态码

• 网络通畅，服务器端没有收到请求，返回404状态码

  • 检查请求地址是否发送错误

• 网络通畅，服务端能接收到请求，返回500状态码

  • 服务器端错误

• 网络中断，请求无法发送到服务器端

  • 会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理