ajax: 手机归属地查询
(https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443)
ajax: 天气预报(心知天气,和风天气)
ajax: 图灵机器人
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#panel {
width: 100%;
height: 400px;
border: 1px solid #ccc;
}
#msg {
margin-top: 10px;
width: 100%;
height: 100px;
}
</style>
<script>
window.onload = function () {
document.getElementById("btn_send").onclick = function () {
//1. 得到用户要发送的内容
var info = document.getElementById("msg").value;
//把消息放在panel里。
document.getElementById("panel").innerHTML += '<p>我说:' + info + '</p>';
var req = new XMLHttpRequest();
req.open("post", "http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info=" + info, true);
req.send();
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
var obj = JSON.parse(req.responseText);
//把消息放在panel里。
document.getElementById("panel").innerHTML += '<p>图灵回复:' + obj.text + '</p>';
}
}
}
}
</script>
</head>
<body>
<div id="panel">
</div>
<textarea id="msg">
</textarea>
<button type="button" id="btn_send">发送</button>
<!--</form>-->
</body>
</html>
~~~
1。注意ajax跨域访问,在jquery阶段介绍jsonp, 在servlet阶段介绍服务器中转,设置cross-origin