原生ajax-异步交互
程序员文章站
2022-07-12 19:02:50
...
实现ajax异步交互步骤：
创建XMLHttpRequest核心对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
与服务器端建立连接
使用XMLHttpRequest对象的open(method,url)方法
method - 设置当前请求的类型
url - 设置当前请求的地址
（如果是post方法需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');）
向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式 - key=value
接受服务器端的响应数据
使用XMLHttpRequest对象的onreadystatechange事件
监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前的状态（0-4）
创建XMLHttpRequest核心对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
与服务器端建立连接
使用XMLHttpRequest对象的open(method,url)方法
method - 设置当前请求的类型
url - 设置当前请求的地址
（如果是post方法需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');）
向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
请求参数的格式 - key=value
接受服务器端的响应数据
使用XMLHttpRequest对象的onreadystatechange事件
监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前的状态（0-4）
使用XMLHttpRequest对象的status属性，判断服务器端当前的状态码（200）
ajax中的XML格式
请求的数据格式 - XML
客户端如何构建符合XML格式的数据
构建的数据类型 - 字符串（string）类型
字符串的内容符合XML格式的语法要求
服务器端如何接受符合XML格式的数据
接受客户端的请求数据 - 字符串（string）类型
PHP集成了DOM的相关内容
DOMDocument类
DOMElement类
DOMNode类
响应的数据格式 - XML
下面是一个原生Ajax实现二级联动的例子
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xml的二级联动</title>
</head>
<body>
<select id="province">
<option>请选择</option>
<option>山东省</option>
<option>广东省</option>
<option>辽宁省</option>
<option>吉林省</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script type="text/javascript">
var Oprovince = document.getElementById('province');
var Acity = document.getElementById('city');
Oprovince.onchange= function(){
var options = Acity.getElementsByTagName('option');
for(var j = options.length-1;j>0;j--){
Acity.removeChild(options[j]);
}
if(Oprovince.value!='请选择'){
var xhr = getXhr();
xhr.open("post","10.php");
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('pro='+Oprovince.value);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var xmlDOC = xhr.responseXML;
var cities = xmlDOC.getElementsByTagName('city');
for(var i=0;i<cities.length;i++){
var city = cities[i].getAttribute('name');
var opts = document.createElement('option');
var txt = document.createTextNode(city);
opts.appendChild(txt);
Acity.appendChild(opts);
}
}
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
</script>
</body>
</html>
ajax.php
<?php
$pro = $_POST['pro'];
header('Content-Type:text/xml');
switch($pro){
case "山东省" :
// 手工构建
echo "<cities><city name='1' /><city name='2' /><city name='3' /></cities>";
break;
case "辽宁省" :
echo "<cities><city name='4' /><city name='5' /><city name='6' /></cities>";
break;
case "吉林省" :
echo "<cities><city name='7' /><city name='8' /><city name='9' /></cities>";
break;
case "广东省" :
echo "<cities><city name='0' /><city name='0' /><city name='8' /></cities>";
break;
}
?>