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

2024-04-12 22:24:38

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小东西来说可以先不加，严格的来说需要加上

码农公寓