Ajax 使用

最新推荐文章于 2024-09-05 15:06:14 发布
最新推荐文章于 2024-09-05 15:06:14 发布
阅读量683 收藏 22
点赞数 10
分类专栏： 前端专栏 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54412570/article/details/140376992
版权

介绍

  • AJAX = 异步 JavaScript 和 XML。
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
  • 优点
    • 可以无需刷新页面而与服务器端进行通信
    • 允许你根据用户事件来更新部分页面内容
  • 缺点
    • 没有浏览历史，不能回退
    • 存在跨域问题(同源)
    • SEO不友好

XML

  • XML可扩展标记语言。
  • XML被设计用来传输和存储数据。
  • XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如有一个学生数据：

        name="孙悟空";

        age=18;

        gender="男";

用XML表示：

        <student>

                <name>孙悟空</name>

                <age>18</age>

                <gender>男</gender>

        </student>

现在已经被JSON取代了。
用JSON表示：
        {

                "name" : "孙悟空" ,

                "age" : 18 ,

                "gender" : "男"

        }

HTTP

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

请求报文

行       POST /s?ie=utf-8     HTTP/1.1
头       Host : baidu.com
           Cookie: name=zhangsan
           Content-type : application/x-www-form-urlencoded
           User-Agent: chrome 83
空行
体        username=admin&password=admin

响应报文

行        HTTP/1.1     200    OK
头        Content-Type:    text/html;    charset=utf-8
            Content-length:  2048
            Content-encoding:  gzip
空行
体         <html>
                <head>
                </head>
                <body>
                        <p>这是一段内容</p>
                </body>
            </html>

Express 框架

  • 安装：npm i express
  • js中的基本使用  (server.js)
//引入express
const express = require('express');

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

//创建路由规则
    //request 是对请求报文的封装
    //response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头   设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*')
    //设置响应
    //response.send('HELLO EXPRESS');
    const data = {
        name:'zhangSan',
        age:18
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str);    
});
app.POST('/server',(request,response)=>{
    //设置响应头   设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    //response.send('HELLO EXPRESS');
    const data = {
        name:'zhangSan',
        age:18
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str);
});

//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...");
})
  •  运行： node  server.js
  •  其他 js文件 调用server.js中的接口

Get 方法

//绑定事件
btn.onclick = function(){
    //1.创建对象
    const xhr = new XMLHttpRequest();
    
    //2.初始化设置请求方法和url
    xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
    
    //3.发送
    xhr.send();

    //4事件绑定   处理服务端返回的结果
        //on when当...时候
        //readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
        //change 改变
    xhr.onreadystatechange = function(){
        //判断（服务端返回了所有的结果）
        if(xhr.readyState === 4){
            //判断响应状态码200 404 403 401 500
            //2xx 成功
            if(xhr.status >= 200 && xhr.status < 300){
                //处理结果 行 头 空行 体
                //1.响应行
                console.log(xhr.status);//状态码
                console.log(xhr.statusText);//状态字符串
                console.log(xhr.getAllResponseHeaders());//所有响应头
                console.log(xhr.response);//响应体
            }else{
            
            }
        }
    }
}

Post 方法

//绑定事件
btn.onclick = function(){
    //1.创建对象
    const xhr = new XMLHttpRequest();

    //超时回调
    xhr.ontimeout  = function(){
        alert("网络异常，请稍后重试！");
    }
    //网路异常回调
    xhr.onerror = function(){
        alert("你的网络似乎出了一些问题！")：
    }

    //2.初始化设置请求方法和url
    xhr.open('POST','http://127.0.0.1:8000/server');
    //设置请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.setRequestHeader("name","zhangsan");


    //3.发送
       //xhr.send('a=100&b=200&c=300');
       //xhr.send('a:100&b:200&c:300');
    xhr.send('100');

    //4事件绑定   处理服务端返回的结果
        //on when当...时候
        //readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
        //change 改变
    xhr.onreadystatechange = function(){
        //判断（服务端返回了所有的结果）
        if(xhr.readyState === 4){
            //判断响应状态码200 404 403 401 500
            //2xx 成功
            if(xhr.status >= 200 && xhr.status < 300){
                //处理结果 行 头 空行 体
                //1.响应行
                console.log(xhr.status);//状态码
                console.log(xhr.statusText);//状态字符串
                console.log(xhr.getAllResponseHeaders());//所有响应头
                console.log(xhr.response);//响应体
            }else{
            
            }
        }
    }

    //取消请求
    //xhr.abort();
}

