Ajax用法总结（包括原生Ajax、Jquery、Axois）

最新推荐文章于 2024-05-30 15:07:12 发布

朴素先生在进步

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量492

点赞数 4

本文链接：https://blog.csdn.net/exercise_smile/article/details/138972894

版权

开发技术栈学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTTP知识

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

请求行:  GET、POST  /s?ie=utf-8...（url的一长串参数）  HTTP/1.1 
请求头:  Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
        ...
        
空行
请求体:  username=admin&password=admin （Post、Put有）

点击原始才可看到请求行等详情信息。

Get请求载荷：url的发送的json格式参数。

Post请求体：发送的表单数据

响应报文

响应行：      HTTP/1.1  200  OK
响应头：      Content-Type: text/html;charset=utf-8
            Content-length: 2048
            Content-encoding: gzip
            ...
            
空行    
响应体：      <html>
              <head>
              </head>
              <body>
                  <h1>尚硅谷</h1>
              </body>
          </html>

响应体：这里返回的是HTML文本，显示网页。

原生AJAX

AJAX简介

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

XML简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在已经被 JSON 取代了。

{
    "name":"孙悟空",
    "age":18,
    "gender":"男"
}

AJAX的使用

核心对象：

XMLHttpRequest： AJAX 的所有操作都是通过该对象进行的。

使用步骤

// 1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 2) 设置请求信息
xhr.open(method, url);

// 可以设置请求头， 一般不设置  
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//3) 发送请求
xhr.send(body) //get 请求不传 body 参数， 只有 post 请求使用

4) 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
    if(xhr.readyState == 4 && xhr.status == 200){
        var text = xhr.responseText;
        console.log(text);
    }
}

get请求

客户端：

<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            
            //3. 发送
            xhr.send();
            
            
            //4. 事件绑定 处理服务端返回的结果
            
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
				//0:未初始化  1：open方法调用完毕 2.send调用完毕 3.服务端返回了部分结果 4.服务端返回了所有结果
            // change  改变
            xhr.onreadystatechange = function(){ //状态每次改变就会触发函数
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码  200
                        // console.log(xhr.statusText);//状态字符串  OK
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }


        }
    </script>
</body>

服务端:

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX - 2');
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

post请求

xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','atguigu'); // 会报错，因为不是预定义标签，要进行相关设置
// 请求体
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');

// 服务端
// 接受post请求
app.post('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});

//服务端
//可以接收任意类型的请求 
app.all('/server', (request, response) => {
});

返回Json类型

// 客户端
const xhr = new XMLHttpRequest();

//设置响应体数据的类型
xhr.responseType = 'json';

xhr.open('GET','http://127.0.0.1:8000/json-server');
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            //
            // console.log(xhr.response);
            // result.innerHTML = xhr.response;
            
            // 1. 手动对数据转化
            // let data = JSON.parse(xhr.response); //将响应文本转换为JSON类型
            // console.log(data);
            // result.innerHTML = data.name;
            
            // 2. 自动转换
            console.log(xhr.response);
            result.innerHTML = xhr.response.name;
        }
    }
}

// 服务端
//JSON 响应
app.all('/json-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    
    const data = {
        name: 'atguigu'
    };
    //将data变量转换为 JSON 字符串
    let str = JSON.stringify(data);
    response.send(str);
});

超时与网络异常

// 客户端
btn.addEventListener('click', function(){
    const xhr = new XMLHttpRequest();
    //超时设置 2s 设置
    xhr.timeout = 2000;
    //超时回调
    xhr.ontimeout = function(){
        alert("网络异常, 请稍后重试!!");
    }
    //网络异常回调
    xhr.onerror = function(){
        alert("你的网络似乎出了一些问题!");
    }

    xhr.open("GET",'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status< 300){
                result.innerHTML = xhr.response;
            }
        }
    }
})

// 服务端
//延时响应
app.all('/delay', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        response.send('延时响应');
    }, 3000)
});

取消请求

// 客户端
<button>点击发送</button>
<button>点击取消</button>
<script>
    //获取元素对象
    const btns = document.querySelectorAll('button');
    let x = null;

    btns[0].onclick = function(){
        x = new XMLHttpRequest();
        x.open("GET",'http://127.0.0.1:8000/delay');
        x.send();
    }

    // abort 取消正在pending的请求
    btns[1].onclick = function(){
        x.abort();
    }
</script>

解决重复请求问题

