本文摘要：该文章详细介绍了如何使用JavaScript的XMLHttpRequest对象实现HTTP GET和POST请求。首先，GET方法通过调用`open`函数设置请求URL，并在`send`方法中传入null参数；而POST方法不仅需设置URL，还需在`setRequestHeader`中设定Content-Type为“application/x-www-form-urlencoded”。两者均使用了`onreadystatechange`事件及回调函数`handleResponse`处理服务器响应，其中GET请求成功获取JSON数据后进行了解析与展示。POST方法则着重强调了其安全性，适用于提交如用户名密码等敏感信息。通过对比，展现了GET与POST在实际应用中的区别与联系。

转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_30679823/article/details/95213062。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

GET方法:

function btn_get_click(){var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = handleResponse;// httpRequest.open("GET", "/user/login?user_name=" + encodeURIComponent(username) + "&password=" +//         encodeURIComponent(password));httpRequest.open("GET", "/course/schedule?termno=0&week=0");httpRequest.send(null);}function handleResponse(e) {if (e.target.readyState == XMLHttpRequest.DONE){document.getElementById("result").innerHTML = e.target.responseText;var responseTextJson = JSON.parse(e.target.responseText);alert(responseTextJson.length);alert(responseTextJson[0].classroom);//  alert(responseTextJson.DATAINFO[0].PROJ_NAME);
        } }

GET方法是明文的,处理上面的类似用户名密码的其实要用POST方法.(非明文方式)

PSOT:

function clickLoin() {var yonghu = document.getElementById("username").value;//获取用户名var mima = document.getElementById("password").value;//获取密码var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = handleResponse;var getloin ="username="+yonghu+"&&password="+mima;httpRequest.open("post", "/login");//以下这句在POST时要加上httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");httpRequest.send(getloin);}function handleResponse(e) {if (e.target.readyState == XMLHttpRequest.DONE){// var responseTextJson = JSON.parse(e.target.responseText);
alert(e.target.responseText);} }

两者的区别:

补充:(题外话)

后端post接口开发者的想法:

post函数定义了请求的地址，参数，还有一个回调函数。

而post的概念就是

“我执行的时候，需要你给我地址和参数，然后我执行完了，就完了，但是如果开发人员你，需要用到我返回的数据和状态，你要用，怎么办呢？

那没关系，不是还有一个回调函数吗？我再提供一个回调函数给你，至于你想怎么用，就用这个回调函数实现，于是我只把返回的数据，状态放在参数列表里面，并且下一个”执行“你外部函数的命令，

具体怎么实现，你要怎么用，是你开发人员的事了。

转载于:https://www.cnblogs.com/lyggqm/p/5687381.html

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_30679823/article/details/95213062。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

XMLHttpRequest：XMLHttpRequest 是一个内置在JavaScript中的对象，允许Web开发人员创建异步HTTP请求。通过使用这个对象，前端代码可以直接与服务器进行数据交换，而无需刷新页面。在本文中，它被用来实现GET和POST两种HTTP方法的请求操作，如初始化请求、设置请求头信息、发送请求以及监听并处理服务器返回的响应结果。

AJAX (Asynchronous JavaScript and XML)：AJAX是一种创建快速动态网页的技术，它利用了JavaScript在后台与服务器交换数据的能力，更新部分网页内容而无须重新加载整个页面。虽然名字中包含XML，但在实际应用中，JSON格式的数据更为常见。本文中通过XMLHttpRequest对象实现的GET和POST请求，正是AJAX技术的具体应用实例，使得前后端可以异步通信，提高用户体验。

Content-Type：Content-Type是HTTP协议中的一种消息头，用于定义发送到服务器或从服务器接收到的数据类型和格式。在本文中，当使用POST方法发送请求时，必须设置Content-Type为"application/x-www-form-urlencoded"，以告知服务器请求体内容的编码方式（这里是表单URL编码），这样服务器才能正确解析客户端提交的数据。对于处理不同类型的请求，比如上传文件或发送JSON数据，Content-Type值也会相应变化。