jQuery中的Ajax

  • jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它
<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js">
</script>
</head>

Get  、POST  方法 

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

$.get('http://127.0.0.1:8000/server',{a:100,b:100},function(data){
    console.log(data);
});

$.post('http://127.0.0.1:8000/server',{a:100,b:100},function(data){
    console.log(data);
},'json');

通用方法

$.ajax({
    // url
    url: 'http://127.0.0.1:8000/server',
    // 参数
    data: {a:100,b:100},
    // 请求类型： GET 、 POST
    type: 'POST',
    // 响应体结果
    dataType: 'json',
    // 成功时回调
    success: function(data){
        console.log(data);
    },
    // 超时时间
    timeout: 2000,
    // 失败时回调
    error: function(){
        console.log("失败");
    },
    // 头信息
    headers:{
        c:300,
        d:400
    }
});

Axios 发送 Ajax 请求

Axios 安装方法

  • 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    • 或 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  • 使用 npm:   npm install axios
  • 使用 bower:  bower install axios
  • 使用 yarn:  yarn add axios

Get 、POST  方法

axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios.get('/server',{
    //URL参数
    params:{
        a: 100,
        b: 200
    },
    // 头信息
    headers:{
        c: 300,
        d: 400
    }
}).then(value =>{
    console.log(value);
});

axios.post('/server',{
        //请求体
        username:'zhangsan',
        password:'123456'
    },{
    //URL参数
    params:{
        a: 100,
        b: 200
    },
    // 头信息
    headers:{
        c: 300,
        d: 400
    }
}).then(value =>{
    console.log(value);
});

通用方式

axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios({
    //请求方法
    method: 'POST',
    //url
    url: '/server',
    //URL参数
    params: {
        a: 100,
        b: 200
    },
    // 头信息
    headers: {
        c: 300,
        d: 400
    }
    // 请求体
    data: {
        username:'zhangsan',
        password:'123456'
    }
}).then(response =>{
    console.log(response);
});

 

Fetch 发送 Ajax

  • fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求
