实习日记之通过调用common chemistry的api接口实现输入keyword查找cas号和mw。做了一个简单的html网页，用到了ajax技术。比较简单，适合刚入门的宝学习参考。代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="application/javascript">function onInputChange(event){console.log(event.target.value);if(event.target.value == ''){document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';}}function loadCAS() {// document.getElementById("cas").innerText = '';// document.getElementById("mw").innerText = '';var flag = 1;var searchurl = 'https://commonchemistry.cas.org/api/search?q='; // 获取 JSON 数据的链接var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 } else if (window.ActiveXObject) {request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求，适用于 IE 浏览器 }var keyword = document.getElementById("keyword").value;searchurl += encodeURIComponent(keyword);request.open("GET", searchurl, false);request.onreadystatechange = function() {if (request.readyState == 4 && request.status == 200) {var response = request.responseText;console.log(JSON.parse(response));if(JSON.parse(response).count.toString() =='0'){document.getElementById("cas").innerText = '暂无数据';flag = 0;}else{document.getElementById("cas").innerHTML = JSON.parse(response).results[0].rn;}}else if(request.readyState == 4 && request.status == 404){}}request.send();if(flag == 1){loadMW();}}function loadMW(){var detailurl = 'https://commonchemistry.cas.org/api/detail?cas_rn='; // 获取 JSON 数据的链接var request;if (window.XMLHttpRequest) {request = new XMLHttpRequest(); //发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器 } else if (window.ActiveXObject) {request = new ActiveXObject("Microsoft.XMLHTTP"); // 发送 Ajax 请求，适用于 IE 浏览器 }var cas = document.getElementById("cas").innerText.toString();console.log('loadMW-cas:'+cas);detailurl += encodeURIComponent(cas);request.open("GET", detailurl, false);request.onreadystatechange = function() {if (request.readyState == 4 && request.status == 200) {var response = request.responseText;console.log(JSON.parse(response));document.getElementById("mw").innerHTML = JSON.parse(response).molecularMass;}else if(request.readyState == 4 && request.status == 404){}}request.send();}</script></head>
<body><label for="keyword"> Keyword: </label><input type="text" id="keyword" name="keyword" oninput="onInputChange(event)" ><br><div>CAS: <span id="cas"></span></div><div>MW: <text id="mw"></text></div><button type="button" onclick="loadCAS()">点击加载</button></body></html>过程中遇到的问题：当我清空keyword值后，上一次搜索的cas和mw依然存在。
方案一：js实时监听input输入框值的变化，需要用到input监听事件：
<input type="text" id="keyword" name="keyword" oninput="onInputChange(event)" >调用对应的js监听函数：
function onInputChange(event){console.log(event.target.value);if(event.target.value == ''){document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';}}刚开始在这里踩了个坑，我以为event.target.value的值是null，所以条件写成了if(event.target.value == null)，数据一直无法清空。后来我改成了空字符串if(event.target.value == '')就对了。
方案二：在点击加载按钮的时候，先将元素内容清空再进行ajax请求，直接在点击事件触发的方法里清空数据即可。
//点击事件
function loadCAS() {document.getElementById("cas").innerText = '';document.getElementById("mw").innerText = '';......
}
![[Angular] 笔记 18：Angular Router](https://img-blog.csdnimg.cn/direct/20be427c23b54e0fad6b8485d64ba820.png)
