什么是Ajax?怎么使用?

这篇具有很好参考价值的文章主要介绍了什么是Ajax?怎么使用?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、什么是Ajax

Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。它不是一种新的编程语言,而是由多种技术组合而成的,包括HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT,以及最重要的XMLHttpRequest。

Ajax的原理是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。

使用Ajax技术的网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,从而节省网络带宽,提高网页加载速度,缩短用户等待时间,改善用户体验。

Ajax通过异步通信的方式,实现了在不刷新整个页面的情况下,对页面的局部进行更新,极大地提升了Web应用的交互性和性能。

二、全局刷新和局部刷新

  • 全局刷新:整个浏览器被新的数据覆盖。在网络中传输大量的数据,浏览器需要加载,渲染页面。
  • 局部刷新:在浏览器器的内部,发起请求,获取数据,改变页面中的部分内容,其余的页面无需加载和渲染。

网络中数据传输量越少,给用户的感受越好。

Ajax是用来做局部刷新的:局部刷新使用的核心对象:异步对象(XMLHttpRequest)。这个异步对象是存在浏览器内存中的,使用JavaScript语法创建和使用XMLHttpRequest对象。

  • Ajax包含的技术主要有:JavaScript、dom、css、xml等。
  • 核心是:JavaScript 和 xml【被json代替】。
  • JavaScript:负责创建异步对象,发送请求,更新页面的dom对象。
  • Ajax是一种做局部刷新的新方法(2003),不是一种语言;

XML:网络中的传输的数据格式,使用json替换了XML。

<数据>
	<数据1>宝马1</数据1>
	<数据2>宝马2</数据2>
	<数据3>宝马3</数据3>
	<数据4>宝马4</数据4>
</数据>

二、Ajax中使用XMLHttpRequest对象(Ajax核心步骤)

1、创建异步对象

var xmlHttp = new XMLHttpRequest();

2、给异步对象绑定事件

onreadystatechange :当异步对象发起请求,获取了数据都会触发这个事件。这个事件需要指定一个函数, 在函数中处理状态的变化。

btn.onclick = fun1()

function fun1(){
    alert("按钮单击")}

例如:

xmlHttp.onreadystatechange= function(){
    处理请求的状态变化。
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
        // 可以处理服务器端的数据,更新当前页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value = data;

    }

}

3、异步对象的属性 readyState 表示异步对象请求的状态变化

  • 0:创建异步对象时, new XMLHttpRequest();
  • 1:初始异步请求对象,xmlHttp.open(请求方式,请求地址,true);
  • 2:发送请求,xmlHttp.send();
  • 3:从服务器端获取了数据,此时3是异步对象内部使用,获取了原始的数据。
  • 4:异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。

在4的时候,开发人员做什么?更新当前页面!

异步对象的status属性:表示网络请求的状况的:200,404,500,需要是当status==200时,表示网络请求是成功的。

4、初始异步请求对象

异步的方法open()

xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求(默认是true,异步请求));

// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

5、使用异步对象发送请求

xmlHttp.send();

获取服务器端返回的数据,使用异步对象的属性responseText

使用例子:xmlHttp.responseText

回调:当请求的状态变化时,异步对象会自动调用onreadystatechange 事件对应的函数。

访问地址:使用get方式传递参数

http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

6、json使用

1、Ajax发起请求后会返回的一个json格式的字符串

{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"}

2、json分类:

  • json对象格式:JSONObject,这种对象的格式名称: 值,也可以看做是key: value格式。
  • json数组格式:JSONArray,
// 基本格式:  
[
	{ name: "河北", jiancheng: "冀", "shenghui": "石家庄"},
	{ name: "山西", jiancheng: "晋", "shenghui": "太原"} 
]

3、为什么要使用json

  • json格式好理解
  • json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
  • json格式数据他占用的空间下,在网络中传输快,用户的体验好。
  • 处理json的工具库:Gson(google)、Fastjson(阿里)、jackson、 json-lib。
  • 在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名。

当然,下面是一个简单的Ajax示例,演示了如何使用JavaScript和XMLHttpRequest对象来执行异步HTTP请求,并更新网页内容。请注意,为了简化示例,我们假设服务器上存在一个名为example.txt的文件,它包含一些简单的文本内容。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ajax 示例</title>  
    <script>  
    function loadContent() {  
        // 创建一个新的XMLHttpRequest对象  
        var xhr = new XMLHttpRequest();  
          
        // 定义请求完成时的回调函数  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState === 4 && xhr.status === 200) {  
                // 请求成功完成,服务器返回状态码200  
                // 更新页面内容  
                document.getElementById('content').innerHTML = xhr.responseText;  
            }  
        };  
          
        // 设置请求方法和URL  
        xhr.open('GET', 'example.txt', true);  
          
        // 发送请求  
        xhr.send();  
    }  
    </script>  
