http

北穆川
94 阅读5分钟

AJAX

  • 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.org/zh-CN/docs/Web/API/XMLHttpRequest) 对象。

    语法：

    const request = new XMLHttpRequest();

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

    实例：

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

    2.XHR.open()

    定义：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

    返回值：

    值状态描述
    0UNSENT代理被创建，但尚未调用 open() 方法。
    1OPENEDopen() 方法已经被调用。
    2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。
    3LOADING下载中；responseText 属性已经包含部分数据。
    4DONE下载操作已完成。
    实例：
      //初始化一个实例对象
        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 
**Ajax 的核心是 XMLHttpRequest 对象。**
Asynchronous JavaScript And XML 中文：异步的js和xml
- AJAX不是wed APL
- AJAX也不是一种技术，AJAX是一种方法，通过多种技术的组合，实现动态更新的目的。
- 在不刷新页面的情况下刷新数据
- AJAX的实现方式有多种
  方式1：XMLHTTPRquest API = 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>
avatar
文章
阅读
粉丝