Ajax基础

2022-10-02 09:52:58

1 概要

异步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js来收发来自web服务器的数据，且无需重载整个页面的技术。

注：xml是浏览器和服务器彼此通信的格式。

2 XMLHttpRequest 对象

XMLHttpRequest 是浏览器的内置对象

2.1 基础

2.1.1 创建 XMLHttpRequest 对象

//可用于连接、请求和接受服务器中的数据

var request = new XMLHttpRequest();

2.1.2 XMLHttpRequest 对象主要方法

初始化XMLHttpRequest 对象

request.open("GET",url,async);

//参数一:表示请求类型的字符串，"GET"/"POST"

//参数二:请求目标的url

//参数三:表示是否以异步模式发出，true为异步(默认值，常用)，false为同步

发送请求

request.send(null);

//send()方法必须接受一个参数，表示要发送的数据，也可以是null

用于设置请求头

setRequestHeader(header,value)

# header:请求头的key

# value:请求头的value

获取所有响应头

getAllResponseHeaders()

#返回值：所有响应头数据

获取响应头指定的header的值

getResponseHeader(header)

#header：响应头的key（字符串类型）

#返回值：响应头中指定的header对应的值

终止请求

abort()

2.1.3 XMLHttpRequest 对象主要属性

Number : readyState      每个值表示生存期中的特定状态。eg：0，1，2，3，4

Function : onreadystatechange         当readyState的值改变时自动触发执行其对应的函数（回调函数）

String : responseText         服务器返回的数据（字符串类型）

XmlDocument : responseXML        服务器返回的数据（xml对象）

Number : status         状态吗 eg：200，400

String : statusText        状态文本（字符串） eg：OK，NotFound

2.1.4 get/post请求简单实现

<script>

    function SubmitForm() {

        var xhr = new XMLHttpRequest();

        xhr.open("GET", "/login", true);

        xhr.onreadystatechange = func;

        xhr.send()

        function func() {

            if (xhr.readyState == 4) {

                console.log(xhr.responseText);

            }

        }

    }

</script>

<script>

    function SubmitForm() {

        var xhr = new XMLHttpRequest();

        xhr.open("POST", "/login", true);

        xhr.onreadystatechange = func;

        //在使用post提交数据时要设置请求头

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');

        xhr.send()

        function func() {

            if (xhr.readyState == 4) {

                console.log(xhr.responseText);

            }

        }

    }

</script>

2.2 同步请求

以同步模式发出的请求会暂停所有js代码的执行，直到从服务器获得响应为止。其应用代码比较简洁：

var request =new XMLHttpRequest();

request.open("GET","",false);

request.send(null);

var status =request.status;

//XMLHttpRequest的status属性，包含与服务器响应一起发送的http状态码

if(status ==200){

    alert("The text file was found");

}else {

    alert("code:"+status);

}

2.3 异步请求

大多数情况下都使用异步请求，它允许 XMLHttpRequest 对象等待服务器的响应的同时，浏览器继续执行js代码。

在异步请求中， XMLHttpRequest 对象提供了 readyState 属性，该属性包含一个数值，每个数值都表示请求生存期中的特定状态：

数值	注释
0	已创建对象，但未调用open()方法
1	已调用open()方法，但未发送请求
2	已发送请求，标题和状态已接收并可用
3	接收到来自服务器的响应
4	接收完请求数据

当 readyState 发生变化的时候，都会触发onreadystatechange事件

var request =new XMLHttpRequest();

function reqReadyStateChange() {

    if(request.readyState == 4){    //浏览器知道服务器已经收到自己的请求

        var status =request.status;

        if(status == 200){

            alert(request.responseText);  //返回文本的数据

        }else {1720

            alert("code:"+status);

        }

    }

request.open("GET",url);

request.onreadystatechange = reqReadyStateChange;

request.send(null);

}

3 自定义HttpRequest模块

创建HttpRequest模块

//定义一个 HttpRequest 引用类型（类）

function HttpRequest(url, callback) {

    this.request = new XMLHttpRequest();

    this.request.open("GET", url);

    var tempRequest = this.request;

    //this指向的是XMLHttpRequest对象，而不是reqReadyStateChange函数

    function reqReadyStateChange() {

        //在函数中又定义了一个函数

        if (tempRequest.readyState == 4) {

            if (tempRequest.status == 200) {

                callback(tempRequest.responseText);

            } else {

                alert("An error occurred trying to contact the server.");

            }

        }

    }

    this.request.onreadystatechange = reqReadyStateChange;

}

HttpRequest.prototype.send = function () {   //重构一个不需要参数的send()方法

    this.request.send(null);

};

使用以上自定义的模块

//创建一个函数用于显示接收到的数据

function handleData(text){

    alert(text);

}

var request = new HttpRequest("http://localhost:63342/123.txt",handleData);

request.send();

码农公寓