<button>点击发送</button>
<script>
    //获取元素对象
    const btns = document.querySelectorAll('button');
    let x = null;
    //标识变量
    let isSending = false; // 是否正在发送AJAX请求

    btns[0].onclick = function(){
        //判断标识变量
        if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
        x = new XMLHttpRequest();
        //修改 标识变量的值
        isSending = true;
        x.open("GET",'http://127.0.0.1:8000/delay');
        x.send();
        x.onreadystatechange = function(){
            // 这里不判断状态码是因为，可能请求是失败的，则会导致走不到x.readyState === 4这个判断，无法修改isSending
            if(x.readyState === 4){
                //修改标识变量
                isSending = false;
            }
        }
    }
</script>

JQuery发送AJAX

get请求

$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式， xml, html, script, json, text, _default。

// 客户端
$('button').eq(0).click(function(){
    // {a:100, b:200} get携带的参数 在url后面
    $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    },'json');
});

// 服务端
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

post请求

$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式， xml, html, script, json, text, _default。

$('button').eq(1).click(function(){
    // {a:100, b:200} form data 请求体
    $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data);
    });
});

JQuery通用方法发送请求

$('button').eq(2).click(function(){
    $.ajax({
        //url
        url: 'http://127.0.0.1:8000/jquery-server',
        //参数
        data: {a:100, b:200},
        //请求类型
        type: 'GET',
        //响应体结果
        dataType: 'json',
        //成功的回调
        success: function(data){
            console.log(data);
        },
        //超时时间
        timeout: 2000,
        //失败的回调
        error: function(){
            console.log('出错啦!!');
        },
        //头信息
        headers: {
            c:300,
            d:400
        }
    });
});

aioxs发送请求

https://github.com/axios/axios

特点

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API （支持 ES6 Promise API）
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data （自动转换JSON数据）
🆕 Automatic data object serialization to multipart/form-data and x-www-form-urlencoded body encodings
Client side support for protecting against XSRF

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])

Get请求

// https://github.com/axios/axios
const btns = document.querySelectorAll('button');

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: 'atguigu',
            age: 20
        }
    }).then(data => {
        // handle success
        console.log(data);
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

响应结果展示：

Post请求

btns[1].onclick = function () {
    //Post请求
    axios.post('/axios-server', {  //请求体  
        username: 'admin',
        password: 'admin'
    }, {
        //url 参数
        params: {
            id: 200,
            vip: 9
        },
        //请求头参数
        headers: {
            height: 180,
            weight: 180,
        }
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

通用方法发送请求

btns[2].onclick = function(){
    axios({
        //请求方法
        method : 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            vip:10,
            level:30
        },
        //头信息
        headers: {
            a:100,
            b:200
        },
        //请求体参数
        data: {
            username: 'admin',
            password: '123456'
        }
    }).then(response => {
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    }).catch(error => {
        // handle error
    }).finally(() => {
        // always executed
    });
}

跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略

同源： 协议、域名、端口号 必须完全相同。

违背同源策略就是跨域。

同源情况：

// 服务端
const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
});

app.get('/data', (request, response)=>{
    response.send('用户数据');
});

app.listen(9000, ()=>{
    console.log("服务已经启动...");
});

// 客户端

<!-- index.html -->
<h1>尚硅谷</h1>
<button>点击获取用户数据</button>
<script>
    const btn = document.querySelector('button');

    btn.onclick = function(){
        const x = new XMLHttpRequest();
        //这里因为是满足同源策略的, 所以 url 可以简写
        x.open("GET",'/data');
        x.send();
       
        x.onreadystatechange = function(){
            if(x.readyState === 4){
                if(x.status >= 200 && x.status < 300){
                    console.log(x.response);
                }
            }
        }
    }
</script>

在localhost：9000 端口下的index页面点击button发送请求，这个请求也是本地端口下的服务。因此是同源的。

解决跨域问题

CORS

简介

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

工作

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

使用

后端设置响应头部信息： 在服务端（后端）对应的接口中设置合适的响应头部信息，允许指定域名或允许所有域名访问，如设置 Access-Control-Allow-Origin 为 ‘*’（表示允许所有域名)。

//设置响应头  设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

// 其他设置
// 允许所有Headers
response.setHeader('Access-Control-Allow-Headers', '*');
// 允许所有方法请求，get/post/put/delete...
response.setHeader("Access-Control-Allow-Method", '*');

其他解决跨域问题：

使用代理： 在开发环境下，可以通过配置代理来规避跨域问题。即在前端发送请求时，先将请求发送到自己的服务器（域名前端一致），再由自己的服务器转发请求到目标后端服务，然后将后端服务的响应返回给前端。这种方式需要自己搭建代理服务器。
小程序开发工具配置不校验合法域名： 在微信开发者工具中，可以临时关闭域名校验，但这仅适用于开发阶段，上线时不建议关闭域名校验。

朴素先生在进步

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax用法总结（包括原生Ajax、Jquery、Axois）

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据< student > < name > 孙悟空 < age > 18 < gender > 男
复制链接

扫一扫