Ajax教程_ajax是服务器端动态网页技术

Ajax教程_ajax是服务器端动态网页技术Ajax教程Ajax能做什么Ajax是一种异步请求数据的web开发技术,目前主要用于异步,大家都知道,浏览器主线程是单线程的,也就是一次只能干一件事,以Ajax就是让浏览器当主线程完成后去干别的事

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Ajax教程

Ajax能做什么

Ajax是一种异步请求数据的web开发技术,目前主要用于异步,大家都知道,浏览器主线程是单线程的,也就是一次只能干一件事,以Ajax就是让浏览器当主线程完成后去干别的事情,比如发送请求,加载接口数据等等.这个技术通过XMLHttpRequest对象实现,具体的机制大家可以参考浏览器的时间环机制.

Ajax的应用

以前我们在开发的时候,没有ajax,想要看另一个内容,只能让浏览器跳转到另一个页面,重新加载.导致用户体验很不好,并且由于同一个网站很多内容都一样,导致相同的内容被请求了多次,也浪费了宝贵的时间.有了Ajax,就是可以让数据在需要时候在加载,比如我有一个展示数据的表格和提交数据的表单,我们可以在提交的时候利用Ajax在不刷新页面的情况下提交到后台,之后让后台给我们一个响应结果,我们可以直接替换到原始的标签,这样用户就可以看到更新后的数据,对用户的体验页非常好

Ajax使用

原生Ajax

    // 创建Ajax
    let xhr = new XMLHttpRequest();
    // 配置请求地址和请求方式
    xhr.open("get", "http://localhost:3000/jsonData");
    // 发送请求
    xhr.send();
    // 监听事件 onload 接收完整的服务器响应数据
    xhr.onload = function () {
        console.log(xhr.responseText);
        // document.getElementsByTagName("h1")[0].innerHTML = xhr.responseText;
        // json字符串转json对象
        let resText=JSON.parse(xhr.responseText);
        document.getElementsByTagName("h1")[0].innerHTML = resText.age;

    }

这个是原生最简单的方式,其他的方式大家可以百度

目前因为使用原生的Ajax太繁琐,我们一般使用封装后的Ajax,目前常用的有Jquery的$.ajax和axios,还有原生的fetch.

Jquery Ajax

  $.ajax({
            type: "post",   //请求类型
            dataType: "json",   //请求数据返回类型
            url: "https://aliyun.firehua.top/admin/json_data/sent_data",    //请求地址
            data: $('#form').serialize(),       //表单序列化
            success: function (result) {        //成功
                console.log(result);
                if (result.code === 200) {
                    console.log(result);
                    console.log("成功");
                    $("#name").text(result.data.name);
                    $("#phone").text(result.data.phone);
                    $("#sex").text(result.data.sex);
                } else {
                    console.log(result);
                    console.log("失败");
                }
            },
            error: function (result) {      //失败
                console.log(result);
                console.log("异常");
            }
        });

作者:我的猫YMY
链接:https://juejin.im/post/6844903976782004237
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这里引用一下掘金大佬我的猫YMY的文章,具体大家可以看看,jquery也可以说比较常用,基本上写起来也还是比较简单,但是听周围的人说现在都不用jquery因为比较慢,下面就介绍介绍别的方式.

Vue axios

Vue是推荐用axios框架,这个是基于promise的,我个人感觉写起来比jquery方便,并也比较快,我比较推荐

//发送一个`POST`请求
axios({
    method:"POST",
    url:'/user/12345',
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    }
});

作者:ZHero88311
链接:https://juejin.im/post/6844903977016885255
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这里引用一下掘金大佬ZHero88311的文章,大家可以看看,这种方式看起来就比jquery的ajax要清爽,并且基本上和vue配合起来效果更佳,也不需要转换json,可以使用.then来处理响应,并且也可以编辑配置文件,如默认请求等等,还是比较方便

fetch

fetch是es6提出的一种解决方式,没有用xmlrequest,使用了原生的js,应该是速度最快的,但是兼容性可能有问题

    fetch('http://localhost:3000/data/123',
        {method:'get'}).then(data=>{
           return data.text();
        }).then(ret=>{
            console.log(ret);
        })

这个大家需要注意需要两次then才能获取到响应数据

Ajax跨域

