Ajax学习（基于bilibili尚硅谷视频学习，视频链接在最后）

请求报文

//行
  POST
//头
  Host: atguigu.com
  Cookie: name=guigu
  Content-type: application/x-www-form-urlencoded
  User-Agent: chorme 83
//空行

//响应体
username=admin&password=admin

响应报文

//行
  HTTP/1.1 200 OK
//头
  Host: atguigu.com
  Cookie: name=guigu
  Content-type: application/x-www-form-urlencoded
  User-Agent: chorme 83
//空行
//响应体
<html>
	  <head>
	  </head>
	  <body>
	  		<h1>xiaochen</h1>
	  </body>
</html>

Chorme查看响应报文

  1. 打开开发者模式
  2. 打开network
  3. 查看请求获取信息

以Express为基础的框架（首先要有Node.js）

//引入express

const { request, response } = require('express');

const express = require('express')

//创建应用对象

const app = express();

//创建路由对象

//request对请求报文的封装，response对响应报文的封装

app.get('/',(request,response)=>{

//设置响应

response.send('Hello express');

})

//监听端口启动服务

app.listen(8080,()=>{

 console.log("端口在8080启动")

})

Ajax请求准备

前端准备

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Ajax GET 请求</title>

 <style>

 #result{

 width: 200px;

 height: 100px;

 border: solid 1px black;

 }

 </style>

</head>

<body>

 <button>点击发送请求</button>

 <div id="result"></div>

</body>

</html>

ajax请求准备

//引入express

const { request, response } = require('express');

const express = require('express')

//创建应用对象

const app = express();

//创建路由对象

//request对请求报文的封装，response对响应报文的封装

app.get('/server',(request,response)=>{

 //设置响应头,设置允许跨域

response.setHeader('Access-Control-Allow-Origin','*')

 //设置响应

response.send('Hello ajax')

})

//监听端口启动服务

app.listen(8080,()=>{

 console.log("端口在8080启动")

})

注意之前的端口占用问题

Ajax请求基本操作(主要是js的变化)

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Ajax GET 请求</title>

 <style>

 #result{

 width: 200px;

 height: 100px;

 border: solid 1px black;

 }

 </style>

</head>

<body>

 <button>点击发送请求</button>

 <div id="result"></div>

 <script>

 //获取button元素

 const btn = document.getElementsByTagName('button')[0];

 //在div中显示

 const result = document.getElementById('result');

 //绑定button事件

 btn.onclick = function(){

 //1.创建对象

 const xhr = new XMLHttpRequest();

 //2.设置初始化，设置请求方法和URL

 xhr.open('GET','http://127.0.0.1:8080/server');

 //3.发送

 xhr.send();

 //4.时间绑定,处理服务端返回的结果

 //onreadystatechange即获取状态改变

 //readystate是xhr里面的一个属性，表示状态原本有0，1，2，3，4

 //0表示未初始化，1表示open()方法已经调用完毕，2表示send()方法调用完毕

 //3表示服务端返回了部分结果，4表示客户端返回了所有结果

 xhr.onreadystatechange = function(){

 //我们应该在4的时候承接返回结果

 if(xhr.readyState === 4){

 console.log("客户端已经返回了所有结果")

 //判断响应状态码 200 404 403 401 500

 //2开头的都是成功

 if(xhr.status >= 200 && xhr.status < 300){

 //处理结果,行，头，空行，体

 //1.响应行

 console.log(xhr.status);//状态码

 console.log(xhr.statusText);//状态字符串

 console.log(xhr.getAllResponseHeaders);//所有响应头

 console.log(xhr.response);//响应体

 //设置result的文本

 result.innerHTML = xhr.response;

 }else {

  

 }

 }

 }

 }

 </script>

</body>

</html>

Ajax的POST请求（注意在js里面可能要求之前的app.get后添加一个同样的代码块，但是要将get改为post全部为小写）

  1. 记住调用的四步走

    • 创建对象
    //创建对象

const xhr = new XMLHttpRequest();
    • 初始化设置类型与URL
    //初始化

xhr.open('POST','http://127.0.0.1:8080/server')
    • 设置发送事件
    //发送

xhr.send();
    • 事件绑定
    xhr.onreadystatechange = function(){

//对状态作判断

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300){

//处理服务端反应结果

result.innerHTML = xhr.response;

}

}

}

    html代码

    <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#result{

width: 200px;

height: 100px;

border: solid 1px red;

}

</style>

</head>

<body>

<div id="result"></div>

<script>

//获取元素对象

const result = document.getElementById('result');

//绑定事件

