什么？都2021年了还不会ajax嘛,来这里让您快速学会Ajax

学习网站

黑马前后端交互

Ajax

为什么要学习Ajax

传统网站中存在的问题：
网速慢的情况下,页面加载时间过长,用户只能等待;
表单提交后,如果一项内容不合格,需要重新填写所有表单内容
页面跳转,重新加载页面，造成资源浪费，增加用户等待时间
Ajax的出现则解决了这些问题，提高了用户体验。

Ajax概述及应用场景

概述:它是浏览器提供的一种方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。(个人理解:就是传数据的)
应用场景:页面上拉加载更多数据,列表数据无刷新分页,表单数据离开焦点数据验证,搜索框提示文字下拉列表

Ajax的运行环境

Ajax需要运行在网站环境中才能生效,当前会在Node创建的服务器下运行程序。

Ajax运行原理

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

Ajax实现步骤

1. 创建Ajax对象

var xhr = new XMLHttpRequest();

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

xhr.open('请求方式','请求地址');

3. 发送请求

xhr.send();

4. 获取服务端响应到客户端的数据

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

注意:运行代码前,需要先开启网站服务器

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

服务器端响应的数据格式

真实项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果显示在页面中。
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最后都会被转换成字符串进行输出.

JSON.parse()//将json字符串转换成json对象

在传统表单提交中,请求参数已经拼接好了，而在Ajax请求中,则需要自己手动拼接

GET请求方式:get参数需要添加在请求地址后面

xhr.open('get',''http://localhost:3000/get?name=zhangsan&age=20)

get参数服务器端代码：

app.get('/get',(req,res)=>{
    res.send(req.query);
})

POST请求方式:请求时需要设置请求头中的类型,并且需要将请求参数放在send()中

如果格式是类似于字符串的拼接，那么请求参数类型就为`application/x-www-form-urlencoded`,
 // 设置请求参数格式的类型
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     xhr.send(params);

服务器端代码：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 拦截所有请求
// extended:false 方法内部使用querystring模块处理请求参数的格式
// extended:true  方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));
app.post('/post',(req,res)=>{
    res.send(req.body);
})
app.listen(3000);
console.log('网站服务器启动成功');

请求报文:在http请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式

请求参数格式

1. application/x-www-form-urlencoded

name=zhangsan&age=20

2. application/json

{name:'zhangsan',age:20}

如果在请求头中设置Content-Type属性的值是application/json,就需要将请求参数的格式设置为json

JSON.stringfy()// 将json对象转换成jion字符串

服务器端则要设置为bodyParser.json()

app.use(bodyParser.json());

注意:get请求是不能提交json对象数据格式的,传统网站的表单提交也是不支持json对象格式的(默认格式为:application/x-www-form-urlencoded)!!!

获取服务端响应的另一种方式（了解）

在创建ajax对象，配置ajax对象,发送请求,以及接受完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数值就是ajax状态码
0:请求未初始化(还没有调用open())
1:请求已经建立，但是还没有发送(还没有调用send())
2:请求已经发送
3.请求正在处理中,通常响应中已经有部分数据可以用了
4.响应已经完成,可以获取并使用服务器的响应

 xhr.readyState //获取Ajax状态码

   var xhr = new XMLHttpRequest();
        // 已经创建了ajax对象,但是还没有对ajax对象进行配置
        console.log(xhr.readyState);//0
        xhr.open('get','http://localhost:3000/readystate');
        // 已经对ajax对象进行配置,但是还没有发送请求
         console.log(xhr.readyState);// 1
         // 当ajax状态码发生变化时触发该事件
         xhr.onreadystatechange = function(){
             // 2 请求已经发送
             // 3 已经接收到服务器端的部分数据了
             // 4 服务器端的响应数据已经接收完成
            console.log(xhr.readyState);// 2 3 4
            if(xhr.readyState ==4)
            {
                console.log(xhr.responseText);
            }
        }
        xhr.send();

Ajax错误处理

利用xhr.status()获取http状态码

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

var  xhr = new XMLHttpRequest();
       // 2.告诉ajax对象要向哪儿发送请求,以什么方式发送请求
       // 第一个参数请求方式  第二个参数请求地址
       xhr.open('get','http://localhost:3000/error');
       //3.发送请求
       xhr.send();
       // 4. 获取服务器端响应到客户端的数据
       xhr.onload = function(){
           if(xhr.status==200)
           {
            console.log(xhr.responseText);
           }
           else{
               alert('访问错误');
           }
          
       } 

2. 网络畅通,服务器端没有接受到请求,返回404状态码。
   检查请求地址是否错误

//  http://localhost:3000/error123 404 (Not Found)

3.网络畅通,服务器端能接受到请求,服务器端返回500状态码

 http://localhost:3000/error 500 (Internal Server Error)

服务器端错误,找后端开发人员进行沟通
4. 网络中断,请求无法发送到服务器端。
该错误不会触发onload事件，而是触发onerror事件
会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理

 xhr.onload = function(){
            console.log(xhr.responseText);
          xhr.onerror = function(){
           alert('网络中断,无法发送Ajax请求');
       }
       }