Ajax运行原理

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

实现步骤

  1. 创建Ajax对象 new XMLHttpRequest()
  2. 告诉Ajax请求地址以及请求方式 open
  3. 发送请求 send方法
  4. 获取服务器端给予客户端的响应数据 onload 获取响应数据 responseText

查看答案

1
2
3
4
5
6
7
8
9
10
// 1. 创建ajax对象
var xhr = new XMLHttpRequest()
// 2. 告诉ajax对象发送的位置,和方式,第一个参数是请求方式,第二个请求地址
xhr.open('get', 'http://localhost:3000/first')
// 3. 发送请求
xhr.send()
// 4. 获取响应数据
xhr.onload = function(){
console.log(xhr.responseText);
}

响应的数据格式

  1. json对象作为响应数据的格式,请求返回的数据为json字符串
  2. 将json字符串转化为json对象

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1. 创建ajax对象
var xhr = new XMLHttpRequest()
// 2. 告诉ajax对象发送的位置,和方式,第一个参数是请求方式,第二个请求地址
xhr.open('get', 'http://localhost:3000/responseData')
// 3. 发送请求
xhr.send()
// 4. 获取响应数据,接受完请求后onload事件自动响应
xhr.onload = function(){
// 返回的是字符串类型
// console.log(xhr.responseText);
// 将json字符串转换为json对象
let respnseText = JSON.parse(xhr.responseText)
console.log(respnseText);
console.log(typeof respnseText);
// 将转换的json对象中的信息获取,并且将数据信息渲染到页面中
let str = `<h2>${respnseText.name}</h2>`
document.body.innerHTML = str
}

请求参数传递

  1. get请求xx.open('get',url)

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        let username =document.querySelector('#username')
let email =document.querySelector('#email')
let submit =document.querySelector('#submit')

// 给按钮添加一个点击事件
submit.onclick = function(){
// 获取从用户在表单中输入的值
let emaildata = email.value
let usernamedata = username.value
// 对获取到数据进行字符串的拼接
let str = `username=${usernamedata}&email=${emaildata}`
// 创建一个ajax对象
console.log(str);
let xhr = new XMLHttpRequest()
// 创建ajax对象的请求方式
xhr.open('get',`http://localhost:3000/get?${str}`)
xhr.send()
xhr.onload = function(){
console.log(xhr.responseText);
}
}
// res.send(req.query)

post请求方式

  1. xhr.set