AJAX

2023-03-06 本文已影响0人败于化纤

脚本化的HTTP。

http

超文本传输协议

HTTP是什么

html中的http请求有哪些？

href
src

HTTP状态码

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于指出服务器错误。

js中的http请求

使用js操作src会产生http请求
使用js操作href会产生http请求
使用js操作location会产生http请求
使用js操作表单会产生http请求

HTTP响应是什么

定义：HTTP响应指服务器对浏览器器请求做出的回应/响应。
服务器收到请求后必须处理请求，处理的结果有两种：
处理请求成功：返回请求的文件并通知浏览器请求成功。
处理请求失败：通知浏览器请求失败。

AJAX

Ajax 的核心是 XMLHttpRequest 对象。
Asynchronous JavaScript And XML 中文：异步的js和xml

AJAX不是wed APL
AJAX也不是一种技术，AJAX是一种方法，通过多种技术的组合，实现动态更新的目的。
在不刷新页面的情况下刷新数据
AJAX的实现方式有多种
方式1：XMLHTTPRquest API
方式2：操作标签的src
方式3：jsonp

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

AJAX = Asynchronous JavaScript And XML.
AJAX 并非编程语言。
AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
Request ：请求
JavaScript 和 HTML DOM（显示或使用数据）

XMLHTTPRquest API

XML ：是英文“Extension Markup language” 中文：可扩展的语言
用途：格式化数据
HTML是英文 Hyper text Markup Language 中文：超文本标记语言
用途：编写网页文档
http：超文本传输协议
Request：请求
字面意思：HTTP亲求XML数据

xml表示一种数据/文件格式。但是在这里，xml是一个误会，不代表xml+HTTPRequest只能请求
xml数据，实际上，它可以请求任意类型的数据，使用最多的数据类型是json

定义：XMLHTTPRequest是一种处理浏览器和服务器之间通信的API
主要处理HTTP请求

它的核心对象是XMLHTTPRequest对象
它的最大特点：页面局部数据的更新
它是AJAX的最重要的实现手段

步骤：

**第一阶段：请求阶段**

一：实例化一个XMLHTTPRequest对象

const xml = new XMLHTTPRequset()

二：准备发起http请求

const url = "./dinx.html"
xhr.open("GET",url,true)

三：发起请求

xhr.send()

**第三阶段：响应阶段**

四：监控xhr实列对象的状态：xhr.onreadystatechange事件：定义当 readyState 属性发生变化时被调用的函数

五：查询XML实列的状态：xhr.readyState

xhr.onreadystatechange= function(){
xhr.readyState
})
    0：请求未初始化
    1：服务器连接已建立
    2：请求已收到
    3：正在处理请求
    4：请求已完成且响应已就绪

**第二阶段：获取数据**

六：响应已经完成，获取数据：

xhr.reponstText：获取字符串格式的数据
xhr.reponstXML：获取XML格式的数据

1.XMLHTTPRequest()

定义：是一个构造函数。构造一个新的 XMLHttpRequest 对象。

语法：

const request = new XMLHttpRequest();

没有参数
返回值：一个新的 XMLHttpRequest 对象。

实例：

   //初始化一个实例对象
        const xhr = new XMLHttpRequest

2.XHR.poen()

定义：XMLHttpRequest.open() 方法初始化一个新创建的请求，或重新初始化一个请求。
语法：

xhrReq.open(method, url);
xhrReq.open(method, url, async);
xhrReq.open(method, url, async, user);
xhrReq.open(method, url, async, user, password);

method:要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名用于认证用途；默认为 null。
password：可选的密码用于认证用途，默认为 null。
返回值：文件地址
实例：

 const url = "./data.xml"
        console.log(url);//./data.xml

3.XHR.send()

定义：用于发送 HTTP 请求。
如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
语法：

XMLHttpRequest.send()
XMLHttpRequest.send(body)

body：在 XHR 请求中要发送的数据体。
返回值：
实例：
定义：xhr.send（）方法用于发送一个HTTP请求

4.xhr.readyState

定义：属性返回一个 XMLHttpRequest 代理当前所处的状态。
语法：

xhr.readyState

返回值：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

实例：

  //初始化一个实例对象
        const xhr = new XMLHttpRequest
        //利用实列对象xhr的open方法创建一个HTTP请求
        const url = "./data.xml"
        console.log(url);//./data.xml
        xhr.open("GET",url,true)
        //利用xhr。send（）方法发送请求
        xhr.send()
        //如何获取到服务器的响应
        //1.查询xhr的状态  xhr.readyState：对象的状态
        //onreadystatechange:请求对象的状态事件
        xhr.onreadystatechange= function(){
            console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
            console.log(xhr.status);//http状态码200
            console.log(xhr.responseText);
            //注意获取数据的时间点
            if(xhr.readyState === 4 && xhr.status === 200){
                const data = xhr.responseText
                // console.log(data);
            }
        }

5.xhr.onreadystatechange

定义：只要 readyState 属性发生变化，就会调用相应的处理函数 <small>(en-US)<small></small></small>。这个回调函数会被用户线程所调用。

语法：

XMLHttpRequest.onreadystatechange = callback;

