Ajax使用2
回顾第一天的内容：
* Ajax的定义（不严格）
* 客户端与服务器端之间进行交互，而无需刷新当前页面。
* 异步与同步：
* 同步：客户端向服务器端发送请求，到服务器端进行响应，这个过程中，客户端不能做任何事情。
* 异步：客户端向服务器端发送请求，到服务器端进行响应，这个过程中，客户端可以做任何事情。
* 如何实现Ajax：
* Ajax核心对象：XMLHttpRequest对象
* IE浏览器提供了XMLHttp对象，该对象功能相同。
* 创建Ajax核心对象时，考虑浏览器兼容性。
function getXHR(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
* 核心对象的属性和方法：
* open( method , url , boolean)方法：创建请求
* method：设置当前请求方式为GET还是POST等。
* url：设置当前请求的连接。
* boolean：设置是否是异步请求，true（默认值）表示异步。
* send()方式：发送请求。
* 如果是GET方式：send(null)表示不能发送任何请求参数。
* 该步骤不能被省略！
* 如果是POST方式：可以使用send()方法发送请求参数。
* 在使用send()方法前，设置请求头信息：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); -- MIME类型
* onreadystatechange事件：监听服务器端的通信状态的变化。
* readyState属性：用于获取服务器端的通信状态
* 0 - 未初始化
* 1 - 正在请求
* 2 - 请求完毕
* 3 - 正在响应
* 4 - 响应完毕
* status属性：表示服务器端的状态码。
* 200：表示成功
* 404：表示找不到网页
* 500：表示服务器端内部错误
* responseText属性：接收服务器端的响应数据。
* 接收回来的数据类型是文本格式。
* 实现Ajax的步骤：
* 创建Ajax的核心对象：固定写法
* 创建请求：open()
* 发送请求：send()
* 接收响应：
* onreadystatechange事件
* readyState属性
* status属性
* responseText属性
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>城市联动</title>
<link rel="stylesheet" href="">
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script>
var provinceSel = document.getElementById("province");
// 当页面载入时，读取province的信息（省份）
function getXHR(){
var xhr;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else{
xhr = new XMLHttpRequest();
}
return xhr;
}
//1 创建核心对象
var xhr = getXHR();
//2 创建请求
xhr.open("GET" , "province.php" , true);
//3 发送请求
xhr.send(null);
//4 接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
// 将接受的字符串进行切割，转换成数组
// alert(data);
var dataArr = data.split(",");
// 遍历该数组，获取每一个省份信息
for(var i = 0 ; i<dataArr.length ; i++){
var provinceText = dataArr[i];
// 创建option标签，添加到province的select标签中
// alert(provinceText);
var option = document.createElement("option");
var text = document.createTextNode(provinceText);
option.appendChild(text);
provinceSel.appendChild(option);
}
}
}
// 根据用户选择不同的省份，读取并显示不同城市信息
//问题：怎么能知道用户选择了哪个省份？触发onchange事件
provinceSel.onchange=function(){
//把之前的选择的省份下的城市清空，也就是将city的select标签下的所有option清空
//a 获取city的select标签
var citySel = document.getElementById("city");
//b 获取对应所有的option标签
var cityoptions = citySel.getElementsByTagName("option");
//c 遍历所有option标签，逐一删除
var cityoptions = citySel.getElementsByTagName("option");
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
//1 获取用户当前选择的省份信息
//a 获取province下所有option标签
var proptions = provinceSel.getElementsByTagName("option");
var provinceValue;
//b 遍历所有option标签，判断是否具有selected属性
for(var i = 0 ; i < proptions.length ; i++){
var proption = proptions[i];
if(proption.selected){
//c 通过option标签的value属性获取对应的省份信息
provinceValue = proption.value;
break;
}
}
// 根据用户选择的省份，Ajax异步请求对应的城市信息
var xhr = getXHR();
xhr.open("POST" , "city.php" , true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("province="+provinceValue);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var cities = xhr.responseText;
// alert(cities);
var citiesArr = cities.split(",");
for(var i = 0 ; i < citiesArr.length ; i++){
var city = citiesArr[i];
var option = document.createElement("option");
var textEle = document.createTextNode(city);
option.appendChild(textEle);
citySel.appendChild(option);
}
}
}
}
</script>
</html>
province.php：
<?php
echo "江苏省,浙江省,辽宁省,吉林省,山东省";
?>
city.php：
<?php
$province = $_REQUEST["province"];
$info ="";
if($province == "江苏省"){
$info= "无锡市,泰州市,常州市,苏州市,昆山市,江阴市";
}else if($province == "浙江省"){
$info= "杭州市,温州市,宁波市";
}else if($province=="辽宁省"){
$info= "沈阳市,大连市,铁岭市,盘锦市,葫芦岛市";
}else if($province=="吉林省"){
$info= "长春市,吉林市,松原市,延边市,四平市";
}else if($province=="山东省"){
$info= "青岛市,济南市,威海市,日照市,德州市";
}
echo $info;
?>
Ajax02：
* XML
* 概述：
* XML译为可扩展标记语言，全称eXtensible Markup Language。
* 发展过程：
* 基于XML基础上，出现XHTML语言 - 替代HTML。
* XHTML 发展到2.0，XML野心破灭了。
* 作用：
* 用于数据的存储（数据的传输 -请求和响应）
* 用于配制文件（了解）
* 特点：
* 使用标签，XML的标签允许自定义的。
* 标签同样具有文本和属性。
* XML解释：利用DOM解析
* 语法：
* XML文件的扩展名为".xml"
* XML声明：
* 注意：
* 声明必须从文档的0行0列位置开始
* 声明必须为<?xml开头，以?>结束
* 属性：
* version属性：表示当前XML文件的版本，固定为1.0.
* encoding属性：表示当前XML文件的编码。
* 元素
* XML标签对大小写敏感。
* 元素具有属性和文本，包含其他元素。
* 属性：
* 属性值必须用引号引起来，单双引号均可使用。
* XML应用：
* JavaScript解析XML
* 使用JavaScript中的DOM（XML DOM）解析XML
* 通过XML DOM对象解析对应的XML内容：
* 其他浏览器
var parser = new DOMParser();
parser.parseFromString( xml, type );
* xml参数：指定当前要解析的XML名称。
* type参数：指定当前要解析的XML类型。（"application/xml"或"text/xml"）
* 返回值：表示解析XML后得到可以被DOM解析的内容。
* IE浏览器
var xmlDoc = new
ActiveXObject("Microsoft.XMLDOM");
* 利用DOM解析XML：
* getElementById()和getElementsByName()方法不能使用。
* getElementsByTagName()方法是有效的。
* 注意：
* 目前W3C最新规范不允许读取本地的XML文档，只能读取XML格式的字符串。
* 之前的W3C规范是允许读取本地的XML文档。
* Ajax解析XML
* Ajax的请求参数与响应数据更改为XML格式。
* 请求参数的格式为XML：
* 参数的类型依旧是字符串类型。
* 该字符串的内容为XML格式。
* 响应数据的格式为XML：
* 在Ajax中使用xhr对象的responseXML属性接收。
* （推荐）接收的数据格式已经是可以解析的XML格式，不需转换。
* 使用responseText来接收，利用XML解析器手动转换。
* 利用XML DOM解析
* JSON
* 概述：
* 定义：是一种轻量级的数据交换格式。
* 特点：
* 易于程序员阅读
* 易于计算机解析
* 用途：用于数据交换
* 结构：
* JavaScript Object：{ key : value }
* JavaScript Array：[ 1,2,3,4 ]
* JSON文件的扩展名为".json"
* 使用：
* JavaScript中如何解析JSON格式：
* eval()方法：将JSON格式的字符串转换成Object或Array。
* 注意：eval("("+JSON格式的字符串+")")
原因：不加"()"时，可能导致JSON的转换失败。
* JSON.parse()方法：将JSON格式的字符串转换成Object或Array。
* JSON.stringify( jsObj )方法：将Object或Array转换成JSON格式的字符串
* 注意：IE 7 不能使用JSON.parse()和JSON.stringify()
* 应用：
* Ajax中使用JSON（二级联动）
//创建解析XML的解析器内容，返回可以解析的内容
function getXmlDoc(xml){
var xmlDoc;
if(window.DOMParser){
//其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml, "application/xml");
}else{
var parser = new ActiveXObjext("Microsoft.XMLDOM");
parser.async = false;
xmlDoc = parser.loadXML(xml);
}
return xmlDoc;
}
JSON实现市级联动：
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON的二级联动</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="myutils.js"></script>
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
<script>
var provinceSel = document.getElementById("province");
var dataJSON;
var xhr = getXHR();
xhr.open("GET","server.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
// 将JSON格式的字符串进行转换
dataJSON = eval("("+data+")");
for(var i=0;i<dataJSON.length;i++){
var dataObj = dataJSON[i];
// alert(dataObj.province);
var provinceValue = dataObj.province;
var option = document.createElement("option");
var textEle = document.createTextNode(provinceValue);
option.appendChild(textEle);
provinceSel.appendChild(option);
}
}
}
provinceSel.onchange = function(){
//把之前的选择的省份下的城市清空，也就是将city的select标签下的所有option清空
//a 获取city的select标签
var citySel = document.getElementById("city");
//b 获取对应所有的option标签
var cityoptions = citySel.getElementsByTagName("option");
//c 遍历所有option标签，逐一删除
var cityoptions = citySel.getElementsByTagName("option");
for(var z=cityoptions.length-1;z>0;z--){
var cityoption = cityoptions[z];
citySel.removeChild(cityoption);
}
var province = this.value;
var cities;
for(var i=0;i<dataJSON.length;i++){
var dataObj = dataJSON[i];
var provinceValue = dataObj.province;
if(province==provinceValue){
cities = dataObj.city;
break;
}
}
for(var i=0;i<cities.length;i++){
var city = cities[i];
var option = document.createElement("option");
var textEle = document.createTextNode(city);
option.appendChild(textEle);
var citySel = document.getElementById("city");
citySel.appendChild(option);
}
}
</script>
</html>
server.php：
<?php
echo "[
{'province':'江苏省','city':['无锡市','泰州市','常州市','苏州市','昆山市','江阴市']},
{'province':'浙江省','city':['杭州市','温州市','宁波市']},
{'province':'辽宁省','city':['沈阳市','大连市','铁岭市','盘锦市','葫芦岛市']},
{'province':'吉林省','city':['长春市','吉林市','松原市','延边市','四平市']},
{'province':'山东省','city':['青岛市','济南市','威海市','日照市','德州市']}
]";
?>
浙公网安备 33010602011771号