XMLHttpRequest 与 Ajax

最新推荐文章于 2024-07-07 19:49:58 发布

MichstaBe-IMUT

最新推荐文章于 2024-07-07 19:49:58 发布

阅读量1.3k

点赞数

分类专栏：前后端交互文章标签： ajax js xmlhttprequest

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/108617810

版权

本文详细介绍了Ajax和XMLHttpRequest的关系及其使用，包括Ajax的原理、实现步骤、数据交换格式JSON与XML的区别，以及XMLHttpRequest的使用方法，如GET和POST请求、错误处理和低版本IE浏览器的缓存问题。此外，还探讨了Ajax的异步编程和如何封装自定义的Ajax函数。

摘要由CSDN通过智能技术生成

XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。

在这里插入图片描述

Ajax

简介

1.Ajax术语最早产生于2015年。

2.Ajax表示Asynchronous Javascript and XML（异步 JS XML）

3.是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户体验

应用场景

（1）页面上拉加载数据

（2）列表数据无刷新分页

（3）表单项离开焦点数据验证

（4）搜索框提示文字下拉列表

传统网站存在问题

（1）网速慢情况下，页面加载时间长，用户只能等待。

（2）表单提交后，如果一项不合格，需要重新填写。

运行环境

Ajax技术需要运行在网站环境中才能生效，不能直接右键运行

Ajax运行原理以及实现

在这里插入图片描述

Ajax和XMLHttpRequest

我们通常将Ajax等同于XMLHttpRequest
但细究起来它们两个是属于不同维度的2个概念。

ajax是一种技术方案，但并不是一种新技术。
它依赖的是现有的CSS/HTML/Javascript
而其中最核心的依赖是浏览器提供的XMLHttpRequest对象
是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

一句话来总结两者的关系：使用XMLHttpRequest对象来发送一个Ajax请求。

Ajax实现步骤：

（1）创建Ajax对象 var xhr = new XMLHttpRequst();

（2）告诉Ajax请求地址和方式 xhr.open('get','http://www.example.com')

（3）发送请求 xhr.send();

（4）获取服务器给与客户端的想要数据

// 1. 创建 XHR 对象
var  xhr  =  new  XMLHttpRequest()
    // 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET',  'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
    // 4. 监听 onreadystatechange 事件
xhr.onreadystatechange  =   function()  {
   
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if  (xhr.readyState  ===  4  &&  xhr.status  ===  200)  {
   
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。

每个 Ajax 请求必然处于以下状态中的一个：

在这里插入图片描述

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/first');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
   
			console.log(xhr.responseText)
		}
	</script>
</body>
</html>

使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

// ...省略不必要的代码
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
// ...省略不必要的代码

这种在 URL 地址后面拼接的参数，叫做查询字符串

什么是查询字符串

定义：
查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

格式：
将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，
想加上多个参数的话，使用 & 符号进行分隔。
以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.

最低0.47元/天解锁文章

MichstaBe-IMUT

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest 与 Ajax

Ajax简介1.Ajax术语最早产生于2015年。2.Ajax表示Asynchronous Javascript and XML（异步 JS XML）3.是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户体验应用场景（1）页面上拉加载数据（2）列表数据无刷新分页（3）表单项离开焦点数据验证（4）搜索框提示文字下拉列表传统网站存在问题（1）网速慢情况下，页面加载时间长，用户只能等待。（2）表单提交后，如果一项不合格，需要重新填写。运行环境Ajax技术需要运行在网站环
复制链接

扫一扫

专栏目录