Ajax
ajax简介
ajax 全名 async javascript and XML(异步JavaScript和XML)
它可以在浏览器和服务器之间进行异步数据传输,实现页面不需要重新刷新就可以实现部分内容的更新
AJAX分为同步 (async = false)和异步(async = true)
同步请求
同步请求是指当前发出请求后,浏览器什么都不能做, 必须得等到请求完成返回数据之后,才会执行后续的代码,
异步请求
默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,
应用场景
Ajax在Web开发中有着广泛的应用,如网页表单验证、数据的异步提交、无刷新局部刷新等。Ajax可以用于Web应用程序的组件交互、数据的异步传输、客户端和服务端的交互等。常见的框架和库,如jQuery、React等,都有提供对Ajax的支持。
- 实时数据加载:AJAX 允许在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页内容。例如,新闻网站可以利用 AJAX 在用户浏览当前新闻的同时,后台加载其他的新闻数据。
- 表单提交:当用户填写网页表单提交数据时,可以用 AJAX 技术异步提交,避免了整个页面的刷新,提升了用户体验。例如,用户在写评论时,可以直接提交而无需刷新页面。
- 分页与无限滚动:在很多网站中,如搜索结果的分页显示,或者新闻阅读、社交网站的滚动加载更多,AJAX 被广泛用于这些应用场景。
- 即时聊天应用:在实时通讯、聊天应用中,AJAX 可以实现新消息的实时接收和发送,提供良好的交互体验。
- 自动补全:在输入框中,当用户开始键入时,可以使用 AJAX 请求相关数据并提供实时的自动完成建议。
- 交互式操作:在一些需要用户频繁与服务器交互的应用中,如在线游戏,AJAX 可以实现高效的数据交互
优势
- 不需要插件的⽀持,原⽣ js 就可以使⽤
- ⽤户体验好(
不需要刷新⻚⾯就可以更新数据
) 减轻服务端和带宽的负担
- 缺点:搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到
使用ajax
1.创建XMLHttpRequest
对象
使用new XMLHttpRequest()
创建XMLHttpRequest对象。
arduino
const xhr = new XMLHttpRequest()
console.log(xhr)
XMLHttpRequest是Ajax技术中最关键的一部分,因为它提供了在JavaScript代码中与服务器进行HTTP网络通信的能力,从而实现了网页与服务器之间的异步通信。
通过使用XMLHttpRequest对象,开发人员可以在网页中通过JavaScript代码向服务器发送HTTP请求,并在不刷新整个页面的情况下获取服务器返回的数据,实现了异步通信和局部更新的效果。
XMLHttpRequest的常用方法
open(method, url, async, user, password)
:初始化请求。参数分别为 HTTP 请求方法(GET、POST 等)、请求的 URL、是否异步(true 为异步)、用户名和密码(可选,用于认证)。send(data)
:向服务器发送请求。当请求方法为 "POST" 时,可以传递请求主体(如:表单数据)给服务器。setRequestHeader(header, value)
:设置请求头。例如,设置请求头 Content-Type 来告诉服务器请求主体的数据类型。getResponseHeader(header)
:获取特定的响应头。例如,"Content-Type" 表示响应数据的 MIME 类型。getAllResponseHeaders()
:获取所有响应头,响应头以字符串形式返回,每个响应头以换行符分隔。abort()
:终止当前的请求,取消异步操作。
2.配置链接信息
常用属性:
readyState
:整数值,表示 XMLHttpRequest 对象当前所处的状态(0~4)。status
:整数值,表示服务器返回的 HTTP 状态码(如:200、404 等)。statusText
:字符串值,表示 HTTP 状态的文本信息(如:"OK")。response
:服务器返回的响应数据,类型由responseType
属性确定。responseText
:字符串值,表示服务器返回的文本格式的响应数据。responseXML
:Document 对象,表示服务器返回的 XML 格式的响应数据。
lua
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// xhr.open('请求方式','请求地址',是否异步)
//默认 true 表示异步,false 表示同步
3.发送请求
scss
xhr.send()
4.接受响应
javascript
xhr.onload = function () {* console.log(xhr.responseText) }
AJAX 状态码
用来表示一个 ajax 请求的全部过程中的某一个状态
- readyState == = 0 : 表示未初始化完成,也就是 open 方法还没有执行
- readyState == = 1 : 表示配置信息已经完成,也就是执行完 open 之后
- readyState == = 2 : 表示 send 方法已经执行完成
- readyState == = 3 : 表示正在解析响应内容
- readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了
当 onreadystatechange
事件触发时,恰好 readyState
属性的值为4
,表示请求操作已经完成,且 HTTP status 为 200,表示请求成功,那么就打印出服务器响应的内容,该内容可以通过使用 responseText
属性获取
监听状态
onreadystatechange
:当XMLHttpRequest对象的readyState属性值改变时(状态码变更时),会触发该事件,我们可以通过这个事件监听器来判断Ajax请求的状态以及获取服务器响应的数据。
使用 ajax 发送请求时携带参数
get 和 post两个方式
使用post
1.无法使用缓存文件(更新服务器上的文件或数据库)
2 .向服务器发送大量数据(POST 没有数据量限制)
3 .发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
其他情况都使用get
使用post
arduino
const xhr = new XMLHttpRequest() xhr.open('post', './data.php')
封装
封装优势
- 代码复用性:通过封装 AJAX,您可以在不同的地方重复使用相同的代码,这可以节省开发时间和减少错误。只需传递不同的参数,就可以在各种不同的情况下使用同一函数。
- 代码的可读性和可维护性:封装后的代码更容易理解和维护。您不再需要在每个 AJAX 请求中重复相同的设置和错误处理代码,所有的复杂性都封装在了一个函数中。
- 错误处理:通过在一个中心位置处理所有 AJAX 错误,您可以保证所有错误都得到适当处理,而不是分散在许多不同的请求中。这在调试和解决问题时也会更为高效。
- 对变化的灵活性:如果您需要改变 AJAX 行为,比如改变某个公共的请求头或状态码处理机制,你只需要在封装的函数中修改,而不需要在每一个 AJAX 请求中单独修改。
只要输入以下便能获得ajax
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
type 代表 请求方式
url 代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error 代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//设置提交数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
当我们下载完数据以后需要对数据的处理方式不一样
【注】$ajax,我们需要按照传参的顺序,依次传入我们的参数。
*/
aBtns[0].onclick = function(){
$ajax({
url: "code14/1.get.php",
data: {
username: "小明",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET请求到的数据:" + result);
},
error: function(msg){
alert("GET请求数据错误:" + msg);
}
})
}
aBtns[1].onclick = function(){
$ajax({
type: "post",
url: "code14/2.post.php",
data: {
username: "小花",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST请求到的数据:" + result);
},
error: function(msg){
alert("POST请求数据错误:" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>