使用ajax的四个步骤:
1.创建核心对象:
var 对象名=new XMLHttpRequest()
2.创建请求 请求方式(get,post) 请求地址 是否异步
对象名.open(“请求方式t”,“地址”,true/false);
3.发送请求参数 key=value形式字符串 如果有多个用&连接
对象名.send(“请求参数”)
4.接收响应
对象.onreadystatechange=function(){}
onreadystatechange:监听ajax
readyState 返回状态码,描述当前状态,表示请求到哪位了
0:尚未初始化
1:正在发送请求
2:请求完成
3:正在响应
4:响应完毕(响应完毕不代表请求成功)
status 服务器端返回的状态码
404:页面找不到,可能是地址写错了
200:请求成功
500:找后台,服务器挂了
304:缓存
get请求举例:
<script>
//1.创建ajax核心对象
var xmlhttp=new XMLHttpRequest();
//2.创建请求
xmlhttp.open("get","get.php?user=12345&psd=123456",true);
//get请求要在请求地址后面加问号即:my.php?psd=123456,,,后面的send里面为null
//3.发送请求参数
xmlhttp.send(null);
//4.接收响应
xmlhttp.onreadystatechange=function(){
//判断其响应完毕且请求成功后
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//将服务器端的值返回并用一个变量进行存储
var values=xmlhttp.responseText;
//...之后进行各种操作...
}
}
</script>
post请求举例:
<script>
//1.创建ajax核心对象
var xmlhttp=new XMLHttpRequest();
//2.创建请求
xmlhttp.open("post","post.php",true);
//3.发送请求参数
xmlhttp.send("user=12345&psd=123456");//post在send中发送请求参数
xmlhttp.onreadystatechange=function(){
//判断其响应完毕且请求成功后
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//将服务器端的值返回并用一个变量进行存储
var date=xmlhttp.responseText;
//...之后进行各种操作...
}
}
</script>
ajax简单实例:省市区下拉选择框
map.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="province"><option>---请选择省份---</option></select>
<select id="city"><option>---请选择城市---</option></select>
<select id="area"><option>---请选择区域---</option></select>
<script>
//清空之前的余留的值
// function fn1(level){
// var options=level.getElementsByTagName("option");
// for(var i=1;i<options.length;i++){
// level.removeChild(options[i]);
// i--;
// }
// }
//传值
function fn(level){
xmlhttp.onreadystatechange=function(){ //接收响应
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var cities=xmlhttp.responseText;
var citiesArr=cities.split(",");//将php的字符串转为数组
for(i=0;i<citiesArr.length;i++){
var option=document.createElement("option");
level.appendChild(option);
option.innerHTML=citiesArr[i];
}
}
}
}
//获取数据
var xmlhttp=new XMLHttpRequest();
var province=document.getElementById("province");
var city=document.getElementById("city");
var area=document.getElementById("area");
//从文件中传入省的数据
window.onload=function(){ //页面一进来就发送ajax请求
xmlhttp.open("get","province.php",true);
xmlhttp.send(null);
fn(province);
}
//从文件中传入市的数据
province.onchange=function(){
// fn1(city);
// fn1(area);
city.innerHTML="<option>---请选择城市---</option>";
area.innerHTML="<option>---请选择区域---</option>";
xmlhttp.open("post","city.php",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("proValue="+province.value);
fn(city);
}
//从文件中传入区的数据
city.onchange=function(){
// fn1(area);
area.innerHTML="<option>---请选择区域---</option>";
xmlhttp.open("post","area.php",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("proValue="+city.value);
fn(area);
}
</script>
</body>
</html>
province.php:
<?php
echo "山东省,浙江省,辽宁省";
?>
city.php:
<?php
$proValue=$_REQUEST["proValue"];
if($proValue=="山东省"){
echo"青岛市,烟台市,济南市";
}else if($proValue=="浙江省"){
echo"杭州,温州,宁波";
}else{
echo"辽阳市,大连市,鞍山市";
}
?>
area.php:
<?php
$proValue=$_REQUEST["proValue"];
if($proValue=="青岛市"){
echo"1,2,3";
}else if($proValue=="烟台市"){
echo"4,5,6";
}else if($proValue=="济南市"){
echo"7,8,9";
}
else if($proValue=="杭州"){
echo"11,12,13";
}else if($proValue=="温州"){
echo"14,15,16";
}else if($proValue=="宁波"){
echo"17,18,19";
}
else if($proValue=="辽阳市"){
echo"21,22,23";
}else if($proValue=="大连市"){
echo"24,25,26";
}else{
echo"27,28,29";
}
?>