result.addEventListener("mouseover",function(){

//创建对象

const xhr = new XMLHttpRequest();

//初始化

xhr.open('POST','http://127.0.0.1:8080/server')

//发送

xhr.send();

//事件绑定

xhr.onreadystatechange = function(){

//对状态作判断

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300){

//处理服务端反应结果

result.innerHTML = xhr.response;

}

}

}

});

</script>

</body>

</html>

    js代码

       //引入express

const { request, response } = require('express');

const express = require('express')

//创建应用对象

const app = express();

//创建路由对象

//request对请求报文的封装，response对响应报文的封装

app.post('/server',(request,response)=>{

//设置响应头,设置允许跨域

response.setHeader('Access-Control-Allow-Origin','*')

//设置响应

response.send('Hello ajax')

})

app.get('/server',(request,response)=>{

//设置响应头,设置允许跨域

response.setHeader('Access-Control-Allow-Origin','*')

//设置响应

response.send('Hello ajax')

})

//监听端口启动服务

app.listen(8080,()=>{

console.log("端口在8080启动")

})

    设置头信息

    使用setRequestHeader()方法

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//Content-type是为了设置请求体发送内容的类型
//后面是字符串固定格式

    这里可能会报错，这样我们可以把之前的js文件中的post改为all，all可以接受任意形式的请求。

    服务器端响应JSON数据

    1. 在js对数据使用JSON.stringfy()对数据进行字符串转换
    const data = {

 name:'xiaochen'

};

//对对象进行字符串转换

 //设置响应

 let str = JSON.stringify(data);

response.send(str);
    1. 在html页面let设置一个变量，用JSON.parse()转换
    let data = JSON.parse(xhr.response);

    未转换前的样子
    before.png
    转换后
    after.png
    整体代码

    <!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <style>

 #result{

 width: 200px;

 height: 100px;

 border: solid 1px red;

 }

 </style>

</head>

<body>

 <div id="result"></div>

 <script>

 //获取元素对象

 const result = document.getElementById('result');

 //绑定事件

 window.onkeydown = function(){

 console.log('down')

 //创建对象

 const xhr = new XMLHttpRequest();

 //初始化

 xhr.open('POST','http://127.0.0.1:8080/server')

 //发送

 xhr.send();

 //事件绑定

 xhr.onreadystatechange = function(){

 //对状态作判断

 if(xhr.readyState === 4){

 if(xhr.status >= 200 && xhr.status < 300){

 //处理服务端反应结果

 // result.innerHTML = xhr.response;

 //因为格式问题，对传递的数据进行转换

 let data = JSON.parse(xhr.response);

 result.innerHTML = data.name;

 }

 }

 }

 }

 </script>

</body>

</html>

    //引入express

const { request, response } = require('express');

const express = require('express')

//创建应用对象

const app = express();

//创建路由对象

//request对请求报文的封装，response对响应报文的封装

app.all('/server',(request,response)=>{

 //设置响应头,设置允许跨域

response.setHeader('Access-Control-Allow-Origin','*')

response.setHeader('Access-Control-Allow-Headers','*')

//响应一个数据

const data = {

 name:'xiaochen'

};

//对对象进行字符串转换

 //设置响应

 let str = JSON.stringify(data);

response.send(str);

})

//监听端口启动服务

app.listen(8080,()=>{

 console.log("端口在8080启动")

})
    1. 可以进行自动转换，通过设置响应体数据类型(在html的js语块中写)
    xhr.responseType = 'json';

    但是输出格式也要改变

    result.innerHTML = xhr.response.name;

Ajax请求超时与网络异常处理

  1. 延时设置，在js语块里面对对象设置请求时间
    //添加延时设置
xhr.timeout = 2000;
  2. 超时回调
    //超时回调

 xhr.ontimeout = function() {

 alert("网络异常，请稍后")

 }
  3. 网络异常回调
    //网络异常回调

 xhr.onerror = function(){

 alert("你的网络异常")

 }
  4. 停止函数abort
    btns[1].onclick = function(){

 x.abort();

 }
  5. 请求重复发送问题

设置标志变量来判断

 let isSending = false;

 btns[0].onclick= function(){

 if(isSending) x.abort();

 x = new XMLHttpRequest();

 isSending = true;

 x.open("GET","http://127.0.0.1:8080/delay");

 x.send();

 x.onreadystatechange = function(){

 if(x.readyState === 4){

 isSending = false;

 }

 }

 }

【尚硅谷】3小时Ajax入门到精通

posted @ 2022-01-19 21:30  SmallCity  阅读(32)  评论(0)  编辑  收藏  举报