AJAX详解

哈喽……

已于 2023-09-08 15:27:11 修改

阅读量807

点赞数

分类专栏：前端文章标签： ajax 前端

于 2023-09-06 17:20:41 首次发布

本文链接：https://blog.csdn.net/weixin_46515434/article/details/132693692

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习视频：尚硅谷

原生Ajax

1、AJAX简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，实现数据的交换。
AJAX不是新的编程语言，而是一种现有的标准组合在一起使用的新方式。
下面这种情况：搜索打出原神两字，与原神有关的就都显示在下方，这就是利用了AJAX技术。
（最初AJAX返回的数据格式就是XML形式的，现已被JSON取代）
在这里插入图片描述

2、XML简介

XML是可扩展标记语言，被设计用来传输和存储数据，和HTML相似，不同的是HTML都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来标识一些数据。
例如：name = ‘张三’;age = 18;gender = ‘男’;这样一条信息用XML表示如下：

    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </student>

3、AJAX的特点

3.1AJAX的优点

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

3.2AJAX的缺点

没有浏览历史，不能回退
存在跨域问题
SEO不友好

3、HTTP协议

参考前几篇文章：
前后端交互——HTTP请求及协议格式详解

AJAX

1、安装node.js

http://nodejs.cn/

2、安装express及基本使用

2.1安装

https://www.expressjs.com.cn/
基于node.js的web开发框架

2.2基本使用

在项目同级目录下执行初始化、安装
在这里插入图片描述

初始化

npm init --yes

安装

npm i express

使用步骤：

1.引入express

const express = require('express')

2.创建应用对象

const app = express()

3.创建路由规则
request是对请求报文的封装
response是对响应报文的封装

//request response可以自定义名称
app.get('/',(request,response)=>{
    // 设置响应
    response.send('HELLO EXPRESS')
})
app.post('/',(request,response)=>{
    // 设置响应
    response.send('HELLO EXPRESS')
})

4.监听端口启动服务

app.listen(8000,()=>{
    console .log('服务已经启动了，8000端口监听中.......')
})

在这里插入图片描述

3.HTML中操作AJAX的步骤

第一步：创建对象

 const xhr = new XMLHttpRequest();

第二步：初始化，设置请求方法的url

 xhr.open(请求方法,url);

设置请求头：

  //xhr.setRequestHeader(name,value)
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

第三步：发送请求（只有post请求传body，get请求不传）

 xhr.send(body);

第四步：事件绑定，操作返回的数据
readystate 0——未初始化，尚未调用open()
1——启动，已经调用open(),但尚未调用send()
2——发送，已经调用send(),但尚未接收到响应
3——已经接收到部分数据
4——完成，已经接收到全部的响应数据，可以使用了

 xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
              // readystate是xhr对象中的属性，表示状态0 1 2 3 4
                // 判断响应状态码 200 404 403 401 500等
                if(xhr.status >= 200 && xhr.status < 300){
                    console.log("状态码",xhr.status)
                    console.log("状态字符串",xhr.statusText)
                    console.log("所有响应头",xhr.getAllResponseHeaders())
                    console.log("响应体",xhr.response)
                }
            }
        }

4.GET请求案例(原生JS)

服务端：

// 后端服务
const express = require('express')
const app = express()
app.get('/server',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('HELLO EXPRESS')
})
app.listen(8000,()=>{
    console .log('服务已经启动了，8000端口监听中.......')
})

前端：

<script>
    var btn = document.getElementsByTagName('button')[0]
    var result = document.getElementById('result')
    btn.onclick = function(){
        // AJAX操作
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.初始化，设置请求方法和URL
        xhr.open('get','http://127.0.0.1:8000/server');
        // 3.发送
        xhr.send();
        // 4.事件绑定 处理服务端返回的结果
        // readystate是xhr对象中的属性，表示状态0 1 2 3 4
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                // 判断响应状态码 200 404 403 401 500等
                if(xhr.status >= 200 && xhr.status < 300){
                    // 给div设置返回的响应体
                    result.innerHTML = xhr.response
                }
            }
        }
    }
</script>

get请求设置参数

xhr.open('get','http://127.0.0.1:8000/server?a=1&b=2&c=3');

在这里插入图片描述

5.post请求案例(原生JS)

服务端：

/ 后端服务
// 第一步
const express = require('express')
// 第二步
const app = express()
// 第三步
app.get('/server',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应
    response.send('HELLO EXPRESS')
})
app.post('/servers',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应
    //响应一个数据  对象形式
    const data = {
         name:'张三'
      }
      //需要把对象进行字符串转换--转换成json格式
      let str = JSON.stringify(data)
    response.send(str)
})
// 第四步
app.listen(8000,()=>{
    console .log('服务已经启动了，8000端口监听中.......')
})

