首页 > 其他分享> 文章详细

JS内利用Ajax同后端异步交互数据

2020-04-08 13:04:49 阅读：235 来源： 互联网

标签：XMLHttpRequest 同后 request json send JS Ajax POST request2

Ajax介绍

技术背景

Ajax即异步JavaScript和XML，是一种用于快速创建动态网页的技术。

优点

可及时的更新网站内部分内容，不需要重载整个界面，节省时间与资源。

基础知识

XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而且目前所有的浏览器均支持这一对象。（老版本的IE5和6不能用，新版IE可以）

利用XMLHttpRequest与后端（服务器）交互数据

在向服务器发送请求的过程中需要使用XMLHttpRequest的open()和send()方法
open(method,url,async)，method为GET/POST，async表示同步或者异步，当它为True时是异步（一般规定这里必须设置为True）
send(string)，string仅用于POST请求

GET与POST的选择

我一般直接用GET，在前端没有向服务器发送敏感数据（账户密码）或者发送的数据量比较少的时候，比较适合GET方法。
GET与POST相比更加的简单快速。
但是当向服务器发送大量数据或者前端无法使用缓存文件的时候，应该使用POST。

实例

GET请求

//1.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//2.发送请求
request.open('get', 'http://localhost:8080/Server2_0_war_exploded/Servlet_index_charts?chart=1', true);
request.send();
//3.监听
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        //解析后端回传的json字符串，使其成为json数组
        var objs = eval(request.responseText);
        //打印json数组中的下标为0的json字符串
        //输出键为"abc"的键值
        console.log(objs[0].abc)
    }else{
        //出错处理
        }
}

这里说明：
发送至后端的数据是chart=1，同时也使用到了send方法，只是这个send并无实际的作用，它的存在仅仅是为了代码的规范化。当使用POST请求时，需要在send方法里面加上对应的参数。

POST请求

//1.创建XMLHttpRequest对象
var request2 = new XMLHttpRequest();
//2.发送请求
request2.open('post', 'http://localhost:8080/Server2_0_war_exploded/Servlet_index_charts', true);
request2.send("aaa=1");
request2.onreadystatechange=function () {
    if (request2.readyState === 4 && request2.status === 200) {
        // 将后端回传的数据转为json数组---objss
        var objss=eval(request2.responseText);
        //打印json数组中的下标为0的json字符串
        //输出键为"abc"的键值
        console.log(objss[0].abc)
    }else{
        //出错处理
        }
}

说明：一般POST请求需要加上HTTP请求头的，对于demo小东西来说可以先不加，严格的来说需要加上

标签：XMLHttpRequest,同后,request,json,send,JS,Ajax,POST,request2
来源： https://www.cnblogs.com/mirage-mc/p/12659206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9