</head>  
<body>  
    <h1>Ajax 示例</h1>  
    <button onclick="loadContent()">加载内容</button>  
    <div id="content"></div>  
</body>  
</html>

在这个示例中,定义了一个名为loadContent的JavaScript函数。当点击按钮时,这个函数会被调用。

  • 首先,我们创建一个新的XMLHttpRequest对象。
  • 然后,我们定义了一个回调函数onreadystatechange,这个函数会在请求的状态改变时被调用。当请求完成(readyState === 4)并且服务器返回状态码为200(成功)时,我们更新页面上id为content的<div>元素的内容。
  • 接着,我们使用open方法设置请求的方法和URL。在这个例子中,我们使用GET方法请求example.txt文件。
  • 最后,我们使用send方法发送请求。
  • 请注意,这个例子假设服务器上的example.txt文件是可访问的,并且与你的HTML文件在同一个域名下。如果文件位于其他位置,你需要修改xhr.open方法中的URL来指向正确的位置。

此外,现代Web开发中,可能会更倾向于使用更高级的库(如jQuery的$.ajax方法)或现代的Fetch API来执行Ajax请求,因为它们提供了更简洁、更强大的功能,并且能更好地处理错误和跨域请求。

文章来源地址https://www.toymoban.com/news/detail-849512.html

到了这里,关于什么是Ajax?怎么使用?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(38)
  • 【b站咸虾米】jQuery的ajax异步操作 web前端后端分离技术的原理

    课程地址:【jQuery的ajax异步操作 web前端后端分离技术的原理】 https://www.bilibili.com/video/BV1u5411M7ny/?share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 通过案例学习ajax异步操作。 介绍 php,前后端不分离的技术。 ajax,实现前后端分离技术。 在之前,要做动态网站,要懂php,ja

    2024年04月15日
    浏览(49)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(67)
  • 【Java Web】使用ajax在论坛中发布帖子

    AJAX 异步的JavaScript与XML,不是一门新技术,只是一个新术语; 使用AJAX,网页能增量更新在页面上,不需要刷新整个页面; JSON的使用比XML使用更加普遍; 示例 使用jQuery发送AJAX请求; 实践 采用AJAX请求,实现发布帖子功能。 1. DiscussPost类 2. mapper 3. Service 4. Controller 5. 前端jq

    2024年02月10日
    浏览(40)
  • BCSP-玄子Java开发之Java Web编程CH011_Ajax交互扩展

    $.ajax( )$.get() $.post() $.getJSON() .load() …… 常用参数 参数 类型 说明 url String 必选,发送请求的地址 data PlainObject 或 String 发送到服务器的数据 success Function(PlainObject result, String textStatus, jqXHR jqxhr) 请求成功后调用的函数参数result:可选,服务器返回的数据 dataType String 预期服务器

    2024年02月11日
    浏览(52)
  • axios是什么?axios使用axios和ajax

    Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它是由 GitHub 用户 mzabriskie 开发的,并且得到了广泛的社区支持。Axios 的设计目标是提供一种简洁、易用且功能强大的 HTTP 请求方式,以替代传统的 Ajax(Asynchronous JavaScript and XML)技术。 Axios 与 Ajax 的比较 Aj

    2024年04月15日
    浏览(36)
  • SSM 前端使用AJAX方式,fromdata文件格式上传二进制流文件

    今天在上课的时候,遇到了一个比较坑的问题,有个学生拿来了她的代码,让我给她看看为什么传值传不过来。 首先,前端是这样的: 后端是这样的: 然后上传文件的配置器是这样的: 她遇到的第一个问题是,后端这里接受值的时候,接受到的id和文件都是null,然后再后续

    2024年02月10日
    浏览(71)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(51)
  • Ajax 是什么? 如何创建一个 Ajax?

    Ajax(Asynchronous JavaScript and XML)是一种无需重新加载整个页面就可以与服务器交换数据并更新部分网页的技术。它使用异步请求来发送和接收数据,使得网页能够更快速地响应用户的交互。 创建一个简单的 Ajax 请求需要以下步骤: 创建 XMLHttpRequest 对象:首先,需要创建一个

    2024年01月18日
    浏览(30)
  • AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(五)—— 项目-新闻头条-数据管理平台-ajax综合案例前端

    愿许秋风知我意,解我心中意难平。 推荐使用, 每个程序员都有自己的管理方式。 HTML结构: 1.为什么要提取公共前缀地址(基地址),因为公司业务可能会更换服务器,如果你不想一条一条地修改请求地址的话。 后续使用axios时,url不需要再写前缀。 2.请求成功与失败 成

    2024年01月25日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包