fetch('http://127.0.0.1:8000/server?a=100&b=200',{
    //请求方法
    method:"POST",
    // 头信息
    headers: {
        c: 300,
        d: 400
    },
    // 请求体
    body: "username=zhangsan&password=123456"
}).then(response =>{
    return response.json();
}).then(response =>{
    console.log(response);
});
残云浸染红缨
关注
  • 10
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax（Ajax使用js包）
02-27
使用Ajax实现从服务器读取数据，包括Ajax实现的详细步骤
jQury Ajax使用Token验证身份实例代码
08-29
jQury Ajax 使用 Token 验证身份实例代码 jQury Ajax 使用 Token 验证身份实例代码是指在使用 jQuery 的 Ajax 功能时，如何使用 Token 验证身份，以确保数据的安全性。本文将详细介绍该实例代码的实现细节。 一、...
ajax使用
热门推荐
张永光的博客
01-25 2万+
1.ajax使用 $.ajax({ url: "http://10.2.4.113/CheckPointService/Check006.asmx/UpCheckReportMsg", method: "get", data: {}, async: false, success: function(res
ajax使用方法
阿鹏的博客
05-21 2万+
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。 ajax需要在服务器环境下运行。 $.ajax使用方法 常用参数： 1、url 请求地址 2、type 请求方式，默认是’GET’，常...
【Python Web】Ajax 使用详解
风口IT猪的成长录
12-29 2997
Ajaxajax1. ajax的介绍2. ajax的使用3. 小结 ajax 1. ajax的介绍 ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以 让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是 实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住， 当前端页面想和后台服务器进行数据交互就可以使用ajax了。 这里
ajax 使用gbk编码格式,jQuery ajax提交中文编码(gbk)解决
weixin_39915204的博客
08-05 2784
jQuery ajax提交中文编码(gbk)解决1. jQuery ajax提交请求(GBK)。中文, IE下正常，FireFox下乱码. 这个问题让人很蛋疼, 解决方式也比较纠结,进行2次encodeURI, 然后后台再进行decode.如下: tagNames 是中文.var tagVal = encodeURI(document.getElementById("tagNames").valu...
DataTable的Ajax使用
hellojoy的博客
05-26 4581
https://www.cnblogs.com/bkyxnc/p/9214147.html DataTable Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 官网:https://datatables.net/ 中文网:http://www.datatables.club/ 用法： 先从最简单的开始：导入导入dataTable需要的js与css - css http://cdn.datatables.net/1.10...
Ajax的基本使用
weixin_67235801的博客
05-04 7576
Ajax的基本使用，无刷新登录，使用Ajax实现搜索自动提示
Ajax 使用 FormData 请求传参（附件）
weixin_43468000的博客
05-13 5146
Ajax 使用 formData 传参，上传附件
ajax使用params
第三世界的博客
10-19 1万+
给params赋值两种方式和alert显示params var params={}; params.name="object"; params["age"] =22; var key="keyhaha"; params[key]="keyValue";//!!! alert(params.keyhaha); var jas=JSON.stringify(obj);//!!! a
Django中使用AJAX
weixin_40133285的博客
03-20 7693
Django AJAX JQuery 提升用户体验 csrfmiddlewaretoken for循环 单数据提交 单行数据提交 onclick keydown mouseout addEventListener
Vue配合jQuery+Ajax使用
qq_35126546的博客
04-03 3977
如果单纯的通过jQuery拼接ajax响应的数据操作DOM的话，会感觉特别复杂，jQuery的template模板就很大程度上相似于VUE.js的逻辑，以下代码仅供参考： var vm = new Vue({ el : '#controller', data : { res :{} }, ...
Ajax使用示例
12-07
在本项目中，“Ajax使用示例”提供了一个完整的Ajax应用实例，帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在不刷新整个页面的情况下与服务器进行...
前端网络——Ajax使用
01-08
这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，只是这个固定的代码片段有点长而已 开始了,下面这一堆就是规定的代码： function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {//...
AjaxRequest(Ajax使用包)
09-02
AjaxRequest 是一个用于简化JavaScript中Ajax（异步JavaScript和XML）技术使用的开发包。Ajax是一种在无需刷新整个网页的情况下，能够更新部分网页内容的技术。它通过在后台与服务器进行少量数据交换，使得网页实现...
第 1 章：原生 AJAX
2203_75300307的博客
09-05 593
XML （Extensible Markup Language）可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。比如说我有一个学生数据：name = “孙悟空”;age = 18;gender = “男”;
AJAX基础与进阶
2301_80441013的博客
09-02 898
js代码修改之后，需要重新调用后台，Ctrl C关闭之前端口，重新启用新端口。注意：send（ ）只能接受字符串类型，想要传递对象等其他类型，则必须进行转换。在 url 后面缀参数，用 问号 分隔，多个参数之间用 & 分隔。1. 黄框中的响应头，可以设置任意的响应头，自定义的也可以。2. 红框中，将对象转变成字符串，使得send可以传递对象。好啦~本次的分享到这里就结束啦~~~我们下次不见不散~~~回到原来终端，在用node 文件名，实现运行。注意：这三个文件都要有，一个没有都不可以。
理解 Axios、jQuery Ajax 和 Fetch 的差别
a2274001782的博客
08-30 1268
jQuery 是一个功能强大的 JavaScript 库，Ajax 是其核心功能之一。通过 jQuery Ajax，我们可以轻松地进行异步 HTTP 请求，更新页面内容而无需重新加载页面。Fetch API 是现代浏览器提供的原生 API，用于替代传统的 XMLHttpRequest（XHR）。它基于 Promise，提供了更简洁和强大的接口来处理 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端，可以运行在浏览器和 Node.js 中。
第 2 章：AJAX 的使用
最新发布
2203_75300307的博客
09-05 916
AJAX 的所有操作都是通过该对象进行的。
jQuery教程：轻松掌握AJAX使用
"从零开始学习jQuery (六)：jQuery中的AJAX使用" 在本文中，我们将深入探讨如何利用jQuery这个强大的JavaScript库来轻松实现AJAX（异步JavaScript和XML）功能。jQuery的出现使得AJAX的使用变得更加统一和简便，无论...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值