AJAX - 原生js 简单使用
1.post方式
HTML :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function(){
var selProvince = document.getElementById("selProvince");
var city = document.getElementById("city");
selProvince.onchange = function(){
//第一步：新建对象 new
var xhr = null;
if( window.ActiveXObject){
// 以Microsoft IE的方式创建 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
//第二步：对象的open()
xhr.open("post","01.php",true);
//POST方式需要自己设置http的请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第三步： 发送数据， post方式发送数据
xhr.send("province="+selProvince.value);
// 第四步
xhr.onreadystatechange = function(){
if( xhr.readyState ==4 && xhr.status==200){
city.innerHTML = xhr.responseText ;
alert( xhr.responseText )
}
}
}
};
</script>
<select name="selProvince" id="selProvince">
<option value="吉林省">1吉林省</option>
<option value="辽宁省">辽宁省2</option>
<option value="山东省">山东省3</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
PHP:
<?php
// $province = $_GET['province'];
$province = $_POST['province'];
switch ($province){
case '吉林省':
$cities = '<option>长春</option>'.
'<option>吉林</option>'.
'<option>四平</option>'.
'<option>辽源</option>'.
'<option>通化</option>';
break;
case '辽宁省':
$cities = '<option>沈阳</option>'.
'<option>大连</option>'.
'<option>鞍山</option>'.
'<option>抚顺</option>'.
'<option>本溪</option>';
break;
case '山东省':
$cities = '<option>济南</option>'.
'<option>青岛</option>'.
'<option>日照</option>'.
'<option>潍坊</option>'.
'<option>威海</option>';
break;
}
echo $cities;
?>
2. GET
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Get </title>
</head>
<body>
<script>
var glo={};
glo.tool={};
glo.ui ={};
//Ajax Get-方法-
glo.tool.ajaxGetMethod= function ( url,data,successFun){
//第一步：新建对象 new ;
var xhr = null;
try{
xhr = new XMLHttpRequest();
}
catch(ieXHR)
{ // 以Microsoft IE的方式创建 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：对象的open()。注意：post方法接着要设置setRequestHeader（），get方法注意这里url?传参，
if( data ){ // method=="get"
url+="?"+data/*+"&"+new Date().getTime()*/;
}
xhr.open("get",url,true);
//第三步： 注意：POST方式发送数据，而get方法这里发送null数据（通过open()方法传参数的 —url?+数据 -发送）
xhr.send( null );
//第四步：
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
successFun && successFun( xhr.responseText );
}
else{
alert("出错啦！"+ xhr.status)
}
}
}
}
//ajax方法应用
glo.ui.ajaxDealSel= function(){
var selProvince = document.getElementById("selProvince");
var city = document.getElementById("city");
selProvince.onchange = function(){ //GET 中文乱码解决： encodeURI（中文）
glo.tool.ajaxGetMethod( "01_GET.php", "province="+encodeURI(selProvince.value),function(s ){
alert(s);
city.innerHTML = s ;
} );
}
}
window.onload = function(){
glo.ui.ajaxDealSel();
}
</script>
<select name="selProvince" id="selProvince">
<option value="吉林省">1吉林省</option>
<option value="辽宁省">辽宁省2</option>
<option value="山东省">山东省3</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
PHP
<?php
$province = $_GET['province'];
// $province = $_POST['province'];
switch ($province){
case '吉林省':
$cities = '<option>长春</option>'.
'<option>吉林</option>'.
'<option>四平</option>'.
'<option>辽源</option>'.
'<option>通化</option>';
break;
case '辽宁省':
$cities = '<option>沈阳</option>'.
'<option>大连</option>'.
'<option>鞍山</option>'.
'<option>抚顺</option>'.
'<option>本溪</option>';
break;
case '山东省':
$cities = '<option>济南</option>'.
'<option>青岛</option>'.
'<option>日照</option>'.
'<option>潍坊</option>'.
'<option>威海</option>';
break;
}
echo $cities;
?>
3.封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ajax </title>
</head>
<body>
<script>
var glo={};
glo.tool={};
glo.ui ={};
//ajax的封装-方法-
glo.tool.ajaxMethod= function (method,url,data,successFun){
//第一步：新建对象 new ;
var xhr = null;
try{
xhr = new XMLHttpRequest();
}
catch(ieXHR)
{ // 以Microsoft IE的方式创建 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：对象的open()。注意：post方法接着要设置setRequestHeader（），get方法注意这里url?传参，
if(method==="get" && data ){
url+="?"+data+"&"+new Date().getTime();
}
xhr.open(method,url,true);
if(method!="get" )
//另外：POST方式需要自己设置http的请求头:声明发送数据的类型，该设置也解决了中文乱码问题
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第三步： 注意：POST方式发送数据，get方法发送null数据
if(method==="get" ) xhr.send( null ); else xhr.send( data );
//第四步：
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
successFun && successFun( xhr.responseText );
}
else{
alert("出错啦！"+ xhr.status)
}
}
}
}
//ajax方法应用
glo.ui.ajaxDealSel= function(){
var selProvince = document.getElementById("selProvince");
var city = document.getElementById("city");
selProvince.onchange = function(){
// glo.tool.ajaxMethod( "post","01.php", "province="+selProvince.value,function(s )
glo.tool.ajaxMethod( "get","01_GET.php", "province="+selProvince.value,function(s )
{
alert(s);
city.innerHTML = s ;
} );
}
}
window.onload = function(){
glo.ui.ajaxDealSel();
}
</script>
<select name="selProvince" id="selProvince">
<option value="吉林省">1吉林省</option>
<option value="辽宁省">辽宁省2</option>
<option value="山东省">山东省3</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