当 readyState 的值改变的时候，callback 函数会被调用。
返回值：
实例：

  //初始化一个实例对象
        const xhr = new XMLHttpRequest
        //利用实列对象xhr的open方法创建一个HTTP请求
        const url = "./data.xml"
        console.log(url);//./data.xml
        xhr.open("GET",url,true)
        //利用xhr。send（）方法发送请求
        xhr.send()
        //如何获取到服务器的响应
        //1.查询xhr的状态  xhr.readyState：对象的状态
        //onreadystatechange:请求对象的状态事件
        xhr.onreadystatechange= function(){
            console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
            console.log(xhr.status);//http状态码200
            console.log(xhr.responseText);
            //注意获取数据的时间点
            if(xhr.readyState === 4 && xhr.status === 200){
                const data = xhr.responseText
                // console.log(data);
            }
        }

6.xhr.status

定义：http状态码,返回了 XMLHttpRequest 响应中的数字状态码。
语法：

xhr.status

返回值：返回请求的状态号

200: "OK"
403: "Forbidden"
404: "Not Found"

实例：

xhr.onreadystatechange= function(){
            console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
            console.log(xhr.status);//http状态码200
            console.log(xhr.responseText);
            //注意获取数据的时间点
            if(xhr.readyState === 4 && xhr.status === 200){
                const data = xhr.responseText
                // console.log(data);
            }
        }

7.statusText

定义：该属性以字符串返回响应数据
语法：

xhr.responseText

返回值：以字符串返回响应数据
实例：

 xhr.onreadystatechange= function(){
            console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
            console.log(xhr.status);//http状态码200
            console.log(xhr.responseText);
            //注意获取数据的时间点
            if(xhr.readyState === 4 && xhr.status === 200){
                const data = xhr.responseText
                // console.log(data);
            }
        }

8.xhr.responseXML

定义：该属性以 XML 数据返回响应数据
语法：xhr.responseXML
返回值：

xhr.responseXML

实例：

   xhr.onreadystatechange= function(){
            console.log(xhr.readyState);//对象的状态码 1:服务器链接已经建立
            console.log(xhr.status);//http状态码200
            // console.log(xhr.responseText);
            //注意获取数据的时间点
            if(xhr.readyState === 4 && xhr.status === 200){
                // const data = xhr.responseText
                const data = xhr.responseXML//#document
                console.log(data);
            }
        }

9.XMLHttpRequest.responseType

定义:属性responseType 是一个枚举字符串值，用于指定响应中包含的数据类型。
它还允许作者更改响应类型。如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
语法：

XMLHttpRequest.responseType = 数据类型;

Global_Objects/String类型的值，指定响应包含的数据类型。它可以采用以下值：

“ ”：空的 responseType 字符串与默认类型 text 相同。
arraybuffer
response：是一个包含二进制数据的 JavaScript ArrayBuffer
blob
response:是一个包含二进制数据的 Blob对象。
document
response: 是一个 [HTML] 或 XMLDocument根据接收到的数据的 MIME 类型而定。
json
response：是通过将接收到的数据内容解析为 JSON而创建的 JavaScript 对象。
text
response：是 DOMString对象中的文本。
ms-stream：非标准。请在使用前检查跨浏览器支持
response：是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。

返回值：
示例：

10.XMLHttpRequest.response

定义：该属性返回响应的正文。返回的类型为ArrayBuffer，Blob，Document。
JavaScript Object 或字符串中的一个。这取决于请求的 responseType属性。

语法：

XMLHttpRequest.response

返回值：该属性返回响应的正文。返回的类型为ArrayBuffer，Blob，Document。
示例：

   //1.创建一个示例对象
        const xhr =new XMLHttpRequest()
        //2.准备请求 打开窗口输出地址
        //GET:伸手要
        xhr.open("GET","./dinx.html",true)
        //8.设置响应数据的类型：xhl.reponseType = "document"
        xhr.responseType = "document"
        //3.发送 按下会车建
        xhr.send()
        //4.监控xhl的状态
        xhr.onreadystatechange = ()=>{
            //5.读取状态  
        let state =  xhr.readyState
         //10.查询实列对象http的状态：xhr.status
         console.log("🚀 ~ file: 3.html:39 ~ xhl.status:", xhr.status)
        //6.状态为4时，拿到数据
        if(state === 4 && xhr.status === 200){
            // document.body.innerText = xhr.responseText
            //7.拿到人看的：data是字符串，我希望data是一个对象
            //可以拿到对象
            const data = xhr.response
            document.body.innerText =  data.querySelector("h1").innerText
        }
        }
    </script>

AJAX

http

HTTP是什么

HTTP状态码

js中的http请求

HTTP响应是什么

AJAX

XMLHTTPRquest API

步骤：

一：实例化一个XMLHTTPRequest对象

二：准备发起http请求

三：发起请求

四：监控xhr实列对象的状态：xhr.onreadystatechange事件：定义当 readyState 属性发生变化时被调用的函数

五：查询XML实列的状态：xhr.readyState

六：响应已经完成，获取数据：

1.XMLHTTPRequest()

2.XHR.poen()

3.XHR.send()

4.xhr.readyState

5.xhr.onreadystatechange

6.xhr.status

7.statusText

8.xhr.responseXML

9.XMLHttpRequest.responseType

10.XMLHttpRequest.response

猜你喜欢

热点阅读