认识Ajax
概述:
Ajax是(Asynchronous JavaScript and XML) 异步JavaScript和XML的缩写,它是一种基于浏览器与服务器交互的Web开发技术。
Ajax通过使用JavaScript、XMLHttpRequest和DOM实现了在不刷新整个页面的情况下更新部分页面的能力。Ajax让网页能够达到更高的交互性和更好的用户体验。
特点:
-
异步传输:Ajax能够使用XMLHttpRequest在后台异步地发送和接收数据,不会对页面的加载和性能产生影响。
-
部分更新:通过JavaScript和DOM技术,Ajax可以对网页的某个部分进行更新,而不必刷新整个页面。
-
客户端脚本:Ajax的实现离不开JavaScript和DOM技术,这些技术可以使网页更加动态和交互。
-
跨平台、跨浏览器:Ajax可以在所有支持XMLHttpRequest的浏览器和平台上使用,因此具有很好的跨平台、跨浏览器的特性。
-
支持多种数据格式:Ajax可以支持多种数据格式,例如XML、JSON、HTML等,能够适应不同的应用场景。
-
提高用户体验:由于异步传输和部分更新的特性,Ajax能够提高用户体验,使得网页的加载速度更快,更加流畅。
Ajax 的优点包括:
- 减少页面刷新,提高了用户的交互体验。
- 可以异步地发送和接收数据,可以避免页面等待。
- 可以通过JavaScript和DOM来实现数据更新和操作,使得开发和维护更加容易。
- 支持多种数据格式,如XML、JSON等。
Ajax 的缺点包括:
- 无法完全支持Web应用所有的用户操作,例如,需要支持后退按钮等功能。
- 需要JavaScript支持,如果用户的浏览器禁用了JavaScript,则Ajax功能无法正常工作。
- 对搜索引擎的支持不友好,因为它们无法处理动态生成的内容。
- Ajax的一些操作可能会增加服务器的负担,需要进行适当的优化。
Ajax的基本实现步骤
实现Ajax,首先要先创建服务器,然后配置Ajax对象,最后通过Ajax对象向服务器端发送请求来获取服务器端的响应
一、创建服务器
新建文件为D:code\chapter04,然后在此目录下新建server目录,并在server目录下下载Express框架(忘了可以去看第七章认识express框架的安装步骤),并新建app.js文件,编写如下代码
const express = require("express"); //引入Express框架模块
const path = require("path"); //引入node.js核心模块path,用于处理文件路径
const app = express(); //创建一个Express应用程序实例
app.use(express.static(path.join(__dirname, 'public'))); //设置静态文件目录。将public文件作为静态资源根目录
app.get("/first", (req, res) => { //定义一个GET请求的路由处理程序,当路径为/first时触发处理程序
res.send('hello,Ajax'); //发送响应给客户端,返回一个简单的文本消息
});
app.listen(3000);
console.log('服务器启动成功!');
这段代码的功能是创建一个简单的Express服务器,当访问路径为/first
时,返回一个包含文本消息hello,Ajax
的响应。静态文件目录的设置允许访问public
文件夹中的静态资源。
注意:第四行代码中使用内置中间件express.static()来设置静态文件,其中path.join()方法用于拼接静态文件访问目录,__dirname表示绝对路径,public表示文件路径。
将上述代码编写完毕就可以在命令行中输入node app.js来启动端口
(提示:服务器虽然启动成功但可能无法显示页面信息,这需要配置一些需要用到的文件)
二、配置Ajax对象
在学会如何创建服务器之后,还需要去配置Ajax对象。首先需要先创建Ajax对象,然后使用open()方法来配置Ajax对象,最后使用send()方法发送请求。步骤如下:
创建Ajax对象的语法:
var xhttp = new XMLHttpRequest();
配置Ajax对象的语法:
xhttp.open(method, url, async);
//xhttp.open('请求方式','请求地址');
method
:请求的方法,如"GET"
或"POST"
url
:请求的 URLasync
:是否异步发送请求,默认为true
(异步),如果需要同步发送请求,设置为false
发送请求的语法:
xhttp.send();
完整示例:
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();
注意:在发送请求之前,你还可以使用setRequestHeader()
方法设置请求头,以便发送自定义的头部信息。
三、获取服务端响应
在配置对象完毕之后,可以通过监听onload事件和onreadystatechange事件来获取服务器响应到客户端的数据。
onload事件
xhr.onload = function () {};
xhr表示Ajax对象,onload属性的值为事件处理函数。
注意:在获取服务端响应的时,onload事件不需要对Ajax状态码进行判断,只会被调用一次,不兼容低版本IE浏览器
onreadystatechange事件
xhr.onreadystatechange = function () {};
xhr表示Ajax对象,onreadystatechange属性的值为事件处理函数。
注意:在获取服务端响应的时,onreadystatechange事件需要对Ajax状态码进行判断,会被多次调用,兼容低版本IE浏览器
Ajax状态码
请求状态的变化包括以下几个阶段:
- 0: 请求未初始化,
open()
方法未调用。 - 1: 服务器连接已建立,
open()
方法已调用。 - 2: 请求已接收,
send()
方法已调用,响应头和响应状态已经可用。 - 3: 请求处理中,响应体部分可用。
- 4: 请求已完成,响应体已完全可用。
注意:可以通过判断 xhr.readyState
属性的值来确定请求所处的状态阶段,然后根据需要执行相应的操作。
需要注意的是,在使用 onreadystatechange
事件时,需要使用条件判断来判断请求的状态是否为完成状态(xhr.readyState === 4
),并且需要再判断响应状态码是否为成功(xhr.status === 200
),以确保请求成功完成后再执行相应的操作。
将上述所学知识来实现一个简单的完整案例。如下
第一:创建code\chapter04目录,然后在此目录下创建server目录,在此目录下下载express框架,进行初始化项目,
npm init -y
//初始化命令
npm install express --save
//安装express模板
npm list express
//查看版本是否安装成功
并且新建app.js文件编写代码
const express = require("express"); //引入Express框架模块
const path = require("path"); //引入node.js核心模块path,用于处理文件路径
const app = express(); //创建一个Express应用程序实例
app.use(express.static(path.join(__dirname, 'public'))); //设置静态文件目录。将public文件作为静态资源根目录
app.get("/first", (req, res) => { //定义一个GET请求的路由处理程序,当路径为/first时触发处理程序
res.send('hello,Ajax'); //发送响应给客户端,返回一个简单的文本消息
});
app.listen(3000);
console.log('服务器启动成功!');
第二:在server目录下新建public文件,并在此文件下新建demo01.html文件,编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nihao</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest(); //创建了一个 XMLHttpRequest 对象 xhr
console.log(xhr.readyState); //输出了 xhr 对象的 readyState 属性的值,此时为0,表示请求还未初始化
xhr.open('get','http://localhost:3000/first'); //调用了 open() 方法,指定了请求的类型(GET)和 URL(http://localhost:3000/first)
console.log(xhr.readyState); //输出了 xhr 对象的 readyState 属性的值,此时为1,表示服务器连接已建立
xhr.onload = function () { //设置了 xhr 对象的 onload 事件的回调函数。当请求成功完成并返回响应后,这个回调函数将会被执行。
console.log(xhr.readyState); //获取状态码4
console.log(xhr.responseText); //输出内容Hello,Ajax
};
xhr.send(); //发送了Ajax 请求
</script>
</body>
</html>
-
当请求成功完成后,onload 事件的回调函数会被执行。在这个例子中,回调函数首先输出
xhr
对象的 readyState 属性的值(此时为4,表示请求已经完成),然后输出响应的文本内容(xhr.responseText
)。
注意,这个示例只是在控制台输出了相关的信息,并没有在页面上展示出来。如果需要将返回的数据展示在页面上,可以使用 DOM 操作来实现。
第三:创建完毕之后,使用node命令启动服务器,在浏览器中输入localhost:3000/first
就可以看到”hello,Ajax“的页面内容,然后也可以在输入localhost:3000/demo01.html就可以在浏览器控制台中看到结果(注意页面是没有任何,你需要在控制台中看到信息即可)