前端：

 var result = document.getElementById('result')
    result.addEventListener('mouseover',function(){
        // AJAX操作
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        //设置响应体数据的类型，此时为json格式
        xhr.responseType = 'json'
        // 2.初始化，设置请求方法和URL
   

 xhr.open('post','http://127.0.0.1:8000/servers');
        // 3.发送
        xhr.send('a=1&b=2&c=3');
        // 4.事件绑定 处理服务端返回的结果
        // readystate是xhr对象中的属性，表示状态0 1 2 3 4
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                // 判断响应状态码 200 404 403 401 500等
                if(xhr.status >= 200 && xhr.status < 300){
                    // 给div设置返回的响应体
                    //接收数据时有两种方式
                    //1.手动转换   将JSON字符串转化为对象形式
                    //let data = JSON.parse(xhr.response)   
                    //result.innerHTML = data.name
                    //2.自动转换（设置响应体数据的类型为json）
                    result.innerHTML = xhr.response.name
                }
            }
        }
    })

在这里插入图片描述

6、重复请求

在这里插入图片描述

重启服务工具——nodemon介绍

链接
https://www.npmjs.com/package/nodemon

安装

确保已经安装了node.js

npm install -g nodemon

安装之后启动服务不再使用node xxx，用以下命令

nodemon xxx

我在使用的时候以上命令出不来，使用以下的可以启动服务

npx nodemon server.js

IE缓存问题

1、问题描述

IE浏览器会对AJAX的请求结果进行缓存，这样的话在下次进行网络请求时，就会从缓存中取值，对于一些时效性比较强的场景，AJAX缓存会对这些结果造成一些影响。

2、解决

在请求的url后面加时间戳参数

 xhr.open('post','http://127.0.0.1:8000/servers?='+Date.now());

请求超时与网络异常处理

1、请求超时

//设置超时时间
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function(){
    alert("网络异常,请稍后重试！")
 }

2、网络异常

xhr.onerror = function(){
    alert("网络无连接")
 }

3、手动取消请求

使用abort方法

xhr.abort();

jQuery发送AJAX请求

1、发送请求

  $.get(url,data,function(){
     console.log(data)
    },响应体类型)

 $.post(url,data,function(){
     console.log(data)
    },响应体类型)

2、通用型请求方法

$.ajax() 接收一个对象，包含发送请求的各个参数
具体有哪些参数可以查看文档
https://jquery.cuishifeng.cn/

$.ajax({
    url:,
    data:{},
    type:get/post,
    success:function(data){
      console.log(data)
      },
      timeout:,//超时时间
    error:function(){
    //失败回调
      },
    headers:{
    },//头信息
})

常见API

axios发送AJAX请求

axios学习资料

axios({
  methos:,//请求方法
  url:,//请求url
  params:{},//url参数
  header:{},//头信息
  data:{},//请求体参数
}).then(res=>{})

使用Fetch函数发送AJAX请求

文档

   fetch(url,{
      method:,//请求方法
      header:{},//请求头
      body:{},//请求体
   }).then(res = > {
      //return response.text()
      return response.json()   
      }).then(res => {
         console.log(res)
         })

跨域

1、同源策略

同源策略最早由Netscape公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。

2、JSONP

2.1JSONP是什么

JSONP是一个非官方的跨域解决方案，纯粹是凭借程序员的聪明才智开发出来的，只支持get请求。

2.2JSONP是怎么工作的

在网页有一些标签天生就具有跨域能力，比如：img、link、iframe、script。JSONP就是利用script标签的跨域能力来发送请求的。

2.3JSONP的使用

原生JS使用JSONP

1）动态创建一个script标签

var script = document.createElement("script")

2）设置script的src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data){
  alert(data.name);
};

3）将script添加到body中

document.body.appendChild(script);

4)服务器中路由的处理

const express = require('express')
const app = express()
app.get("/testAJAX",function(req,res){
  console.log("收到请求")
  var callback = req.query.callback
  var obj = {
     name:"张三"
     age:25
   }
 res.send(callback+"("+JSON.stringify(obj)+")")
})

响应体是html中可以解析出来的js代码

jQuery使用JSONP

$.getJSON(url?callback=?,funcation(data){
  console.log(data)
})

3、CORS

3.1什么是CORS

CORS是跨域资源共享，CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

3.2CORS是怎么工作的

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

3.3CORS的使用

主要是服务器端的设置：

app.get("http://127.0.0.1:8000",function(request,response){
    //通过response来设置响应头，来允许跨域请求
    //response.set("Access-Control-Allow-Origin","http://127.0.0.1:8000")
    response.set("Access-Control-Allow-Origin","*") //*表示对所有的请求设置，这里也可以写某一个地址，表示只对该地址有效
    response.send("请求返回的响应")
})