NodeJs中Ajax使用

最新推荐文章于 2024-07-25 20:29:32 发布

Blockchain Explorer

最新推荐文章于 2024-07-25 20:29:32 发布

阅读量2.2w

点赞数 8

分类专栏： JavaScript/ES6/NodeJS 文章标签： Ajax NodeJS Javascript

本文链接：https://blog.csdn.net/TDCQZD/article/details/82047656

版权

JavaScript/ES6/NodeJS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后，网页程序能够快速地将渐步更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

一、什么是AJAX？

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。

你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器。
接受并使用从服务器发来的数据。

二、浏览器发送请求

1、创建一个请求对象——XMLHttpRequest
为了使用JavaScript向服务器发送一个http请求，你需要一个包含必要函数功能的对象实例。这就是为什么会有 XMLHttpRequest 的原因。这是IE浏览器的ActiveX对象 XMLHTTP的前身。随后Mozilla，Safari和其他浏览器也都实现了类似的方法，被称为 XMLHttpRequest 。同时，微软也实现了XMLHttpRequest方法。

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2、告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应

发送一个请求后，你会收到响应。在这一阶段，你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应，在设置了对象的 onreadystatechange 属性后给他命名，当请求状态改变时调用函数。

httpRequest.onreadystatechange = nameOfTheFunction;
要注意的是，函数名后没有参数，因为你把一个引用赋值给了函数，而不是真正的调用了它。此外，如果不使用函数名的方式，你还可以用JavaScript的匿名函数响应处理的动作，就像下面这样：

httpRequest.onreadystatechange = function(){
    // Process the server response here.
};

3、发送请求

发送一个实际的请求，通过调用HTTP请求对象的 open() 和 send() 方法，像下面这样:

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。更多关于HTTP的请求方法，可以查看 W3C specs。

第二个参数是你要发送的URL。由于安全原因，默认不能调用第三方URL域名。确保你在页面中使用的是正确的域名，否则在调用 open() 方法是会有 “权限被拒绝” 错误提示。一个容易犯的错误是你企图通过 domain.tld 访问网站，而不是使用 www.domain.tld。如果你真的需要向另一个域名发送请求, 可以查看 HTTP access control。

第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认设置)，JavaScript执行会持续，并且在服务器还没有响应的情况下与页面进行交互。
send() 方法的参数可以是任何你想发送给服务器的内容，如果是 POST 请求的话。发送表单数据时应该用服务器可以解析的格式，像查询语句：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或者其他格式, 类似 multipart/form-data，JSON，XML等。

如果你使用 POST 数据，那就需要设置请求的MIME类型。比如，在调用 send() 方法获取表单数据前要有下面这个：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

4、总结：

 1. 创建xhr对象
        var xhr = new XMLHttpRequest();

2.处理响应
        xhr .readyState
            0 (未初始化) or (请求还未初始化)
            1 (正在加载) or (已建立服务器链接)
            2 (加载成功) or (请求已接受)
            3 (交互) or (正在处理请求)
            4 (完成) or (请求已完成并且响应已准备好)
         XMLHttpRequest.onreadystatechange
            http的状态码为200或者304 并且 请求得完成
                处理响应：
                    XMLHTTPRequest.responseText
 3、发送请求
 xhr.open("get","url");
 xhr.send();

三、浏览器处理服务器响应

在发送请求时，你提供的JavaScript函数名负责处理响应：

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是 XMLHttpRequest.DONE （对应的值是4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

全部readyState状态值都在 XMLHTTPRequest.readyState，如下也是：

0 (未初始化) or (请求还未初始化)
1 (正在加载) or (已建立服务器链接)
2 (加载成功) or (请求已接受)
3 (交互) or (正在处理请求)
4 (完成) or (请求已完成并且响应已准备好)

接下来，点击HTTP响应的 response code。可能的响应码都已经列在表中 W3C。在下面的例子中，我们通过检查响应码 200 OK 区别对待成功和不成功的AJAX调用。

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

在检查完请求状态和HTTP响应码后，你就可以用服务器返回的数据做任何你想做的了。你有两个方法去访问这些数据：

httpRequest.responseText – 服务器以文本字符的形式返回
httpRequest.responseXML – 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理

注意上面这一步只在你发起异步请求时有效（既 open() 的第三个参数未特别指定或设为 true）。如果你你发起的是同步请求则不必使用函数，但是非常不推荐这样子做，它的用户体验很糟糕。

四、快速入门案例

案例实现：浏览器以post和get向服务器请求数据。
server.js