因为浏览器的同源策略,导致一个页面只能访问自己站点的东西,访问别的服务器会报错误,这个是为了安全,所有我们需要跨域.一般常见的跨域有三种,jsonp,cors还有代理

jsonp跨域

jsonp就是动态创建一个script标签,里面请求想要的文件,一般是json数据,可以不受限制

这个是jquery的jsonp

 $.ajax({
                     url: "http://localhost:9090/student",
                     type: "GET",
                     dataType: "jsonp", //指定服务器返回的数据类型
                     success: function (data) {
                         var result = JSON.stringify(data); //json对象转成字符串
                         $("#text").val(result);
                     }
                 });

但是jsonp只能用于get请求,所有讲解下面的cors

cors跨域

cors跨域则是由服务端进行设置,一般不需要前端负责

下面是node的方式

   'Access-Control-Allow-Credentials': true, //允许后端发送cookie
      'Access-Control-Allow-Origin': req.headers.origin || '*', //任意域名都可以访问,或者基于我请求头里面的域
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', //设置请求头格式和类型
      'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',//允许支持的请求方式
      'Content-Type': 'application/json; charset=utf-8'//默认与允许的文本格式json和编码格式

代理跨域

代理跨域就是讲浏览器的请求让本站点的服务器去请求,因为服务器没有跨域概念,所有可以直接拿到

这个是vue的代码

  devServer: {
    host: 'localhost',
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://mall-pre.springboot.cn',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }

      }
    }
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168059.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 多模态情感识别_多模态融合的情感识别研究「建议收藏」

    多模态情感识别_多模态融合的情感识别研究「建议收藏」摘要:情感是人们在沟通交流的过程中传递的重要信息,情感状态的变化影响着人们的感知和决策。情感识别是模式识别的重要研究领域,它将情感维度引入人机交互。情感表达的模态包括面部表情、语音、姿势、生理信号、文字等,情感识别本质上是一个多模态融合的问题。提出一种多模态融合的情感识别算法,从面部图像序列和语音信号中提取表情和语音特征,基于隐马尔可夫模型和多层感知器设计融合表情和语音模态的情感分类器。建立面部…

  • 获取服务器外网地址失败_外网访问服务器

    获取服务器外网地址失败_外网访问服务器获取服务器外网地址。

  • svn小乌龟怎么断开链接,怎么查看电脑中的隐藏文件,svn复制包或修改包名应注意什么

    svn小乌龟怎么断开链接,怎么查看电脑中的隐藏文件,svn复制包或修改包名应注意什么svn小乌龟怎么断开链接,怎么查看电脑中的隐藏文件,svn复制包或修改包名应注意什么

  • python浮雕图片_python图片处理PIL

    python浮雕图片_python图片处理PIL一、PIL介绍PIL中所涉及的基本概念有如下几个:通道(bands)、模式(mode)、尺寸(size)、坐标系统(coordinatesystem)、调色板(palette)、信息(info)和滤波器(filters)1、通道每张图片都是由一个或者多个数据通道构成。PIL允许在单张图片中合成相同维数和深度的多个通道。以RGB图像为例,每张图片都是由三个数据通道构成,分别为R、G和B通道。而对…

  • 深入理解Java类加载器(1):Java类加载原理解析

    深入理解Java类加载器(1):Java类加载原理解析1      基本信息每个java开发人员对java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生,这背后就涉及到了java技术体系中的类加载。Java的类加载机制是java技术体系中比较核心的部分,虽然和大部分开发人员直接打交道不多,但是对其背后的机理有一定理解有助于排查程序中出现的类加载失败等技术问题,对理解java虚拟机的连接模型和java语言的动态性

  • this.class.getClassLoader()怎么理解?「建议收藏」

    this.class.getClassLoader()怎么理解?「建议收藏」this.class.getClassLoader()怎么理解?java是面向对象语言,面向对象的语言的宗旨就是万事万物皆对象,那么类也是一个对象,类里面的属性和方法也是对象。java里面的所有的类都是Class类的对象,这个this.class是获得这个类相对于Class类的对象。后面的方法是获得这个类对象的加载器。只有Class类才有getClassLoader()方法呀~可以这么想,我们平时讲述某某类,但是我们并没有说这个类怎么和虚拟机打交道,虚拟机怎么识别这个类.总不能全靠字符

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号