AJAX

AJAX

  • AJAX是英文Asyncronise JavaScript And Xml 中文：异步的JS个XML
  • AJAX不是web API
  • AJAX也不是一项技术，AJAX是一种方法，通过多种技术的组合，实现动态更新页面的目的
  • AJAX的最大特点：在不刷新页面的情况下，更新页面数据
  • AJAX的实现方式有多种：
    • 方式一：XMLHttpRequest API
    • 方式二：操作标签的src属性
    • 方式三：JSONP
  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

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

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

XMLHttpRequest API

定义：

  • XML：是英文“Extension Markup Language”的缩写；中文是：可扩展的标记语言
  • HTML：是英文"Hyper Text Markup Language"的缩写，中文是：超文本标记语言。
    • 用途：编写网页文档
  • http：超文本传输协议
  • Request：请求
  • 字面意思：HTTP请求XML数据
    • XML表示一种数据/文件格式。但是在这里，xml是个误会：不代表XMLHttpRequest只能请求
    • xml数据，实际上，它可以请求任意类型数据，使用最多的数据类型是JSON。
  • 定义：XMLHttpRequest是一种处理浏览器和服务器之间通信的API。XMLHttpRequest是对HTTP协议的一次通信
    • 主要处理http请求。
    • 主要处理浏览器端：主要处理请求，不处理响应。
      • 请求是前端的工作
      • 响应是后端的工作
    • 它的核心对象是XMLHttpRequest 对象。
    • 它的最大特点：页面局部数据的更新。
    • 它是AJAX的最重要的实现手段
    • XMLHttpRequest通常有人这么简写：
      • xhr
      • http
      • xhhtp

请求数据的步骤

第一阶段：请求阶段

  1. 实例化一个xhr对象

    const xhr = new XMLHttpRequest()

  2. 准备发送请求：xhr.open()

    xhrReq.open(method, url, async);
    • method：要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略。
    • url：一个 DOMString 表示要向其发送请求的 URL。
    • async(可选)：一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。

    第二阶段：准备发起http请求

  3. 发送请求：xhr.send()

    xhr.send()

  4. 监控xhr实例对象的状态：xhr.onreadystatechange = function(){ }

    xhr.onreadystatechange = function(){}

  5. 查询xhr实例的状态：xhr.readyState

    let state = xhr.readyState

    • 0 请求未初始化

    • 1 服务器连接已建立

    • 2 请求已收到

    • 3 正在处理请求

    • 4 下载操作已完成

    第三阶段：响应阶段

  6. 响应已完成，接下来要获取数据：

    • xhr.responseText ：获取文本格式的数据

    • xhr.responseXml ：获取xml格式的数据

1.XMLHttpRequest()

定义：是一个构造函数。用于创建一个xhr实例对象。

语法：

const request = new XMLHttpRequest()

返回值：一个新的XMLHttpRequest对象

示例：

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

2.xhr.open()

定义：用于创建一个HTTP请求

语法：

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请求

语法：

xhr.send()
xhr.send(数据)

返回值：

示例：

4.xhr.onreadystatechange

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

语法：

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);
            }
        }

5.xhr.readyState

定义：用于查询xhr的状态码

语法：

xhr.readyState

返回值：

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

示例：

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

定义：用于查询xhr的http状态码

语法：

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.xhr.responseText

定义：在一个请求被发送后，从服务器端返回文本。

语法：

var resultText = XMLHttpRequest.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.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 支持。

返回值：
示例：

9.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>

10.statusText

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

xhr.responseText

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX、JSON
    HTTP是什么 HTTP是英⽂“Hyper Text Transfer Protocol”的缩写，中⽂译为：超⽂本...
    贝兼全_c5e4阅读 747评论 0赞 0
  • AJAX
    脚本化的HTTP。 http 超文本传输协议 HTTP是什么 html中的http请求有哪些？ href src ...
    败于化纤阅读 799评论 0赞 0
  • AJAX
    浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏...
    许先生__阅读 3,392评论 1赞 2
  • H34-AJAX
    如何发请求？ 用 form 可以发请求，但是会刷新页面或新开页面用 a 可以发 get 请求，但是也会刷新页面或新...
    半斋阅读 1,157评论 0赞 0
  • ajax和axios、fetch 面试考点准备
    1、AJAX AJAX全称(Async Javascript and XML)。即异步的JavaScript和XM...
    团子哒哒阅读 4,413评论 0赞 6