const http = require("http")
const config = require("./config/config")
const url = require("url");
const querystring = require("querystring");
const data = require("./data")
const server = http.createServer((requestMsg, response) => {
    let   corsUrl = "";
    console.log(requestMsg.url)
    if (requestMsg.url.startsWith("/get")) {
        //跨域处理

        if(requestMsg.headers["origin"] === "http://127.0.0.1:63342"){
            corsUrl = "http://127.0.0.1:63342";
        }else if(requestMsg.headers["origin"] === "http://localhost:63342"){
            corsUrl = "http://localhost:63342";
        }
        response.writeHead(200,"ok",{
            "Content-type":"application/x-javascript",
            "Access-Control-Allow-Origin":corsUrl,
            "Access-Control-Allow-Headers":"damu",
            "Access-Control-Allow-Methods":"PUT,DELETE,POST",
            "Access-Control-Max-Age":"10"
        })

        //数据处理
        let age = "";
        const obj = url.parse(requestMsg.url, true)
        const name = obj.query.username;

        for (let item of data) {
            if (item.hasOwnProperty("name") && item["name"] === name) {
                age = item["age"];
            }
        }
        console.log(age)
        response.end(age.toString());
    } else if (requestMsg.url.startsWith("/post")) {

        //跨域处理
        if(requestMsg.headers["origin"] === "http://127.0.0.1:63342"){
            corsUrl = "http://127.0.0.1:63342";
        }else if(requestMsg.headers["origin"] === "http://localhost:63342"){
            corsUrl = "http://localhost:63342";
        }

        response.writeHead(200,"OK",{
            "Content-type":"application/x-javascript",
            "Access-Control-Allow-Origin":corsUrl,
            "Access-Control-Allow-Headers":"zd",
            "Access-Control-Allow-Methods":"PUT,DELETE",
            "Access-Control-Max-Age":"10"
        })
        //数据处理

        let age = ""
        requestMsg.on("data", (msg) => {
            const obj = querystring.parse(msg.toString());
            const name = obj.username;
            console.log(data)
            for (let item of data) {
                if (item.hasOwnProperty("name") && item["name"] === name) {
                    age = item["age"];
                }
            }
            console.log(age)
            response.end(age.toString());
        })
    } else {
        response.writeHead(500, "Invalid Request", {"Content-Type": "text/html; charset=utf-8"});
        response.end("无效请求");
    }
})

server.listen(config.port, config.host, () => {
    console.log(`server starting at ${config.host}:${config.port}`)
})

get.html

<body>
<form>
    <input type="text" name="username" id="username">
    <input type="submit" value="提交" id="ajaxBtn">
</form>
</body>
<script>

    window.onload = ()=>{
        const username = document.querySelector("#username");
        const ajaxBtn = document.querySelector("#ajaxBtn");
        ajaxBtn.addEventListener("click",(ev)=>{
            ev = ev||event;
            ev.preventDefault();
            const query = username.value;
            const url = "http://127.0.0.1:8080"+`/get?username=${query}`;
            makeRequest("GET",url)
        })

        function makeRequest(method,url) {
         const   httpRequest = new XMLHttpRequest();

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            httpRequest.onreadystatechange = ()=>{
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200 || httpRequest.status === 304) {
                        console.log(httpRequest.responseText)
                        const span = document.createElement("span");
                        span.innerHTML=httpRequest.responseText;
                        document.body.appendChild(span);
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            };

            httpRequest.open(method,url);
            httpRequest.send();
        }


    }

</script>

post.html

<body>
<form>
    <input type="text" name="username" id="username">
    <input type="submit" value="提交" id="ajaxBtn">
</form>
</body>
<script>

    window.onload = ()=>{
        const username = document.querySelector("#username");
        const ajaxBtn = document.querySelector("#ajaxBtn");
        ajaxBtn.addEventListener("click",(ev)=>{
            ev = ev||event;
            ev.preventDefault();
            makeRequest("POST","http://127.0.0.1:8080/post")
        })

        function makeRequest(method,url) {
         const   httpRequest = new XMLHttpRequest();

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            httpRequest.onreadystatechange = ()=>{
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200 || httpRequest.status === 304) {
                        console.log(httpRequest.responseText)
                        const span = document.createElement("span");
                        span.innerHTML=httpRequest.responseText;
                        document.body.appendChild(span);
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            };

            httpRequest.open(method,url);
            const query = username.value;
            httpRequest.send(`username=${query}`);
        }


    }

</script>

测试：
get:
这里写图片描述
set:

五、使用总结：

请求步骤如下所示：
1、创建一个请求对象

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2、初始化请求

xhrReq.open(method, url, async)
    XMLHttpRequest.open() 方法初始化一个请求。

3、发送请求

xhrReq.send()

XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。如果没有使用setRequestHeader（）方法设置 Accept 头部信息，则会发送带有* / *的Accept 头部。
4、为异步请求注册注册回调
1) XMLHttpRequest.onreadystatechange
XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发对应的回调
语法：

XMLHttpRequest.onreadystatechange = callback;

2) XMLHTTPRequest.readyState

0 (未初始化) or (请求还未初始化)
1 (正在加载) or (已建立服务器链接)
2 (加载成功) or (请求已接受)
3 (交互) or (正在处理请求)
4 (完成) or (请求已完成并且响应已准备好)

3) XMLHttpRequest.status
只读属性 XMLHttpRequest.status 返回了XMLHttpRequest 响应中的数字状态码。status码是标准的HTTP status codes

4) XMLHttpRequest.responseText
XMLHttpRequest.responseText 属性返回一个字符串，它包含对文本请求的响应，如果请求不成功或尚未发送，则返回null。responseText属性在请求完成之前将会得到请求内容
5) XMLHttpRequest.setRequestHeader
XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
语法：myReq.setRequestHeader(header, value);
header属性的名称。
value属性的值