Ajax简单使用
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
ajax 原生代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxtitle>
<style>
.weather table{
width: 800px;
border-collapse: collapse;
}
.weather table td{
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid red;
text-align: center;
}
style>
head>
<body>
<input type="text" id="city" value="苏州">
<button onclick="get_weather()"> 获取数据 button>
<div class="weather">
<table>
<tr>
<td>datatd>
<td>fengxiang——fenglitd>
<td>low——hightd>
<td>typetd>
tr>
table>
div>
<script>
// 原生ajax 获取数据
let city =document.querySelector("#city");
let table = document.querySelector(".weather table");
// 先保存页面原有的样子
let html = table.innerHTML;
const get_weather=()=>{
console.log(`${city.value}的天气预报`);
// 实例化一个ajax对象
let xhr = new XMLHttpRequest()
console.log(xhr.readyState) // 0 ajax 实例化
// 设置http请求信息
xhr.open("get",`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`)
// xhr.setRequestHeader() // 设置请求头信息
// 发送http请求
xhr.send() // 请求体 username=123&password=123
console.log(xhr.readyState) // 1 构建完成http请求 并且发送
// 通过ajax的监听事件，监听ajax是否已经获取到服务端返回的数据结果了
xhr.onreadystatechange=()=>{
// 当状态发生变化时，执行该函数
// console.log(xhr.readyState) // 2：http请求已经成功被服务端接受， 3：http请求已经在服务端处理中 4: http请求被服务端处理完成后并返回给客户端ajax
if (xhr.readyState===4){ // http请求被服务端处理完成后并返回给客户端ajax
if (xhr.status===200){ // 判断http请求是否相应成功
// 接受结果
// console.log(xhr.response) // 得到的数据是文本格式的 还需要转换格式
let data=JSON.parse(xhr.response);
// console.log(data.data.forecast);
let content="";
let fengli="";
for (let item of data.data.forecast){
// console.log(item);
fengli = item.fengli.slice(9,11)
content+=`
<tr>
<td>${item.date}</td>
<td>${item.fengxiang}——${fengli}</td>
<td>${item.low}——${item.high}</td>
<td>${item.type}</td>
</tr>
`
}
table.innerHTML=html+content;
}
}
}
}
script>
body>
html>