ajax的使用详解

子夜时辰

已于 2023-11-04 22:28:44 修改

阅读量375

点赞数

分类专栏： JavaScript小贴士文章标签： ajax 服务器 javascript json

于 2023-01-09 11:17:06 首次发布

本文链接：https://blog.csdn.net/m0_56132701/article/details/128611179

版权

JavaScript小贴士专栏收录该内容

19 篇文章 1 订阅

订阅专栏

在这里插入图片描述

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript小贴士
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

🔥前言：

这里是关于ajax使用的笔记,希望可以帮助到大家，欢迎大家的补充和纠正

AJAX

10.3.1，AJAX概述

传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。

AJAX 的出现,刚好解决了传统方法的缺陷，AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

10.3.2，AJAX的XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，所有现代浏览器都支持XMLHttpRequest对象。

XMlHttpRequest对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建XMLHttpRequest的语法：

variable=new XMLHttpRequest();

老版本的Internet Explorer(IE5 和 IE6)使用ActiveX对象：

variable=new ActiveXObject("Microsoft.XMLHTTP")

为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

但是需要注意的是，出于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

10.3.3，AJAX的XMLHttpRequest对象方法

方法	描述
new XMlHttpRequest()	创建新的XMLHttpRequest对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method,url,async,user,psw)	规定请求method：请求类型GET或POST url:文件位置 async：true（异步)或false（同步） user:可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于GET请求
send(string)	将请求发送到服务器，用于POST请求
setRequestHeader()	向要发送的报头添加标签/值对

10.3.4，AJAX的XMLHttpRequest对象属性

属性	描述
onreadystatechang	定义当readyState属性发生变化时被调用函数
readyState	保存XMLHttpRequest的状态 0：请求未初始化 1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以XML数据返回响应数据
status	返回请求的状态号： 200:“OK” 403:“Fonrbidden” 404:“Not Found” 如需要完整列表请访问Http消息参考手册

10.3.5，AJAX的GET请求

项目结构：

在这里插入图片描述

users.json

[
    {"name":"袁左宗","age":"23","gender":"男"},
    {"name":"褚禄山","age":"25","gender":"男"},
    {"name":"齐当国","age":"21","gender":"男"},
    {"name":"红薯","age":"22","gender":"女"}
]

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX的练习1</title>
</head>
<body>
    
</body>
<script>
    // 步骤一：创建异步对象
    var ajax=new XMLHttpRequest();
    // 步骤二：设置url参数，参数一是请求方式，参数二是请求的url
    ajax.open("get","./jsondata/users.json")
    //步骤三： 发送请求
    ajax.send();
    //步骤四： 注册事件状态调用
    ajax.onreadystatechange=function(){
        if(ajax.readyState==4 && ajax.status == 200){
            console.log(JSON.parse(ajax.responseText))
        }else{
            console.log("请求发送失败")
        }
    }
</script>
</html>

控制台：
在这里插入图片描述

10.3.6，AJAX的POST请求

项目结构：

在这里插入图片描述

user.json:

[
    {"name":"袁左宗","age":"23","gender":"男"},
    {"name":"褚禄山","age":"25","gender":"男"},
    {"name":"齐当国","age":"21","gender":"男"},
    {"name":"红薯","age":"22","gender":"女"}
]

index.html:

    // 步骤一：创建异步对象
    var ajax=new XMLHttpRequest();
    // 步骤二：设置url参数，参数一是请求方式，参数二是请求的url
    ajax.open("get","./jsondata/users.json")
    // 设置请求头
    ajax.setRequestHeader("Content-type","application/json; charset=utf-8")
    // ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    //步骤三： 发送请求
    ajax.send();
    //步骤四： 注册事件状态调用
    ajax.onreadystatechange=function(){
        if(ajax.readyState==4 && ajax.status == 200){
            console.log(JSON.parse(ajax.responseText))
        }else{
            console.log("请求发送失败")
        }
    }

运行结果：

在这里插入图片描述

扩展知识：关于ajax中post请求头的几种类型

1.application/json（JSON数据格式)

xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

这种类型是我们现在最常用的，越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

2. application/x-www-form-urlencoded

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据

3. multipart/form-data

xhr.setRequestHeader("Content-type", "multipart/form-data; charset=utf-8");

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值

4. text/xml

xhr.setRequestHeader("Content-type", "text/xml; charset=utf-8");

它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范，这种方式现在不常用

子夜时辰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax的使用详解

传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。
复制链接

扫一扫