ajax
前端向后端异步的取数据的而无需刷新页面技术(重点：无需刷新页面)
使用ajax 的步骤
//1.创建ajax核心对象
var xmlhttp=new XMLHttpRequest();
//2.创建请求 get/post 请求地址 是否异步
xmlhttp.open("get","my.php?user=982395099&psd=123456",true)
//3.发送请求参数 key=value形式的字符串 多个参数之间以&连接
//get请求 请求参数不能写在send里面，要写在请求地址后面，以?连接 send里传null
xmlhttp.send(null);
//如果请求方式为post，需要设置请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//4.接收响应
//onreadystatechange
// readyState (请求的状态) 0(尚未初始化) 1(正在请求)2(请求完毕) 3(正在响应) 4(响应完毕)
// status(服务端返回的状态码) 404 500 200(ok) 301 304
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//responseText 可以服务器端返回的文本格式的数据
var data=xmlhttp.responseText
}
}
直接复制使用版
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","my.php?user=982395099&psd=123456",true)
xmlhttp.send(null);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var data=xmlhttp.responseText
}
}
案例
案例一
<input type="text" id="search">
<h1> 我是一个上线的项目</h1>
<button id="btn">加载数据</button>
<h2 id="title"></h2>
<script>
var title = document.getElementById("title");
var btn = document.getElementById("btn");
function getData(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","my.php?user="+search.value,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var data=xmlhttp.responseText
//dom操作动态生成
title.innerHTML = data
console.log(data);
}
}
}
btn.onclick = getData;
</script>
案例二 查询省市区
<!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>
</head>
<body>
<select name="" id="province">
<option value="">请选择省份</option>
</select>
<select name="" id="city">
<option value="">请选择城市</option>
</select>
<select name="" id="area">
<option value="">请选择区</option>
</select>
<script>
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("get","province.php?",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var procinces = xmlhttp.responseText;
var provincesArr=procinces.split(",");
for(var i=0;i<provincesArr.length;i++){
var option=document.createElement("option");
province.appendChild(option);
option.innerHTML=provincesArr[i];
}
}
}
//城市的ajax
province.onchange=function(){
//先删除上次的
city.innerHTML="<option>--请选择城市--</option>"
xmlhttp.open("post","city.php?",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("provinceValue="+province.value);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var cities = xmlhttp.responseText;
var citiesArr=cities.split(",");
for(var i=0;i<citiesArr.length;i++){
var option=document.createElement("option");
city.appendChild(option);
option.innerHTML=citiesArr[i];
}
}
}
}
//作业：省市区三级联动
city.onchange=function(){
area.innerHTML="<option>--请选择区--</option>"
xmlhttp.open("post","area.php?",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("cityValue="+city.value);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var areas = xmlhttp.responseText;
var areasArr=areas.split(",");
for(var i=0;i<areasArr.length;i++){
var option=document.createElement("option");
area.appendChild(option);
option.innerHTML=areasArr[i];
}
}
}
}
</script>
</body>
</html>
案例三： 基于高德地图的天气预报
<!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>
</head>
<body>
<h1>天气预报</h1>
<h2 id="weather"></h2>
<input id="city"/>
<script>
var city = document.getElementById("city");
var weather = document.getElementById("weather");
city.onblur=function(){
var xml = new XMLHttpRequest();
xml.open("get","https://restapi.amap.com/v3/weather/weatherInfo?key=fd9c5ecbfa5ac06307d83d39ca169884&city="+city.value+"&extensions=all",true);
xml.send(null);
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
var data1 = JSON.parse(xml.responseText);
if(data1.forecasts.length){
for(var i=0;i<data1.casts.length;i++){
weather.innerHTML=city.value+"日期是"+data1.casts[i].data+"白天天气是"+data1.casts[i].dayweather+"夜间天气是"+data1.casts[i].nightweather+"温度是"+data1+casts[i].daytemp;
}
}else{
weather.innerHTML="您所查询的城市暂无天气信息";
}
}
}
}
</script>
</body>
</html>
