网站导航
> 文档中心 > 【Ajax网络请求】

【Ajax网络请求】

网友: 文档中心 2022-03-28 17:42:50

Ajax笔记

    • http协议
      • 客户端请求消息
      • 服务器响应消息
    • Ajax介绍
    • Ajxa的优点：
    • Ajax的缺点：
    • 搭建服务
    • 获取请求
      • 原生Ajax请求
        • GET请求
        • POST请求
        • 常用配置项
      • Jquery-Ajax请求
      • Axios-Ajax请求
    • 总结

http协议

超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议，是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。

HTTP 是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。

HTTP 是一个基于 TCP/IP 通信协议来传递数据的（HTML 文件、图片文件、查询结果等）。

客户端请求消息

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成

在这里插入图片描述

服务器响应消息

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

在这里插入图片描述

Ajax介绍

Ajax全称为Asynchronous JavaScript And XML，就是异步的JS和XML。

通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

Ajxa的优点：

1.可以无需刷新页面而与服务器端进行通信2.允许你根据用户事件来更新部分页面内容

Ajax的缺点：

1.没有浏览历史，不能回退2.存在跨域问题（同源）3.SEO不友好

搭建服务

在这里的，我们将基于node.js来实现微型服务的搭建，以便我们前端能访问服务器，服务器也能反馈回我们响应

首先第一步，使用命令行初始化一个生产包

npm init --yes

第二步，下载express

npm install express

创建服务端文件server.js
代码示例：

//1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装app.get('/', (request, response)=>{    //设置响应    response.send('HeLLO EXPRESS')});//4.监听端口启动服务app.listen(8000, ()=>{    console.log('服务已经启动， 8000端口监听中.....')})

此时，使用node.js运行文件，就成功开启了一个服务

在这里插入图片描述

获取请求

接下来，我们就来实现简单的ajax请求服务器，并获取到响应

原生Ajax请求

GET请求

前端代码

//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置请求方法和 请求的urlxhr.open('GET', 'http://127.0.0.1:8001/server');//3.发送xhr.send();//4.事件绑定 处理服务端返回的结果xhr.onreadystatechange = function(){    //判断(服务端返回了所有结果)    if(xhr.readyState === 4){ // 判断响应状态码 if(xhr.status >=200 && xhr.status <300){     // 处理结果 行 头 空行 体     console.log(xhr.status);//状态码     console.log(xhr.statusText);//状态字符串     console.log(xhr.getAllResponseHeaders());//所有响应头     console.log(xhr.response);//响应体 }else{ }    }}

后端对应代码

//1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装// app.all()   可接受任意类型的请求//get请求 app.get('/server', (request, response)=>{    //设置响应头    设置允许跨域    response.setHeader('Access-Control-Allow-Origin', '*');    //设置响应体    response.send('HELLO AJAX');});//设置端口，以及监听app.listen('8001', ()=>{    console.log('服务器已经启动，8001端口监听中...')})

POST请求

改变其中对应代码就可以：
前端：

//post请求xhr.open('POST', 'http://127.0.0.1:8001/server');

后端：

app.post(........(..)=>{.....})//端口不变

常用配置项

前端：

// 设置响应体的数据类型xhr.responseType ="json"// 加时间戳，针对IE浏览器缓存问题xhr.open('GET', 'http://127.0.0.1:8001/ie?t='+Date.now());// 超时设置xhr.timeout = 2000;// 超时回调xhr.ontimeout = function(){    alert('网络异常，请求超时');}// 网络异常回调xhr.onerror = function(){    alert('你的网路似乎出了点问题');}//取消请求xhr.abort();// 手动转换字符串为对象let data = JSON.parse(xhr.response);

后端：

//设置响应头    设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应头response.setHeader('xxxxxxx', 'xxxxx')//将对象转换为字符串let Str = JSON.stringify(Obj);//处理全部类型请求app.all('/server', (request, response)=>{    .........})

Jquery-Ajax请求

// get请求 $('button').eq(0).click(()=>{     // 方法中有三个参数，给谁发,发什么参数（对象），回调     $.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{  console.log(data);     }) }); // post请求 $('button').eq(1).click(()=>{     // 方法中有四个参数，给谁发 ,发什么参数（对象），回调 ,响应体数据类型     $.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{  console.log(data);     }) }); // ajax方式 $('button').eq(2).click(()=>{     // 参数是一个对象     $.ajax({  //url  url:'http://127.0.0.1:8001/jquery-server',  // 携带参数  data:{a:100, b:200},  // 响应体结果类型设置  // dataType:'json',  // 请求类型  type:'GET',  // 成功的回调函数  success:function(data){      console.log(data)  },  // 超时时间  // timeout:2000,  // 头信息设置  // headers:{},  // 失败的回调  // error:function(){}     }) })

Axios-Ajax请求

// 配置baseURL// axios.defaults.baseURL = 'http://127.0.0.1:8001'// 有此配置项后，请求地址可省略一部分const btn = document.querySelectorAll('button');btn[0].addEventListener('click', ()=>{    //GET请求    axios.get('http://127.0.0.1:8001/axios-server',{ // 请求参数 params:{     a:700,     b:400 }, // 请求头信息 // headers:{ //     name:'张三', //     age:20 // },    // 回调函数    }).then(value =>{ console.log(value)    });});btn[1].addEventListener('click',()=>{    axios.post('http://127.0.0.1:8001/axios-server',{     // 携带参数     username:'admin',     passward:'admin',    })})btn[2].addEventListener('click', ()=>{    axios({ // 请求方法 method:'POST', //url url:'http://127.0.0.1:8001/axios-server', // 参数 params:{     a:10,     b:100, }, // 请求头 Headers:{     c:100,     d:200 }, // 请求体参数 // data: { //     username:'admin', //     passward:'admin', // },    })})

总结

以上就是比较常用的一些请求方式，本篇文章只是简单介绍了简单的一些请求，并没有详细的介绍所有请求方式，只是列举了常用的那几种，希望对大家理解网络请求这一块有点帮助，无论是哪种请求方式，还是要根据自身所处环境决定如何使用，介绍的只是方法，而具体逻辑还要看业务需求自行完成。

在这里插入图片描述

觉得不错记得收藏关注哟！！！

创作不易，记得点赞！

网络标签：

相关问题