后端程序员的前后端交互核心-Ajax

简介: 后端程序员的前后端交互核心-Ajax

后端程序员的前后端交互核心-AJax

1 Ajax概述

  • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
  • AJAX = Asynchronous异步 JavaScript and XML。
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页。

2 Ajax异步请求原理

同步请求

同步请求

image.png

异步请求

image.png

3 Ajax开发步骤

Get请求携带参数,直接拼接在url后面

function sendGet(){
    //同步请求
    //location.href = "/jsAjax?name=123&123";

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

    //2、设置异步请求的对象的URL地址
    //参数1:请求方式  参数:请求的URL地址 参数3:是否异步请求(默认true)
    xhr.open("GET","/jsAjax?name=cxk&age=21");

    //3、通过异步请求对象发送异步请求
    xhr.send();

    //4、监听异步请求的状态
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){ //异步请求成功,且响应数据了。
            //数据渲染
            //xhr.responseText这个数据是一个json字符串。
            var json1 = xhr.responseText;
            //将json格式的字符串转成json对象
            var json = JSON.parse(json1);

            console.log(json.code);
            console.log(json.msg);
        }
    }
}

POST请求携带参数

function sendPost(){
    //1、创建XMLHTTPRequest对象
    var xhr = new XMLHttpRequest();

    //2、设置异步请求的对象的URL地址
    //参数1:请求方式  参数:请求的URL地址 参数3:是否异步请求(默认true)
    xhr.open("POST","/jsAjax");

    //注意:如果使用POST请求携带数据,那么需要设置请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

    //3、通过异步请求对象发送异步请求如果请求方式为POST那么请求参数要放在send方法中。(仅限于POST请求)
    xhr.send("name=cxk&age=20");

    //4、监听异步请求的状态
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){ //异步请求成功,且响应数据了。
            //数据渲染
            console.log(xhr.responseText)
        }
    }
}

4 创建XMLHttpRequest对象

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}


5 XMLHttpRequest请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

image.png

6 readyState

  • 每当 readyState 改变时,就会触发 onreadystatechange 事件。
  • 在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
  • readyState 属性存有 XMLHttpRequest 的状态信息。
  • 当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
  • 下面是 XMLHttpRequest 对象的三个重要的属性:
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status 例:200: “OK” ;404: 未找到页面

7 XMLHttpRequest响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据(不重要)


目录
相关文章
|
13天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
50 2
|
2月前
|
前端开发 JavaScript API
解锁高效应用构建:Vuex与后端交互的前端状态同步策略,让数据流动如行云流水,紧跟前端开发的热点趋势
【8月更文挑战第27天】本文深入探讨了Vue框架下的前端状态管理库Vuex与后端服务交互时的状态同步策略。通过剖析Vuex的核心机制——状态(State)、变异(Mutation)、动作(Action)及模块(Module),文章展示了如何优雅地将后端数据加载并更新至前端状态中。特别地,借助示例代码解释了Action处理API调用、Mutation更新状态的过程,并介绍了如何通过模块化和命名空间提高状态管理的准确性和时效性。此外,还讨论了组件如何利用`mapState`和`mapActions`简化状态访问与操作的方法。遵循这些策略,开发者可以在构建复杂应用时显著提升性能与用户体验。
39 0
|
2天前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
11 3
|
1天前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
8 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
2月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
54 3
|
2月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
44 10
|
2月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
65 9
|
2月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
28 0
|
3天前
|
前端开发 NoSQL 关系型数据库
探索后端开发:从零到精通的旅程
【9月更文挑战第36天】在数字时代,后端开发是构建强大、可靠和高效应用程序的核心。本篇文章将带你踏上一段奇妙之旅,从基础概念到高级实践,揭示后端开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识和启发。让我们一起探索后端开发的世界,发现它的无限可能!
18 3
|
4天前
|
前端开发 JavaScript 数据库
探索后端开发:从新手到专家的旅程
【9月更文挑战第35天】在数字世界的后台,后端开发是支撑起整个互联网的骨架。本文将带你走进后端的世界,从基础概念到高级应用,一起探索如何构建强大而灵活的后端系统。无论你是初学者还是有经验的开发者,都能在这段旅程中找到新的启示和成长的机会。