学习Ajax使用异步对象发送请求

简介: Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。

简介:【5月更文挑战第1天】Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。


一、什么是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请求,因为它们提供了更简洁、更强大的功能,并且能更好地处理错误和跨域请求。

相关文章
|
1月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
18 2
|
14天前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
16天前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
12 0
|
25天前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
26 2
|
1月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
1月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
31 0
N..
|
1月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
36 1
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
75 0
|
1月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
1天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作