ajax的学习 整理

Ajax运行原理

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

实现步骤

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

查看答案

// 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);
}

响应的数据格式

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

查看答案

// 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
}

请求参数传递

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

查看答案

        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请求方式

xhr.set